Mengapa kami membuat CSS Grid Tooling?
Petak CSS adalah sistem tata letak CSS yang sangat canggih yang memungkinkan developer web membuat tata letak dua dimensi yang kompleks dan menetapkan aturan tentang cara menentukan ukuran, penyelarasan, dan urutan setiap item turunan dalam petak. Petak CSS diperkenalkan setelah Flexbox menjadi populer, dan jika digabungkan, Petak CSS dapat membantu developer mencapai desain responsif yang lebih baik tanpa trik penyelarasan yang rumit atau tata letak yang dibantu JavaScript.
Sebagai sistem tata letak yang relatif baru, CSS Grid juga sulit untuk diperbaiki. Sintaksisnya cukup serbaguna (cukup telusuri tips praktis petak), ada banyak cara untuk mendapatkan tata letak yang sama, dan ukuran yang fleksibel serta trek implisit akan mempersulit Anda untuk memahami mengapa tata letak ada atau tidak berperilaku sebagaimana mestinya. Inilah alasan kami menyediakan alat Petak CSS khusus di DevTools, agar developer bisa lebih memahami apa yang dilakukan kode CSS mereka, dan cara menata letak yang benar.
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 berbagi resource produk, engineering, dan desain dari kedua tim, dan berkoordinasi setiap minggu untuk mewujudkan hal ini.
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 menyoroti container Petak CSS dan mengalihkan overlay Petak
- Panel bilah sisi yang memungkinkan developer mempersonalisasi tampilan overlay DOM (misalnya, mengubah warna dan lebar aturan)
- Editor Petak CSS di panel Gaya
Selanjutnya, mari kita bahas lebih lanjut.
Overlay persisten petak
Di DevTools, overlay adalah instrumen canggih yang menyediakan informasi tata letak dan gaya dari setiap elemen:
Informasi tambahan ini ditempatkan di atas elemen minat. Sebelumnya, saat Anda mengarahkan kursor ke Petak dengan DevTools terbuka, overlay akan menampilkan informasi model kotaknya, tetapi membatasi sorotan konten ke item petak tanpa menjelaskan alasannya. Ada dua bagian utama yang ingin kami tambahkan untuk overlay Petak CSS:
- kami ingin menampilkan informasi yang lebih bermanfaat tentang Petak, misalnya dimensi dan celah yang ditulis
- kita ingin membuat overlay melekat, sehingga kita dapat melihat beberapa Grid sekaligus, dan kita dapat melihat overlay yang memperbarui informasi Grid saat kita mengubah gaya elemen
Mari kita lihat cara kami mencapai keduanya.
Ukuran yang ditulis vs. ukuran yang dihitung
Salah satu bagian tersulit tentang proses debug Petak CSS adalah banyaknya cara untuk menentukan ukuran trek petak. Misalnya, Anda dapat menggunakan kombinasi nilai {i>pixel<i}, nilai persentase, pecahan, fungsi pengulangan, dan fungsi minmax untuk membuat ukuran trek yang serbaguna:
.grid-cards {
display: grid;
width: 200px;
height: 300px;
grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
grid-template-columns: repeat(3, minmax(200px, 1fr));
}
Namun, akan sulit untuk memetakan ukuran trek yang ditulis ini ke ukuran trek terhitung yang telah dihitung oleh browser untuk kita. Untuk menjembatani kesenjangan ini, kami menempatkan dua informasi ini berdampingan pada overlay:
String sebelum titik adalah nilai yang ditulis, dan string setelah titik mewakili nilai aktual yang dihitung.
Sebelumnya, DevTools tidak memiliki kemampuan untuk mendapatkan nilai yang ditulis. Secara teori, kita bisa mengurai nilai yang ditulis di DevTools sendiri dan menghitungnya sesuai dengan spesifikasi CSS Grid. Ini akan melibatkan banyak skenario rumit, dan pada dasarnya kita hanya akan menjadi duplikasi upaya Blink. Oleh karena itu, dengan bantuan dari tim Blink Style, kami mendapatkan API baru dari mesin gaya yang menampilkan “nilai beruntun”. Nilai berjenjang adalah nilai efektif akhir, setelah beruntun CSS, untuk properti CSS. Ini adalah nilai yang unggul setelah mesin gaya mengompilasi semua stylesheet, tetapi sebelum benar-benar menghitung nilai apa pun, misalnya persentase, pecahan, dll.
Sekarang kita menggunakan API ini untuk menampilkan nilai yang ditulis dalam overlay petak.
Overlay persisten
Sebelum alat CSS Grid, overlay di DevTools cukup jelas: Anda mengarahkan kursor ke elemen, baik di panel DOM Tree DevTools, atau langsung di halaman yang diperiksa, dan Anda akan melihat overlay yang menjelaskan elemen ini. Anda mengarahkan kursor, dan overlay akan menghilang. Untuk overlay Grid, kami menginginkan sesuatu yang berbeda: beberapa Grid dapat disorot secara bersamaan, dan overlay Grid bisa tetap aktif sementara overlay on-hover reguler masih berfungsi.
Contoh:
Namun, overlay di DevTools tidak dirancang dengan mempertimbangkan mekanisme persisten dan multi-elemen ini (dibuat bertahun-tahun yang lalu). Karena itu kita harus memfaktorkan ulang desain overlay agar metode ini berfungsi. Kami menambahkan GridHighlightTool baru ke dalam rangkaian alat sorotan yang ada, yang kemudian berkembang menjadi PersistentTool global untuk menyoroti semua overlay persisten secara bersamaan. Untuk setiap jenis overlay persisten (Petak, Flex, dll.), kami menyimpan kolom konfigurasi masing-masing di dalam alat persisten. Setiap kali saat penyorot overlay memeriksa apa yang akan digambar, penyorot overlay juga akan menyertakan konfigurasi ini.
Agar DevTools dapat mengontrol apa yang perlu disorot, kami membuat perintah CDP baru untuk overlay persisten Grid:
# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
parameters
# An array of node identifiers and descriptors for the highlight appearance.
array of GridNodeHighlightConfig gridNodeHighlightConfigs
di mana tiap GridNodeHighlightConfig berisi informasi tentang node mana yang akan digambar, dan cara menggambarnya. Hal ini memungkinkan kita menambahkan mekanisme persisten multi-item tanpa memutus perilaku saat kursor diarahkan saat ini.
Badge Petak Real-time
Untuk membantu developer mengaktifkan dan menonaktifkan overlay Grid dengan mudah, kami memutuskan untuk menambahkan badge kecil di samping container Grid di DOM Tree. Badge ini juga bisa membantu developer mengidentifikasi container Grid dalam struktur DOM mereka.
Perubahan pada Hierarki DOM
Karena badge Grid bukan satu-satunya badge yang ingin kami tampilkan di Pohon DOM, kami ingin mempermudah penambahan badge. ElementsTreeElement, class yang bertanggung jawab untuk membuat dan mengelola setiap elemen Hierarki DOM di DevTools, telah diupdate dengan beberapa metode publik baru untuk mengonfigurasi badge. Jika ada beberapa badge untuk satu elemen, badge akan diurutkan berdasarkan kategori badge, lalu namanya diurutkan menurut abjad jika berada dalam kategori yang sama. Kategori yang tersedia mencakup Security, Layout, dll., dan Grid termasuk dalam kategori Layout.
Selain itu, kami memiliki dukungan aksesibilitas bawaan sejak awal. Setiap badge interaktif diperlukan untuk memberikan aria-label default dan aktif, sementara badge hanya baca menggunakan nama badge sebagai aria-label.
Bagaimana kami mendapatkan pembaruan gaya real-time?
Banyak perubahan DOM ditampilkan di Hierarki DOM DevTools secara real time. Misalnya, node yang baru ditambahkan muncul seketika di DOM Tree, dan nama class yang dihapus juga menghilang seketika. Kami ingin status badge Petak juga mencerminkan informasi terbaru yang sama. Akan tetapi, ini terbukti sulit diimplementasikan, karena tidak ada cara bagi DevTools untuk mendapatkan notifikasi saat elemen yang ditampilkan di Pohon DOM mendapatkan pembaruan gaya yang telah dihitung. Satu-satunya cara yang ada untuk mengetahui kapan suatu elemen menjadi atau berhenti menjadi container Grid adalah dengan terus mengkueri browser untuk setiap informasi gaya terbaru setiap elemen. Biaya ini melarang mahal.
Untuk memudahkan frontend mengetahui kapan gaya suatu elemen diperbarui, kami menambahkan metode CDP baru untuk polling pembaruan gaya. Untuk mendapatkan pembaruan gaya simpul DOM, kita mulai dengan memberi tahu browser tentang deklarasi CSS yang ingin dilacak. Dalam kasus badge Grid, kita akan meminta browser untuk melacak:
{
"display": "grid",
"display": "inline-grid",
}
Kemudian, kita akan mengirimkan permintaan polling, dan saat ada update gaya yang terlacak untuk node DOM di panel Elemen, browser akan mengirimkan daftar node yang diperbarui ke DevTools dan menyelesaikan permintaan polling yang ada. Setiap kali DevTools ingin diberi tahu untuk pembaruan gaya lagi, DevTools dapat mengirimkan permintaan polling ini, bukan terus-menerus mengumpulkan backend dari setiap node. DevTools juga dapat mengubah deklarasi CSS yang sedang dilacak dengan mengirimkan daftar baru ke browser.
Panel tata letak
Meskipun badge Pohon DOM membantu visibilitas Petak CSS, terkadang kita ingin melihat daftar semua Petak CSS di halaman tertentu, dan mengaktifkan serta menonaktifkan overlay persisten dengan mudah untuk melakukan debug tata letaknya. Oleh karena itu, kami memutuskan untuk membuat panel sidebar khusus hanya untuk alat tata letak. Ini memberi kita ruang khusus untuk mengumpulkan semua container Grid, dan untuk mengonfigurasi semua opsi untuk overlay Grid. Panel Tata Letak ini juga memungkinkan kita menempatkan alat yang penuh tata letak di masa mendatang (misalnya Flexbox, Kueri container) di sini.
Menemukan elemen menurut gaya terkomputasi
Untuk menampilkan daftar penampung Petak CSS di panel Tata Letak, kita perlu menemukan node DOM dengan gaya terkomputasi. Ternyata juga tidak mudah, karena tidak semua node DOM diketahui DevTools saat DevTools terbuka. Sebagai gantinya, DevTools hanya mengetahui subset node kecil, biasanya di tingkat teratas hierarki DOM, hanya untuk memulai Pohon DOM Devtools. Untuk alasan performa, node lain hanya akan diambil setelah diminta. Artinya, kita memerlukan perintah CDP baru untuk mengumpulkan semua node di halaman dan memfilternya berdasarkan gaya terkomputasi:
# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
parameters
# Node ID pointing to the root of a subtree.
NodeId nodeId
# The style to filter nodes by (includes nodes if any of properties matches).
array of CSSComputedStyleProperty computedStyles
# Whether or not iframes and shadow roots in the same target should be traversed when returning the
# results (default is false).
optional boolean pierce
returns
# Resulting nodes.
array of NodeId nodeIds
Hal ini memungkinkan frontend DevTools untuk mendapatkan daftar container Grid CSS di halaman, yang mungkin menembus iframe dan shadow root, lalu merendernya di panel Layout.
Kesimpulan
Alat CSS Grid adalah salah satu project peralatan desain DevTools pertama yang mendukung fitur Web Platform. Rilis ini meluncurkan banyak alat dasar di DevTools, misalnya overlay persisten, badge Pohon DOM, dan panel Layout, serta membuka jalan bagi alat tata letak mendatang di Chrome DevTools seperti kueri Flexbox dan Container. Ini juga meletakkan fondasi untuk editor Grid dan Flexbox, yang memungkinkan developer mengubah penyelarasan Grid dan Flexbox dengan cara yang interaktif. Kita akan membahasnya pada masa mendatang.
Mendownload saluran pratinjau
Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, menguji API platform web mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.
Menghubungi tim Chrome DevTools
Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait dengan DevTools.
- Kirim saran atau masukan kepada kami melalui crbug.com.
- Laporkan masalah DevTools menggunakan Opsi lainnya
> Bantuan > Laporkan masalah DevTools di DevTools. - Tweet di @ChromeDevTools.
- Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.