Referensi fitur CSS

Kayce Basques
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Temukan alur kerja baru dalam referensi komprehensif fitur Chrome DevTools yang terkait dengan melihat dan mengubah CSS.

Lihat Melihat dan mengubah CSS untuk mempelajari dasar-dasarnya.

Pilih elemen

Panel Elemen di DevTools memungkinkan Anda melihat atau mengubah CSS satu elemen satu per satu.

Contoh elemen yang dipilih.

Pada screenshot, elemen h1 yang ditandai dengan warna biru di Hierarki DOM adalah elemen yang dipilih. Di sebelah kanan, gaya elemen ditampilkan di tab Gaya. Di sebelah kiri, elemen ditandai di area pandang, tetapi hanya karena mouse diarahkan ke elemen tersebut di Hierarki DOM.

Lihat Melihat CSS elemen untuk tutorial.

Ada banyak cara untuk memilih elemen:

  • Di area pandang, klik kanan elemen, lalu pilih Periksa.
  • Di DevTools, klik Select an element Pilih elemen atau tekan Command+Shift+C (Mac) atau Control+Shift+C (Windows, Linux), lalu klik elemen di tampilan area pandang.
  • Di DevTools, klik elemen di DOM Tree.
  • Di DevTools, jalankan kueri seperti document.querySelector('p') di Console, klik kanan hasil, lalu pilih Reveal in Elements panel.

Melihat CSS

Gunakan tab Elemen > Gaya dan Dihitung untuk melihat aturan CSS dan mendiagnosis masalah CSS.

Tab Gaya menampilkan link di berbagai tempat ke berbagai tempat lainnya, termasuk tetapi tidak terbatas pada:

  • Di samping aturan CSS, untuk lembar gaya dan sumber CSS. Link tersebut akan membuka panel Sumber. Jika sheet gaya diminifikasi, lihat Membuat file yang diminifikasi dapat dibaca.
  • Di bagian Diwarisi dari ..., ke elemen induk.
  • Dalam panggilan var(), ke deklarasi properti kustom.
  • Di properti singkatan animation, ke @keyframes.
  • Link Pelajari lebih lanjut di tooltip dokumentasi.
  • Dan masih banyak lagi.

Berikut beberapa di antaranya yang ditandai:

Berbagai link ditandai.

Gaya link dapat berbeda-beda. Jika Anda tidak yakin apakah sesuatu adalah link, coba klik untuk mengetahuinya.

Melihat tooltip dengan dokumentasi CSS, kekhususan, dan nilai properti kustom

Elemen > Gaya menampilkan tooltip dengan informasi berguna saat Anda mengarahkan kursor ke elemen tertentu.

Melihat dokumentasi CSS

Untuk melihat tooltip dengan deskripsi CSS singkat, arahkan kursor ke nama properti di tab Styles.

Tooltip dengan dokumentasi tentang properti CSS.

Klik Pelajari lebih lanjut untuk membuka Referensi CSS MDN tentang properti ini.

Untuk menonaktifkan tooltip, centang Kotak centang. Jangan tampilkan.

Untuk mengaktifkannya kembali, centang Setelan. Setelan > Preferensi > Elemen > Kotak centang. Tampilkan tooltip dokumentasi CSS.

Spesifisitas pemilih tampilan

Arahkan kursor ke pemilih untuk melihat tooltip dengan bobot spesifitas.

Tooltip dengan bobot kekhususan selektor yang cocok.

Melihat nilai properti kustom

Arahkan kursor ke --custom-property untuk melihat nilainya dalam tooltip.

Nilai properti kustom dalam tooltip.

Melihat CSS yang tidak valid, diganti, tidak aktif, dan lainnya

Tab Gaya mengenali berbagai jenis masalah CSS dan menandainya dengan cara yang berbeda.

Lihat Memahami CSS di tab Gaya.

Hanya melihat CSS yang benar-benar diterapkan ke elemen

Tab Gaya menampilkan semua aturan yang berlaku untuk elemen, termasuk deklarasi yang telah diganti. Jika Anda tidak tertarik dengan deklarasi yang diganti, gunakan tab Computed untuk hanya melihat CSS yang benar-benar diterapkan ke elemen.

  1. Pilih elemen.
  2. Buka tab Computed di panel Elements.

Tab Computed.

Centang kotak Tampilkan Semua untuk melihat semua properti.

Lihat Memahami CSS di tab Computed.

Melihat properti CSS dalam urutan abjad

Gunakan tab Dihitung. Lihat Hanya melihat CSS yang benar-benar diterapkan ke elemen.

Melihat properti CSS yang diwarisi

Centang kotak Tampilkan Semua di tab Dihitung. Lihat Hanya melihat CSS yang benar-benar diterapkan ke elemen.

Atau, scroll tab Gaya dan temukan bagian bernama Inherited from <element_name>.

Lihat bagian Diwariskan dari... di tab Gaya.

Melihat aturan at CSS

Aturan at adalah pernyataan CSS yang memungkinkan Anda mengontrol perilaku CSS. Elemen > Gaya menampilkan aturan at berikut di bagian khusus:

Melihat aturan at @property

@property CSS at-rule memungkinkan Anda menentukan properti kustom CSS secara eksplisit dan mendaftarkannya di stylesheet tanpa menjalankan JavaScript apa pun.

Arahkan kursor ke nama properti tersebut di tab Gaya, untuk melihat tooltip dengan nilai, deskripsi, dan link ke pendaftaran properti di bagian @property yang dapat diciutkan di bagian bawah tab Gaya.

Untuk mengedit aturan @property, klik dua kali nama atau nilainya.

Melihat aturan at @supports

Tab Gaya menampilkan aturan at @supports CSS jika diterapkan ke elemen. Misalnya, periksa elemen berikut:

Lihat aturan @supports.

Jika browser Anda mendukung fungsi lab(), elemen akan berwarna hijau, jika tidak, elemen akan berwarna ungu.

Melihat aturan at @scope

Tab Gaya menampilkan aturan at @scope CSS jika diterapkan ke elemen.

Aturan at @scope baru adalah bagian dari spesifikasi CSS Cascading and Inheritance Level 6. Aturan ini memungkinkan Anda menentukan cakupan gaya CSS, dengan kata lain, menerapkan gaya secara eksplisit ke elemen tertentu.

Lihat aturan @scope dalam pratinjau berikut:

  1. Periksa teks pada kartu di pratinjau.
  2. Di tab Gaya, temukan aturan @scope.

Aturan @scope.

Dalam contoh ini, aturan @scope mengganti deklarasi background-color CSS global untuk semua elemen <p> di dalam elemen dengan class card.

Untuk mengedit aturan @scope, klik dua kali.

Melihat aturan at @font-palette-values

Aturan at CSS @font-palette-values memungkinkan Anda menyesuaikan nilai default properti font-palette. Elemen > Gaya menampilkan at-rule ini di bagian khusus.

Lihat bagian @font-palette-values di pratinjau berikutnya:

  1. Periksa baris teks kedua di pratinjau.
  2. Di Gaya, temukan bagian @font-palette-values.

Aturan @font-palette-values.

Dalam contoh ini, nilai palet font --New menggantikan nilai default font berwarna.

Untuk mengedit nilai kustom, klik dua kali nilai tersebut.

Melihat aturan at @position-try

Aturan CSS @position-try beserta properti position-try-options memungkinkan Anda menentukan posisi anchor alternatif untuk elemen. Untuk mempelajari lebih lanjut, lihat Memperkenalkan API pemosisian anchor CSS.

Elemen > Gaya me-resolve dan menautkan hal berikut:

  • Nilai properti position-try-options ke bagian @position-try --name khusus.
  • Nilai properti position-anchor dan argumen anchor() ke elemen yang sesuai dengan atribut popovertarget.

Periksa nilai position-try-options dan bagian @position-try di pratinjau berikutnya:

Demo menggunakan anchor dengan popover
  1. Di pratinjau, buka submenu, yaitu, klik AKUN ANDA, lalu TOKO.
  2. Periksa elemen dengan id="submenu" di pratinjau.
  3. Di Gaya, temukan properti position-try-options dan klik nilai --bottom-nya. Tab Gaya akan mengarahkan Anda ke bagian @position-try yang sesuai.
  4. Klik link nilai position-anchor atau argumen anchor() yang sama. Panel Elemen memilih elemen dengan atribut popovertarget yang sesuai dan tab Gaya menampilkan CSS elemen.

Properti position-try-options, bagian @position-try, dan elemen dengan atribut target popover.

Untuk mengedit nilai, klik dua kali.

Melihat model kotak elemen

Untuk melihat model kotak elemen, buka tab Gaya dan klik tombol Menampilkan sidebar. Tampilkan sidebar di panel tindakan.

Diagram Model Kotak.

Untuk mengubah nilai, klik dua kali.

Menelusuri dan memfilter CSS elemen

Gunakan kotak Filter di tab Gaya dan Dihitung untuk menelusuri properti atau nilai CSS tertentu.

Memfilter tab Gaya.

Untuk juga menelusuri properti yang diwarisi di tab Dihitung, centang kotak Tampilkan Semua.

Memfilter properti yang diwarisi di tab Computed.

Untuk membuka tab Computed, kelompokkan properti yang difilter dalam kategori yang dapat diciutkan dengan mencentang Group.

Mengelompokkan properti yang difilter.

Mengemulasi halaman terfokus

Jika Anda mengalihkan fokus dari halaman ke DevTools, beberapa elemen overlay akan otomatis disembunyikan jika dipicu oleh fokus. Misalnya, daftar drop-down, menu, atau pemilih tanggal. Opsi Emulate a focused page memungkinkan Anda men-debug elemen tersebut seolah-olah elemen tersebut sedang difokuskan.

Coba emulasi halaman terfokus di halaman demo ini:

  1. Memfokuskan elemen input. Elemen lain akan muncul di bawahnya.
  2. Buka DevTools. Jendela DevTools kini menjadi fokus, bukan halaman, sehingga elemen akan menghilang lagi.
  3. Di Elemen > Gaya, klik :hov, centang Emulate a focused page, dan pastikan elemen input dipilih. Sekarang Anda dapat memeriksa elemen di bawahnya.

Sebelum dan sesudah mengaktifkan opsi &#39;Emulasi halaman yang difokuskan&#39;.

Anda juga dapat menemukan opsi yang sama di panel Rendering.

Untuk menemukan lebih banyak cara membekukan elemen, lihat Membekukan layar dan memeriksa elemen yang menghilang.

Mengaktifkan/menonaktifkan pseudo-class

Untuk mengalihkan pseudo-class:

  1. Pilih elemen.
  2. Di panel Elemen, buka tab Gaya.
  3. Klik :hov.
  4. Centang pseudo-class yang ingin diaktifkan.

Mengalihkan pseudostate pengarahan kursor pada elemen.

Dalam contoh ini, Anda dapat melihat bahwa DevTools menerapkan deklarasi background-color ke elemen, meskipun elemen tersebut tidak benar-benar diarahkan kursor.

Tab Gaya menampilkan pseudo-class berikut untuk semua elemen:

Selain itu, beberapa elemen mungkin memiliki pseudo-class-nya sendiri. Saat Anda memilih elemen tersebut, tab Gaya akan menampilkan bagian Paksa status elemen tertentu yang dapat Anda luaskan dan mengaktifkan pseudo-class khusus untuk elemen tersebut.

Bagian `Paksa status elemen tertentu` dari elemen &#39;textarea&#39;.

Lihat Menambahkan pseudostate ke class untuk tutorial interaktif.

Melihat pseudo-elemen sorotan yang diwarisi

Elemen semu memungkinkan Anda menata gaya bagian elemen tertentu. Pseudo-elemen sorotan adalah bagian dokumen dengan status "dipilih" dan diberi gaya sebagai "disorot" untuk menunjukkan status ini kepada pengguna. Misalnya, pseudo-elemen tersebut adalah ::selection, ::spelling-error, ::grammar-error, dan ::highlight.

Seperti yang disebutkan dalam spesifikasi, jika beberapa gaya bertentangan, cascade akan menentukan gaya yang menang.

Untuk lebih memahami pewarisan dan prioritas aturan, Anda dapat melihat pseudo-elemen sorotan yang diwarisi:

  1. Periksa teks di bawah.

    Saya mewarisi gaya elemen pseudo sorotan induk. Pilih saya!

  2. Pilih bagian teks di atas.

  3. Di tab Gaya, scroll ke bawah untuk menemukan bagian Inherited from ::selection pseudo of....

Lihat bagian Diwariskan pada tab Gaya.

Melihat lapisan kaskade

Lapisan kaskade memungkinkan kontrol yang lebih eksplisit terhadap file CSS Anda untuk mencegah konflik khusus gaya. Hal ini berguna untuk codebase besar, sistem desain, dan saat mengelola gaya pihak ketiga dalam aplikasi.

Untuk melihat lapisan kaskade, periksa elemen berikutnya dan buka Elemen > Gaya.

Di tab Gaya, lihat 3 lapisan cascade dan gayanya: page, component, dan base.

Lapisan cascade.

Untuk melihat urutan lapisan, klik nama lapisan atau tombol Mengaktifkan/menonaktifkan lapisan. Toggle CSS layers view.

Lapisan page memiliki spesifitas tertinggi, sehingga latar belakang elemen berwarna hijau.

Untuk melihat halaman dalam mode cetak:

  1. Buka Menu Perintah.
  2. Mulai ketik Rendering dan pilih Show Rendering.
  3. Untuk drop-down Emulate CSS Media, pilih print.

Melihat CSS yang digunakan dan tidak digunakan dengan tab Cakupan

Tab Cakupan menunjukkan CSS yang sebenarnya digunakan halaman.

  1. Tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS) saat DevTools difokuskan untuk membuka Menu Perintah.

  2. Mulai mengetik coverage.

    Membuka tab Cakupan dari Menu Perintah.

  3. Pilih Tampilkan Cakupan. Tab Cakupan akan muncul.