Alat Petak CSS di DevTools

Changhao Han
Changhao Han

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:

  1. Overlay persisten khusus petak yang membantu informasi dimensi dan pengurutan
  2. Badge di Hierarki DOM yang menyoroti container Petak CSS dan mengalihkan overlay Petak
  3. Panel bilah sisi yang memungkinkan developer mempersonalisasi tampilan overlay DOM (misalnya, mengubah warna dan lebar aturan)
  4. 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:

ALT_TEXT_HERE

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:

  • kita ingin menampilkan informasi yang lebih berguna tentang {i>Grids<i}, misalnya dimensi dan celah author
  • 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:

ALT_TEXT_HERE

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 sendiri nilai yang ditulis di DevTools dan menghitungnya sesuai dengan spesifikasi CSS Grid. Hal ini akan melibatkan banyak skenario rumit, dan pada dasarnya hanya akan menjadi duplikat dari upaya Blink. Oleh karena itu, dengan bantuan dari tim Blink Style, kami mendapatkan API baru dari mesin gaya yang mengekspos “nilai beruntun”. Nilai menurun adalah nilai efektif akhir, setelah CSS beruntun, 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:

ALT_TEXT_HERE

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.

ALT_TEXT_HERE

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, mis. overlay persisten, badge DOM Tree, 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   Lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Beri komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.