Referensi fitur CSS

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

Lihat Melihat dan mengubah CSS untuk mempelajari dasarnya.

Pilih elemen

Panel Elemen DevTools memungkinkan Anda melihat atau mengubah CSS satu elemen dalam satu waktu.

Pada screenshot, elemen h1 yang disorot dengan warna biru di Hierarki DOM adalah elemen yang dipilih. Di sebelah kanan, gaya elemen ditampilkan di tab Gaya. Di sebelah kiri, elemen disorot di area tampilan, tetapi hanya karena kursor mouse mengarah ke elemen tersebut di Pohon DOM.

Lihat Melihat CSS elemen untuk melihat tutorialnya.

Ada banyak cara untuk memilih elemen:

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

Melihat CSS

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

Menavigasi dengan link

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

• Di samping aturan CSS, ke lembar gaya dan sumber CSS. Link tersebut akan membuka panel Sources. Jika lembar 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 singkat animation, ke @keyframes.
• Link Pelajari lebih lanjut di tooltip dokumentasi.
• Dan masih banyak lagi.

Berikut beberapa di antaranya yang disoroti:

Link dapat ditata secara berbeda. Jika Anda tidak yakin apakah sesuatu adalah link, coba klik untuk mengetahuinya.

Melihat tooltip dengan dokumentasi CSS, spesifisitas, 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.

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

Untuk menonaktifkan tooltip, centang Jangan tampilkan.

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

Melihat spesifisitas pemilih

Arahkan kursor ke pemilih untuk melihat tooltip dengan bobot spesifisitas-nya.

Melihat nilai properti kustom

Arahkan kursor ke --custom-property untuk melihat nilainya 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-beda.

Lihat bagian Memahami CSS di tab Gaya.

Melihat hanya 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 melihat hanya CSS yang benar-benar diterapkan ke elemen.

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

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 lihat CSS yang benar-benar diterapkan ke elemen.

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

Melihat aturan @CSS

Aturan @ adalah pernyataan CSS yang memungkinkan Anda mengontrol perilaku CSS. Elements > Styles menampilkan aturan @ berikut di bagian khusus:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

Melihat aturan @ @property

Aturan @CSS @property memungkinkan Anda menentukan properti kustom CSS secara eksplisit dan mendaftarkannya dalam lembar gaya tanpa menjalankan JavaScript apa pun.

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

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

Melihat aturan @ @supports

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

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

Melihat aturan @ @scope

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

Aturan baru @scope adalah bagian dari spesifikasi CSS Cascading and Inheritance Level 6. Aturan ini memungkinkan Anda mencakup 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.

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

Untuk mengedit aturan @scope, klik dua kali.

Melihat aturan @ @font-palette-values

Aturan @CSS @font-palette-values memungkinkan Anda menyesuaikan nilai default properti font-palette. Elements > Styles menampilkan aturan @ ini di bagian khusus.

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

1. Periksa baris kedua teks dalam pratinjau.
2. Di Styles, temukan bagian @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 @ @position-try

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

Elemen > Gaya menyelesaikan 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 dalam pratinjau berikutnya:

1. Di pratinjau, buka submenu, yaitu klik AKUN ANDA, lalu ETALASE.
2. Periksa elemen dengan id="submenu" di pratinjau.
3. Di Styles, 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 Elements memilih elemen dengan atribut popovertarget yang sesuai dan tab Styles menampilkan CSS elemen.

Untuk mengedit nilai, klik dua kali nilai tersebut.

Melihat model kotak elemen

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

Untuk mengubah nilai, klik dua kali nilai tersebut.

Menelusuri dan memfilter CSS elemen

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

Untuk menelusuri properti yang diwariskan di tab Computed, centang kotak Show All.

Untuk membuka tab Dihitung, kelompokkan properti yang difilter dalam kategori yang dapat diciutkan dengan mencentang Kelompokkan.

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 check_box Emulasi halaman terfokus memungkinkan Anda men-debug elemen tersebut seolah-olah elemen tersebut dalam fokus.

Coba emulasikan halaman terfokus di halaman demo ini:

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

Anda juga dapat menemukan opsi yang sama di panel Rendering.

Untuk menemukan cara lainnya dalam membekukan elemen, lihat Membekukan layar dan memeriksa elemen yang menghilang.

Mengganti status kelas semu

Untuk mengganti status kelas semu:

1. Pilih elemen.
2. Di panel Elemen, buka tab Gaya.
3. Klik :hov.
4. Centang class semu yang ingin Anda aktifkan.

Dalam contoh ini, Anda dapat melihat bahwa DevTools menerapkan deklarasi background-color ke elemen, meskipun elemen tersebut sebenarnya tidak di-hover.

Tab Styles menampilkan pseudo-class berikut untuk semua elemen:

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

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

Lihat Menambahkan pseudostate ke class untuk melihat tutorial interaktif.

Melihat elemen semu sorotan yang diwariskan

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

Seperti yang disebutkan dalam spesifikasi, jika ada beberapa gaya yang bertentangan, gaya yang menang ditentukan oleh susunan bertingkat.

Untuk lebih memahami pewarisan dan prioritas aturan, Anda dapat melihat elemen semu sorotan yang diwariskan:

1. Periksa teks di bawah.

   Saya mewarisi gaya elemen semu sorotan induk saya. Pilih saya!

2. Pilih sebagian teks di atas.

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

Melihat lapisan bertingkat

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

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

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

Untuk melihat urutan lapisan, klik nama lapisan atau tombol Tampilkan/sembunyikan tampilan lapisan CSS.

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

Melihat halaman dalam mode cetak

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 menjadi fokus untuk membuka Menu Perintah.

2. Mulai mengetik coverage.

   

3. Pilih Tampilkan Cakupan. Tab Cakupan akan muncul.

   

4. Klik Muat ulang. Halaman dimuat ulang dan tab Cakupan memberikan ringkasan tentang jumlah CSS (dan JavaScript) yang digunakan dari setiap file yang dimuat browser.

   

   Hijau menunjukkan CSS yang digunakan. Merah menunjukkan CSS yang tidak digunakan.

5. Klik file CSS untuk melihat perincian baris demi baris CSS yang digunakannya dalam pratinjau di atas.

   

   Pada screenshot, baris 55 hingga 57 dan 65 hingga 67 devsite-google-blue.css tidak digunakan, sedangkan baris 59 hingga 63 digunakan.

Memaksa mode pratinjau cetak

Lihat Memaksa DevTools Masuk ke Mode Pratinjau Cetak.

Menyalin CSS

Dari satu menu drop-down di tab Gaya, Anda dapat menyalin aturan, deklarasi, properti, nilai CSS yang terpisah

Selain itu, Anda dapat menyalin properti CSS dalam sintaksis JavaScript. Opsi ini berguna jika Anda menggunakan library CSS-in-JS.

Untuk menyalin CSS:

1. Pilih elemen.
2. Di tab Elements > Styles, klik kanan properti CSS.

3. Pilih salah satu opsi berikut dari menu drop-down:

   • Salin pernyataan. Menyalin properti dan nilainya dalam sintaksis CSS: css property: value;
   • Salin properti. Menyalin hanya nama property.
   • Salin nilai. Hanya menyalin value.
   • Salin aturan. Menyalin seluruh aturan CSS: css selector[, selector] { property: value; property: value; ... }
   • Salin deklarasi sebagai JS. Menyalin properti dan nilainya dalam sintaksis JavaScript: js propertyInCamelCase: 'value'
   • Salin semua deklarasi. Menyalin semua properti dan nilainya dalam aturan CSS: css property: value; property: value; ...

   • Salin semua deklarasi sebagai JS. Menyalin semua properti dan nilainya dalam sintaksis JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • Salin semua perubahan CSS. Menyalin perubahan yang Anda buat di tab Gaya di semua deklarasi.