Pemeriksa Aturan CSS Render Nyata yang MenangGunakan engine browser untuk memverifikasi aturan CSS yang menang

Mengapa perlu benar-benar merender, bukan sekadar menghitung?

Sebagian besar kalkulator spesifisitas CSS di internet hanya memasukkan selektor Anda ke dalam rumus dan mengeluarkan sebuah skor — misalnya, #main p mendapat skor (1,0,1), sedangkan .card.active mendapat skor (0,2,0). Namun, apa yang sebenarnya diputuskan oleh browser sungguhan saat beberapa aturan saling bertentangan juga bergantung pada pewarisan (inheritance), urutan cascade, !important, dan bagaimana properti yang sama ditulis di aturan-aturan yang berbeda — semua hal ini diabaikan oleh kalkulator teoretis. Alat ini menggunakan pendekatan yang berbeda: alat ini merender HTML dan CSS yang Anda tempel di dalam iframe tersembunyi sehingga browser benar-benar menerapkan gaya tersebut, lalu membaca hasil sesungguhnya dengan getComputedStyle(). Apa yang Anda lihat adalah keputusan asli dari browser — bukan angka yang dihitung di atas kertas.

Bagaimana skor (a, b, c) sebenarnya dibandingkan — contoh yang dijabarkan

Spesifisitas CSS dituliskan sebagai tiga angka (a, b, c): a menghitung jumlah selektor ID, b menghitung jumlah selektor class/atribut/pseudo-class, c menghitung jumlah selektor tipe/pseudo-elemen. Perbandingannya bekerja seperti membandingkan digit angka — pihak yang memiliki nilai 'a' lebih tinggi langsung menang, dan 'b' baru dibandingkan jika 'a' seri. Contohnya, #main p mendapat skor (1,0,1) sementara .card .title.active mendapat skor (0,3,0) — #main p tetap menang karena 1 > 0 pada 'a', meskipun selektor lain menumpuk tiga class. Jika dua aturan memiliki spesifisitas yang benar-benar sama, browser akan menerapkan aturan yang didefinisikan lebih belakangan di dalam CSS — inilah sebabnya urutan penulisan kode juga penting. !important adalah satu-satunya hal yang dapat mengalahkan spesifisitas sepenuhnya: aturan dengan spesifisitas lebih rendah tetapi memiliki !important akan menang melawan aturan berspesifisitas lebih tinggi yang tidak memilikinya (kecuali aturan yang lain juga memiliki !important, dalam hal ini spesifisitas kembali menjadi penentu).

Kapan Anda sebenarnya perlu menggunakan alat ini?

Pemicu klasiknya adalah: 'saya sudah menulis aturan CSS ini, tapi tampilannya tidak berubah sama sekali' — yang biasanya berarti ada aturan lain dengan spesifisitas lebih tinggi (atau !important) yang menimpanya. Tempel HTML+CSS yang bertentangan, masukkan selektor elemen yang sedang Anda telusuri masalahnya, dan alat ini akan menampilkan semua aturan yang cocok beserta skor spesifisitasnya, membiarkan mesin browser sungguhan memberi tahu Anda aturan mana yang benar-benar menang — tidak perlu lagi menebak-nebak lapisan cascade mana yang unggul.

Alat ini melakukan rendering di dalam iframe terisolasi tanpa memuat font, gambar, atau menjalankan JavaScript eksternal, dan tidak mendukung Shadow DOM maupun gaya CSS-in-JS yang disuntikkan secara dinamis — tempelkan potongan HTML/CSS statis agar hasilnya akurat.