* { ukuran kotak: kotak perbatasan } FTW

Salah satu bagian yang paling tidak saya sukai tentang tata letak CSS adalah hubungan antara lebar dan padding. Anda sibuk menentukan lebar agar sesuai dengan kisi atau proporsi kolom umum, lalu mulai menambahkan teks, yang memerlukan penentuan bantalan untuk kotak tersebut. Lihatlah, Anda sekarang mengurangi piksel dari lebar aslinya, sehingga kotaknya tidak melebar.

Ah. Kalau saya bilang lebarnya 200px, astaga, meskipun saya punya padding 20px, itu akan menjadi kotak lebarnya 200px. Seperti yang Anda ketahui, model kotak tidak berfungsi seperti ini selama dekade terakhir. Wikipedia memiliki sejarah panjang tentang model kotak ini.

Bagaimanapunsaya punya saran untuk masa depan CSS Anda:

1
2
3
4
5
6
7

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

. Dan awalan sudah hampir mati.

Ini akan memberi Anda model kotak yang Anda inginkan. Terapkan ke semua elemen. Ternyata banyak browser sudah menggunakan border-box untuk banyak elemen formulir (itulah sebabnya input dan area teks terlihat berbeda pada width:100% 😉 tetapi aman dan masuk akal untuk menerapkannya ke semua elemen.

Dukungan peramban

Karena alasan dukungan browser, rekomendasi ini hanya berlaku untuk proyek yang mendukung IE8 dan lebih tinggi. (Kompatibilitas browser penuh di MDN) Firefox <= 28 masih diperlukan -moz- awalan, dan <= iOS4, Android <= 2.3 diperlukan -webkit-tapi semua orang menggunakan yang tanpa awalan. Anda dapat memeriksa html5please.com/#box-sizing (oleh * { box-sizing: border-box!

Apakah aman digunakan?

sama sekali. jQuery bekerja sangat baik dengannya (kecuali yang ini). Seperti disebutkan sebelumnya, dukungan browser sangat baik. Banyak proyek menggunakan model tata letak ini secara default, termasuk WebKit Web Inspector (alias Chrome DevTools). Saya mendengar Yathura Thorn, seorang front-end developer asal Belanda, berbicara tentang pengalamannya:

kami telah menggunakan *{box-sizing: border-box;} Salah satu proyek saya (diterapkan dalam produksi dan rata-rata lebih dari 1 juta kunjungan bulanan) telah dikerjakan selama sekitar satu tahun dan tampaknya berjalan cukup baik. Proyek ini telah diuji di IE8 dan 9 serta versi terbaru Firefox dan Chrome, dan kami tidak menemui masalah. Semua penghitungan dan animasi offset jQuery (+UI) berfungsi dengan baik, bahkan di elemen apa pun yang kami tampilkan sebagai blok sebaris. Baru-baru ini, kami mulai menguji proyek ini di perangkat seluler (iPhone, iPad, dan Android) dan kami belum mengalami masalah apa pun dengan ukuran kotaknya, jadi sepertinya proyek ini berfungsi cukup baik.

Salah satu kasus penggunaan favorit saya yang dapat diselesaikan dengan baik oleh border-box adalah kolom. Saya mungkin ingin membuat kisi dengan 50% atau 20% kolom, tetapi ingin menambahkan padding Oleh px atau em. Tidak ada CSS Segera hadir calc() Ini tidak mungkin…kecuali Anda menggunakan kotak pembatas. Terlalu mudah. 🙂 Pendekatan bagus lainnya adalah dengan menerapkan lebar 100% dan kemudian menambahkan padding ke elemen.

Pertunjukan

terakhir masuk @miketaylrSeperti yang diminta, saya juga menguji kinerja overhead. Bukti anekdot menunjukkan bahwa kotak pembatas tidak penting.

Anda mungkin marah dengan universalitasnya * pemilih.

Rupanya Anda pernah mendengarnya lambat. Pertama-tama, bukan itu masalahnya. Kecepatannya sama dengan h1 sebagai pemilih. Ini bisa menjadi lambat jika Anda menggunakannya secara eksklusif .foo > *jadi jangan lakukan itu. Selain itu, Anda tidak akan peduli dengan *kinerja kecuali Anda menggabungkan semua javascript, meletakkannya di bagian bawah, memperkecil css dan js Anda, meng-gzip semua sumber daya, dan mengompres semua gambar tanpa kehilangan. Jika Anda tidak mendapatkan skor kecepatan halaman di atas 90, masih terlalu dini untuk mempertimbangkan pengoptimalan pemilih. Lihat juga: Performa pemilih CSS berubah! (Untuk Lebih Baik) Nicole Sullivan.

Jadi…nikmatilah dan semoga Anda menemukan ini sebagai model tata letak yang lebih alami.

25.06.2012: Menambahkan bagian berikut.

Penyesuaian untuk konten pihak ketiga

Widget pihak ketiga mana pun yang menambahkan konten langsung ke halaman mungkin memerlukan perhatian tambahan. Widget apa pun di dalam iframe (seperti tema baru Disqus) secara alami diisolasi dari gaya tata letak halaman induk. Jika Anda perlu melakukan penyesuaian pada konten pihak ketiga, Anda dapat mengajukan permohonan box-sizing: content-box; ke widget dan turunannya. Ini mungkin bukan hal yang sepele karena kontrol formulir secara khusus merupakan kotak pembatas secara default, jadi Anda harus memperhitungkannya juga.