Belajar CSS - Mengenal Property box-sizing dan Vendor Previx pada CSS - Awonapa

Selamat Datang kembali teman-teman, Pada kesempatan ini kita akan membahas mengenai Property box-sizing dan Vendor Previx pada CSS.

Ketika kita ingin membuat sebuah box yang berisi padding, terkadang ukuran nya malah membesar keluar dan properti width dan height tidak berefek pada box tersebut, Nah oleh karena itu kita akan menggunakan Property box-sizing.

box-sizing dan Vendor Previx

Pembahasan

Baik teman-teman 2 hal yang akan kita bahas yaitu

Property Box-Sizing
Vendor Previx

Pengenalan box-sizing

Property Box-sizing adalah salah satu property yang ada di CSS3, fitur ini sangat membantu kita di dalam menentukan layout di dalam CSS, misalnya, jika teman-teman ingin membuat website, dan yang pasti teman-teman akan membutuhkan ukuran layout nya, beberapa diantara nya yaitu, Width (lebar layout), height (tinggi layout), margin (jarak antara konten di halaman), padding (lebar jarak antara konten di halaman).

Penggunaan Property box-sizing

Baik teman-teman kita akan langsung mencoba dengan Syntax HTML nya.

<html>
    <head>
        <meta charset="UTF-8" />
        <title>Membuat Form Keren</title>
        <style>
            #box1 {
                width: 100px;
                height: 100px;
                background: #de1260;
            }
            #box2 {
                width: 100px;
                height: 100px;
                background: #f9ff00;
            }
        </style>
    </head>
    <body>
        <div align="center">
            <div id="box1"></div>
            <br />
            <div id="box2"></div>
        </div>
    </body>
</html>

Hasil dari syntax diatas adalah seperti ini.

Nah, bagaimana jika kita ingin menambah padding dan border? Baik kita akan menambahkan beberapa property berikut:

padding: 10px;

border: 1px solid;

Baik kita akan lihat hasilnya

Nah kenapa Berbeda? Padahal kan width dan height nya sama? Apa ini membuat teman teman pusing?

Jadi oleh karena itu disini kita akan menggunakan property box-sizing, baik mari kita tambahkan property box-sizing

#box1 {
          width: 100px;
          height: 100px;
          background: #de1260;
          box-sizing: border-box;
      }

Dan hasilnya akan menjadi seperti ini

Nah pada itu sudah sama, berarti jika teman-teman mendapatkan hal seperti diatas, kita dapat menggunakan sebuah property box-sizing. Kenapa bisa seperti itu?

Jika kita menggunakan property box-sizing nilai padding atau border yang kita tambahkan akan masuk kedalam box tersebut dan tidak mengarah ke keluar box.

Contoh jika kita tambahkan ukuran border:

Betul kan, jadi dia akan mengisi ke arah dalam box tersebut.

Penjelasan Value box-sizing

box-sizing: content-box;

Content box atau dikenal dengan nilai default, yaitu tinggi dan lebar dari sebuah content, tidak termasuk border, padding, dan margin

box-sizing: padding-box;

Ini adalah lebar dan tinggi konten pada HTML, propery ini akan berefek hanya pada padding, tidak termasuk pada border, dan margin

box-sizing: border-box;

Border box, nah ini adalah property yang berefek pada padding, dan border tapi tidak termasuk margin.

box-sizing: inherit;

Value atau nilai dari property box-sizing mengikuti aturan elemen induk sebelumnya.

Penjelasan Vendor Previx

/* Vendor Prefix */
      -webkit-box-sizing: border-box;    
      -moz-box-sizing: border-box;
      -o-box-sizing: border-box;
      -ms-box-sizing: border-box;    
      }

Vendor Previx itu sendiri adalah property tambahan yang digunakan untuk mewakili property dengan tujuan mengaktifkan property utama di dalam browser versi lama.

Terdapat 4 base browser

-webkit- property: ditujukan untuk pengguna browser berbasis webkit seperti Google Chrome dan Safari

-moz- property: ditujukan untuk para pengguna browser mozilla firefox yang belum memperbaharui browsernya

-o- property: ditujukan untuk para pengguna browser opera yang belum memperbaharui browsernya ke browser versi terbaru

-ms- property: ditujukan untuk para pengguna browser internet explorer yang memang sangat jarang property yang kompatibel dengannya.

Kesimpulan

Kita sudah mencoba untuk memahami penjelasan diatas, dan itu adalah beberapa hal penting yang harus developer ketahui, agar pengembangan sebuah website menjadi lebih baik :)

Terimakasih Sudah Berkunjung.

Salam Semangatt!!

Awonapa - Website dan Blogging

Belajar CSS - Mengenal Property box-sizing dan Vendor Previx pada CSS