Kode CSS yang baik lahir dua kali: pertama saat ditulis, kedua saat diperiksa. Tools pemeriksaan membuat proses kedua itu cepat dan konsisten. Chapter terakhir ini mengumpulkan tools yang menemani pekerjaan CSS sehari-hari, dari inspeksi di browser sampai peta dukungan fitur, lalu menutup course ini dengan satu langkah praktis.
Tools Utama dan Kegunaannya #
| Tool | URL | Paling baik untuk |
|---|---|---|
| Chrome DevTools | developer.chrome.com/docs/devtools | Inspeksi elemen, computed styles, dan simulasi ukuran layar |
| Firefox Developer Tools | developer.mozilla.org/en-US/docs/Tools | Dokumentasi tools Firefox, termasuk inspector flexbox dan grid |
| W3C CSS Validator | jigsaw.w3.org/css-validator | Memeriksa kesalahan sintaks CSS pada berkas atau URL |
| Stylelint | stylelint.io | Linter untuk konsistensi aturan dan penangkapan kesalahan dini |
| caniuse | caniuse.com | Tabel dukungan browser per fitur CSS |
| Baseline | web.dev/baseline | Status kesiapan fitur web untuk dipakai di produksi |
| Web Features Explorer | web-platform-dx.github.io/web-features-explorer | Menjelajahi daftar fitur beserta status Baseline-nya |
| PostCSS | postcss.org | Transformasi CSS dengan plugin, untuk kebutuhan lanjutan |
Untuk pekerjaan harian, DevTools dan caniuse adalah dua tool yang paling sering terbuka. Stylelint dan PostCSS baru terasa manfaatnya ketika proyekmu mulai berisi banyak berkas CSS dan melibatkan lebih dari satu penulis.
Kebiasaan Harian dengan DevTools #
DevTools memberi nilai paling banyak jika dibuka dengan tujuan yang jelas. Empat kebiasaan berikut mencakup sebagian besar pekerjaan CSS:
- Klik kanan elemen lalu pilih Inspect untuk melihat aturan yang berlaku dan aturan mana yang kalah dalam cascade.
- Baca panel Computed untuk melihat nilai akhir tiap property setelah cascade dan inheritance selesai.
- Aktifkan overlay grid atau flexbox pada elemen induk untuk melihat garis track dan sumbu secara visual.
- Gunakan device toolbar untuk menguji breakpoint tanpa mengubah ukuran jendela secara manual.
Adapun Stylelint bisa dimulai dengan ringan: tambahkan dependensinya ke proyek, buat berkas konfigurasi sederhana, lalu jalankan melalui skrip pada package.json. Panduan Getting Started di situs resmi Stylelint memandu ketiga langkah itu untuk proyek baru.
Alur Kerja Dukungan Browser #
Sebelum memakai fitur CSS baru pada proyek nyata, jalankan pemeriksaan tiga langkah ini:
- Cari fiturnya di caniuse atau Web Features Explorer, lalu catat status Baseline-nya.
- Bila fitur berstatus Baseline baru tersedia (newly available), siapkan nilai cadangan yang sederhana sebelum deklarasi fitur baru.
- Uji hasilnya di DevTools dengan simulasi ukuran layar terkecil yang menjadi target proyekmu.
/* Nilai cadangan lalu nilai modern */
.panel-harga {
width: 320px; /* cadangan */
width: clamp(280px, 60%, 420px); /* fluid */
}Semua browser memakai nilai terakhir yang mereka pahami, sehingga deklarasi cadangan selalu ditulis sebelum nilai modern.
Demo berikut menampilkan panel yang sama di dalam dua wadah berbeda lebar:
Ringkasan #
Terima kasih sudah menempuh seluruh perjalanan ini sampai chapter terakhir — kamu kini memegang fondasi CSS yang utuh, dari sintaks dan cascade hingga flexbox, grid, responsive design, dan tools pemeriksaannya. Pertahankan kebiasaan membaca referensi resmi, periksa dukungan browser sebelum memakai fitur baru, dan jangan ragu kembali ke chapter mana pun saat butuh menyegarkan ingatan. Langkah terbaik berikutnya sederhana: mulailah membangun proyek nyata milikmu sendiri, karena setiap halaman yang kamu kerjakan akan menguatkan semua materi di course ini.