MDN menjelaskan bagaimana memakai CSS, sedangkan spesifikasi menetapkan mengapa CSS berperilaku seperti itu. Spesifikasi adalah dokumen sumber kebenaran yang ditulis CSS Working Group — draf kerjanya terbuka di drafts.csswg.org dan bisa dibaca siapa saja. Kita tidak perlu membaca spesifikasi dari halaman pertama; keahlian yang dibutuhkan adalah membuka bagian yang tepat saat dokumentasi biasa tidak menjawab pertanyaan kita. Chapter ini memperkenalkan struktur spesifikasi dan cara menemukan definisi resmi sebuah properti.
Anatomi Spesifikasi CSS #
CSS dibagi menjadi modul: satu modul menangani satu area, misalnya CSS Box Model untuk margin dan padding, atau CSS Flexible Box Layout untuk flexbox. Daftar lengkap semua modul beserta statusnya terkumpul di halaman Style W3C , sehingga menjadi titik awal yang baik saat kita ingin memetakan suatu fitur ke modulnya. Setiap modul berisi kombinasi teks normative (mengikat, ditandai kata must) dan bagian informative (penjelasan yang tidak mengikat). Teks normative menjadi acuan bila implementasi browser tampak bertentangan dengan intuisi kita, karena perdebatan tentang perilaku selalu kembali ke kalimat-kalimat di dokumen tersebut.
Di dalam modul, bagian yang paling sering kita butuhkan adalah Property definitions — tabel yang mendefinisikan setiap properti secara resmi. Berikut kutipan bentuk tabel itu untuk margin-top pada CSS Box Model:
Name: margin-top
Value: <length-percentage> | auto
Initial: 0
Applies to: all elements
Inherited: no
Computed value: the percentage as specified or absolute length;
auto behaves as 0 on computed value
Animation type: by computed value type- Name dan Value: nama properti serta tata bahasa nilai yang sah, sama formatnya dengan Formal syntax di MDN.
- Initial: nilai bawaan sebelum kita menimpanya; berguna saat mendiagnosis mengapa elemen tampak “tanpa gaya”.
- Inherited: menyatakan apakah properti diturunkan ke elemen anak — sumber kebenaran untuk topik inheritance.
- Computed value: aturan bagaimana nilai dihitung, misalnya persentase dikonversi menjadi panjang mutlak.
Kapan Perlu Membuka Spesifikasi #
MDN menutupi kebutuhan harian, tetapi ada situasi ketika hanya spesifikasi yang memberi jawaban tuntas:
| Pertanyaan | Sumber yang tepat |
|---|---|
“Apa nilai awal gap pada grid?” | Halaman properti MDN |
“Interaksi z-index dengan stacking context berjalan persis bagaimana?” | Spesifikasi positioning atau stacking |
| “Apa definisi normatif kata must dan may dalam modul ini?” | Bagian Conformance di spesifikasi |
| “Fitur ini termasuk modul apa?” | Daftar modul W3C |
Bila kita hanya butuh status kesiapan fitur, bukan isi definisinya, lanjutkan ke Chapter Browser Compatibility yang membahas caniuse dan Baseline. Demo pada chapter ini menampilkan kartu yang meniru tabel Property definitions spesifikasi — bandingkan dengan tabel sungguhan di drafts.csswg.org/css-box agar pola pembacaannya menempel.
Hasil di Browser:
Kartu spesifikasi menampilkan tabel definisi properti dengan
label baris berwarna teal (rgb(15, 118, 110)) dan nilai berfont
monospace; header kartu berlatar rgb(30, 41, 59).