Mengapa kami membuat Alat Petak CSS?
CSS Grid adalah sistem tata letak CSS yang sangat canggih yang memungkinkan developer web membuat tata letak dua dimensi yang kompleks dan menetapkan aturan tentang cara setiap item turunan dalam petak diukur, disejajarkan, dan diurutkan. CSS Grid diperkenalkan setelah Flexbox menjadi populer, dan keduanya dapat membantu developer mencapai desain responsif yang lebih baik tanpa hack perataan yang rumit atau tata letak yang dibantu JavaScript.
Sebagai sistem tata letak yang relatif baru, CSS Grid juga sulit untuk digunakan dengan benar. Sintaksisnya cukup fleksibel (cukup telusuri cheatsheet petak), ada banyak cara untuk mencapai tata letak yang sama, dan ukuran yang fleksibel serta jalur implisit mempersulit alasan mengapa tata letak berperilaku atau tidak berperilaku seperti yang seharusnya. Itulah sebabnya kami berupaya menyediakan alat Petak CSS khusus di DevTools, sehingga developer dapat memiliki pemahaman yang lebih baik tentang apa yang dilakukan kode CSS mereka, dan cara mendapatkan tata letak yang tepat.
Desain alat
Upaya bersama antara Chrome dan Edge
Alat Petak CSS menarik perhatian dari Chrome DevTools dan Edge DevTools. Kami memutuskan untuk berkolaborasi sejak awal. Kami membagikan referensi produk, engineering, dan desain dari kedua tim, serta berkoordinasi setiap minggu untuk mewujudkannya.
Ringkasan fitur
Ada tiga fitur utama untuk alat CSS Grid:
- Overlay persisten khusus petak yang membantu informasi dimensi dan pengurutan
- Badge di Hierarki DOM yang menandai penampung Petak CSS dan mengalihkan overlay Petak
- Panel sidebar yang memungkinkan developer mempersonalisasi tampilan overlay DOM (misalnya, mengubah warna dan lebar aturan)
- Editor Petak CSS di panel Gaya
Mari kita pelajari lebih lanjut.
Overlay persisten petak
Di DevTools, overlay adalah instrumen canggih yang memberikan informasi tata letak dan gaya setiap elemen: