DevTools unggul saat kita sudah tahu elemen mana yang bermasalah; alat validasi bekerja sebaliknya — menyisir seluruh stylesheet dan melaporkan semua kejanggalan sekaligus, sebelum ada elemen yang terlihat salah. Chapter ini membahas dua lapis pemeriksaan: W3C CSS Validator sebagai pemeriksa sintaks resmi, dan stylelint sebagai pemeriksa gaya penulisan yang dapat berjalan di setiap proyek. Keduanya melengkapi tanda-tanda lokal dari DevTools yang dibahas pada Chapter Invalid CSS , dan melanjutkan pengenalan singkat pada Chapter CSS Validation dan Formatting .

Memeriksa dengan W3C CSS Validator #

Validator W3C memeriksa sintaks terhadap spesifikasi CSS: properti yang tidak dikenal, nilai yang tidak sah, kurung yang tidak seimbang, dan tanda baca yang keliru semuanya dilaporkan dengan nomor baris. Prosedurnya:

  1. Buka jigsaw.w3.org/css-validator di browser.
  2. Pilih cara pemeriksaan: tab By URI untuk file yang sudah daring, tab By file upload untuk berkas lokal, atau tab By direct input untuk menempelkan kode.
  3. Jalankan pemeriksaan, lalu baca laporannya dari galat (error) terlebih dahulu — peringatan (warning) tentang properti yang dianggap eksperimental boleh ditelaah kemudian.
  4. Perbaiki satu per satu pada berkas sumber, lalu periksa ulang hingga bersih.

File berikut adalah stylesheet latihan yang dirancang lolos pemeriksaan — unduh, tempelkan ke validator, dan pelajari bentuknya:

css contoh-valid.css 
/* Stylesheet latihan untuk validator — disusun agar lolos pemeriksaan W3C. */
* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: system-ui, sans-serif;
  background-color: rgb(248, 250, 252);
  color: rgb(51, 65, 85);
}

.judul {
  color: rgb(15, 23, 42);
  font-size: 18px;
}

.kartu {
  width: 320px;
  padding: 16px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  border-radius: 8px;
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  background-color: rgb(2, 132, 199);
  color: rgb(255, 255, 255);
  border-radius: 9999px;
  font-size: 13px;
}

Perhatikan tiga kebiasaan pada file di atas yang membuat validator senang: setiap deklarasi diakhiri titik koma, setiap blok kurung tertutup, dan setiap properti memakai ejaan yang dikenal spesifikasi.

stylelint: Pemeriksa yang Ikut Beserta Proyek #

Validator W3C dijalankan manual; stylelint bekerja di dalam proyek dan bisa dipasang pada setiap commit. Selain kesalahan sintaks, stylelint menegakkan aturan konsistensi yang tidak bisa dinilai validator — misalnya konsistensi urutan properti, larangan warna hex yang tidak konsisten, atau larangan !important. Konfigurasi minimalnya cukup satu file:

json .stylelintrc.json 
{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-block-no-duplicate-properties": true,
    "color-no-invalid-hex": true
  }
}

Mari kita telaah pilihannya:

  1. extends: "stylelint-config-standard": mewarisi paket aturan bawaan komunitas — titik awal yang sehat tanpa menulis ratusan aturan sendiri.
  2. declaration-block-no-duplicate-properties: menandai properti yang ditulis dua kali dalam satu blok — pola yang sering menyembunyikan kebingungan, bukan niat.
  3. color-no-invalid-hex: menangkap hex yang tidak berformat benar, misalnya #ff00zz.

Batas Pemeriksa Otomatis #

Alat validasi punya batas yang perlu dipahami agar hasilnya dibaca dengan benar:

BatasPenjelasan
Sintaks terbaru tertinggalAturan CSS paling baru dapat dilaporkan sebagai galat padahal valid — validator mengejar spesifikasi dengan jeda
Valid tetapi keliru maknaSelector sah yang tidak pernah cocok, atau nilai yang sah tetapi bertentangan (misalnya margin: 0 auto pada elemen penuh) tidak dilaporkan
Tanpa konteks halamanTidak ada yang tahu apakah class tersebut benar-benar dipakai HTML — audit pemakaian tetap pekerjaan kita

Implikasinya jelas: galat validator layak diperlakukan sebagai daftar tugas, tetapi laporan “tidak ada galat” bukan jaminan stylesheet bekerja. Peringatan pada sintaks modern ditelaah lewat MDN — bila fitur tersebut tercatat Baseline, anggap peringatan itu ketinggalan alat, bukan kesalahan kode.

Hasil di Browser:

text 
Kartu tampil selebar 320px dengan padding 16px dan sudut 8px; judul
kartu berwarna rgb(15, 23, 42) berukuran 18px; badge biru rgb(2, 132,
199) tampil inline-block. Stylesheet demo dan contoh-valid.css memuat
aturan yang identik dan lolos validasi W3C tanpa galat.

Dengan stylesheet yang bersih secara sintaks, satu dimensi kualitas tersisa: memastikan tampilan yang benar di berbagai browser, bukan hanya di browser favorit kita — topik chapter penutup Section ini.

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-valid.css

Unduh berkas
css 
/* Stylesheet latihan untuk validator — disusun agar lolos pemeriksaan W3C. */
* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: system-ui, sans-serif;
  background-color: rgb(248, 250, 252);
  color: rgb(51, 65, 85);
}

.judul {
  color: rgb(15, 23, 42);
  font-size: 18px;
}

.kartu {
  width: 320px;
  padding: 16px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  border-radius: 8px;
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  background-color: rgb(2, 132, 199);
  color: rgb(255, 255, 255);
  border-radius: 9999px;
  font-size: 13px;
}