Setelah menyelesaikan Course ini, kita akan terus bertemu properti dan nilai baru yang tidak sempat dibahas. Rujukan pertama yang paling praktis untuk situasi itu adalah MDN Web Docs : dokumentasi yang dikelola oleh komunitas Mozilla dan dipakai developer di seluruh dunia. MDN menjelaskan setiap properti CSS dengan struktur yang konsisten, lengkap dengan contoh yang bisa dicoba langsung dan tabel dukungan browser. Chapter ini melatih kita membaca halaman MDN secara efisien, sehingga berikutnya mencari dokumentasi bukan lagi tebakan melainkan prosedur singkat.
Membaca Satu Halaman Properti #
Hampir semua halaman properti MDN mengikuti pola yang sama, sehingga kita bisa langsung menuju bagian yang dibutuhkan. Ambil contoh halaman letter-spacing ; bagian-bagiannya:
| Bagian halaman | Isinya | Kapan kita membacanya |
|---|---|---|
| Try it | Sandbox interaktif kecil | Ingin melihat efek properti dengan cepat |
| Syntax | Pola penulisan nilai yang sah | Sebelum menulis kode |
| Formal definition | Nilai awal, inheritance, animatable | Butuh perilaku mendalam |
| Formal syntax | Tata bahasa resmi nilai | Nilai rumit seperti background |
| Examples | Contoh kode siap salin | Ingin pola pemakaian nyata |
| Browser compatibility | Tabel dukungan per browser | Sebelum memakai fitur baru |
Bagian Formal syntax memakai notasi tata bahasa yang sekilas terlihat rumit. Mari kita bedah contoh milik letter-spacing:
letter-spacing =
normal |
<length>letter-spacing =: nama properti yang sedang didefinisikan; tanda=menyatakan pencocokan nilai.normal: kata kunci pertama yang sah, artinya jarak huruf mengikuti default font.|: pemisah “atau”; hanya satu pilihan yang boleh dipakai.<length>: tipe data generik, misalnya2pxatau-0.5px.
Notasi yang sama berlaku di semua halaman properti, jadi satu kali paham, kita bisa membaca semuanya. Titik masuk kedua yang sering dipakai adalah halaman Reference , daftar alfabetis seluruh properti, selector, dan at-rule CSS. Gunakan Reference saat kita tahu istilahnya tetapi lupa pola penulisannya.
Kapan Menuju ke MDN #
| Situasi | Tujuan ke MDN |
|---|---|
| Lupa urutan nilai atau nama properti | Halaman Reference untuk cek cepat |
| Nilai properti ditolak browser | Halaman properti → bagian Formal syntax |
| Perilaku inheritance membingungkan | Halaman properti → Formal definition |
| Fitur baru ingin dicoba | Tabel Browser compatibility di halaman tersebut |
Membaca dokumentasi adalah keterampilan yang tumbuh dengan latihan. Sebagai penutup, buka demo pada chapter ini: kartu rujukan yang meniru struktur halaman properti MDN, lengkap dengan bagian Sintaks dan Nilai. Bandingkan tata letaknya dengan halaman letter-spacing sungguhan agar pola pembacaan itu menempel.
Hasil di Browser:
Kartu rujukan tampil selebar 320px dengan header biru,
judul properti berwarna putih (font-weight 700), dan
badan kartu berlatar putih dengan radius sudut 10px.