Tutorial CSS / Memeriksa CSS dengan DevTools: Styles dan Computed

Alat pengembang browser memungkinkan Anda memeriksa deklarasi CSS mana yang cocok dengan sebuah elemen dan nilai mana yang akhirnya digunakan. Styles menjelaskan aturan yang cocok dan yang diganti, sementara Computed membantu Anda memeriksa nilai properti yang dihasilkan; editan di DevTools biasanya bersifat sementara.

Siapkan contoh dan hasil yang diharapkan

Simpan seluruh kode di bawah ini sebagai index.html dalam format UTF-8 dan buka di browser Anda. Dalam contoh ini, paragraf jam operasional ditampilkan dengan warna hijau dan paragraf umum pertama ditampilkan dengan warna abu-abu. Pemberitahuan disertai padding 16px dan latar belakang terang untuk memungkinkan perbandingan hasil berdasarkan atribut.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1 { color: #087f5b; }
    p { color: #666; }
    .notice {
      color: #087f5b;
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>A place to grow plants and take a break.</p>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>
</html>

Karena kami menempatkan CSS di elemen style bersama dengan HTML body, sumber untuk latihan ini adalah satu file. Jika Anda sudah berlatih dengan CSS eksternal, Anda dapat menaruh aturan yang sama di style.css, tetapi nama file dan nomor baris yang ditampilkan di alat pengembang akan berbeda. Setelah memastikan teks yang diharapkan muncul di layar, buka alat pengembang.

Pilih elemen yang benar di Elements

1. Klik kanan kalimat “We open at 9 a.m. every day.” (kami buka pukul 9 pagi setiap hari) di halaman dan pilih Inspect. Di Chrome atau Edge di Windows, Anda juga dapat membuka DevTools dengan F12 atau Ctrl+Shift+I.
2. Di tab Elements, periksa bahwa baris yang dipilih adalah <p class="notice">. Jika elemen lain dipilih, tekan alat selektoran elemen dan pilih kembali pemberitahuan tersebut. Lokasi alat dan bahasa menu dapat bervariasi tergantung pada browser/versi.
3. Buka Styles di samping atau di bawah elemen yang dipilih. Perhatikan bahwa aturan .notice dan p terlihat. Pada jendela sempit, panel dapat ditempatkan di bagian bawah atau beberapa tab dapat masuk ke menu Overview.

Apa yang ditampilkan Elements adalah Document Object Model (DOM), yang merupakan struktur dokumen yang diinterpretasikan oleh browser. Struktur ini tidak selalu terlihat sama dengan sumber halaman. Ketika browser memperbaiki HTML yang salah atau JavaScript mengganti sebuah elemen, selektoran aktual harus ditentukan berdasarkan struktur yang ditampilkan di Elements.

Diagram ini merangkum hubungan antara aturan pencocokan di Styles dan nilai akhir di Computed. Ini adalah ilustrasi penjelasan, bukan tangkapan layar dari tes baru. Di DevTools, buka Computed dan filter untuk color untuk memeriksa nilai yang sama. Panel mungkin muncul di tempat yang berbeda tergantung tata letak dan versi browser.

Bandingkan Styles dan Computed

Styles menampilkan aturan yang cocok dengan elemen yang dipilih, gaya inline yang ditulis langsung pada elemen, dan aturan terkait pewarisan. Baik p { color: #666; } maupun .notice { color: #087f5b; } cocok dengan notifikasi tersebut, tetapi warna teks akhirnya adalah hijau. Ini karena selektor kelas memiliki prioritas lebih tinggi daripada selektor elemen dalam kondisi asal/kepentingan/lapisan yang sama pada contoh ini.

Jika Anda melihat coretan pada deklarasi yang berwarna abu-abu, pertama periksa kemungkinan bahwa itu bukan karena “sintaksnya salah” tetapi lebih karena “deklarasi lain menang”. Makna dari coretan dan tanda peringatan dapat bervariasi tergantung lokasi dan situasinya, jadi arahkan kursor Anda ke deklarasi dan baca penjelasannya. padding: 16px adalah properti terpisah dari color, jadi meskipun ada konflik warna, mereka tetap bisa diterapkan bersama-sama.

Computed digunakan untuk memeriksa gaya akhir yang dihitung untuk elemen yang dipilih. Buka tab dan masukkan color pada filter untuk menemukan warna teks. #087f5b mungkin ditampilkan sebagai rgb(8, 127, 91), dan mereka adalah warna yang sama. Perluas properti untuk melacak aturan dan sumber terkait. Beberapa properti mungkin tersembunyi dalam daftar default, jadi periksa juga opsi tampilan.

Dokumentasi fitur CSS Chrome DevTools menjelaskan panel dan cara mengedit deklarasi. Untuk memahami mengapa deklarasi bertentangan, bandingkan contoh bersyarat dalam Pewarisan, Spesifisitas, dan Kaskade CSS.

Alihkan deklarasi dan edit nilai

1. Dalam Styles, cari deklarasi .notice dari color: #087f5b. Menghapus centang kotak di sebelah deklarasi hanya akan sementara mengecualikan deklarasi ini. Akibatnya, pastikan bahwa warna pemberitahuan berubah menjadi abu-abu untuk aturan p.
2. Hidupkan kembali kotak centang untuk mengembalikannya ke warna hijau aslinya. Kemudian klik nilai warna dan ubah menjadi #1d4ed8 dan tekan Enter. Verifikasi bahwa hanya teks dalam pemberitahuan yang berubah menjadi biru dan warna latar tetap hijau muda.
3. Periksa lagi warna teks di Computed. Jika tertulis rgb(29, 78, 216), itu sesuai dengan warna biru yang telah Anda ubah. Latar belakang adalah properti terpisah yang disebut background-color.
4. Latihan ini tidak mengaktifkan penyimpanan ke berkas sumber atau Local Overrides, jadi ketika Anda menyegarkan, warna yang Anda ubah di Developer Tools akan hilang dan Anda akan kembali ke warna hijau asli. Setelah memastikan bahwa warna asli tidak berubah, lanjutkan ke langkah berikutnya.

Deklarasi yang telah dihapus dapat dikembalikan dengan mengaktifkan kembali kotak centang, dan nilai yang salah diubah dapat dikembalikan dengan memasukkan kembali nilai yang ada. Jika Anda ingin menghapus semua perubahan lainnya sekaligus, segarkan tanpa mengaktifkan fungsi simpan, seperti pada latihan ini. Jika Anda telah mengaktifkan pengaitan workspace atau Local Overrides, cara penyimpanan dan pemeliharaannya dapat berubah, jadi jangan menganggap bahwa itu akan dipulihkan dengan penyegaran.

Simpan perubahan yang telah dikonfirmasi ke file sumber

Klik nama file sumber dan nomor baris dari aturan di Styles untuk menemukannya. Karena contoh ini menyematkan CSS dalam HTML, edit aturan yang sesuai di index.html asli. Untuk stylesheet eksternal, buka file yang disebutkan di sana, seperti style.css. Periksa jalur sebelum mengedit salinan dengan nama yang sama. Untuk detail lebih lanjut, lihat Terapkan CSS dengan Style Inline, Internal, dan Eksternal.

1. Buka index.html yang sebenarnya Anda buka di editor teks. Jika Anda menyalin file ke beberapa folder, pastikan jalur file sesuai dengan alamat di browser.
2. Ubah nilai warna dari aturan .notice asli menjadi #1d4ed8 dan simpan.
3. Segarkan browser Anda. Sekarang, jika Anda membukanya lagi dan pemberitahuan muncul dalam warna biru, itu telah tercermin di versi aslinya.
4. Untuk kembali ke desain asli setelah menyelesaikan latihan, kembalikan warna asli ke #087f5b dan simpan/segarkan.

Bedakan tiga kegagalan CSS yang umum

Untuk setiap situasi, ubah yang asli satu per satu, simpan/perbarui, periksa, lalu kembalikan. Pada situasi pertama, aturan .notcie yang tidak cocok dengan elemen yang dipilih mungkin tidak muncul dalam daftar aturan yang umum diterapkan di Styles. Pada situasi ketiga, cara peringatan muncul bervariasi tergantung pada tempat dibuatnya dan versi browser. Dengan membagi kasus ke dalam kasus di mana tidak ada aturan, ada aturan tetapi telah ditimpa, dan deklarasi itu sendiri tidak valid, Anda dapat melihat di mana harus memperbaikinya.