Setiap halaman property di MDN tersusun dengan struktur yang sama. Begitu kamu terbiasa dengan strukturnya, halaman baru mana pun bisa dibaca dalam dua menit: sintaksnya apa, nilai yang sah apa saja, property ini mewarisi atau tidak, dan browser mana yang mendukungnya. Chapter ini memandu pembacaan satu halaman property secara sistematis, lalu menyediakan daftar property yang paling sering kamu butuhkan.
Struktur Halaman Property MDN #
Kita gunakan halaman MDN margin sebagai contoh. Halaman property MDN selalu memuat lima bagian utama:
| Bagian | Isi | Cara memanfaatkannya |
|---|---|---|
| Try it | Contoh interaktif | Ubah nilainya langsung untuk merasakan efeknya |
| Syntax | Bentuk formal nilai | Menunjukkan kombinasi nilai yang sah |
| Values | Daftar nilai dan kata kunci | Menjelaskan makna tiap nilai seperti auto |
| Formal definition | Nilai awal, applies to, inherited | Menjawab perilaku default dan pewarisan |
| Browser compatibility | Tabel dukungan browser | Menentukan apakah nilai itu aman dipakai |
Bagian Syntax memakai notasi formal, misalnya <length> | <percentage> | auto. Notasi ini berarti nilai boleh berupa panjang, persentase, atau kata kunci auto. Meski tampak rumit, notasi formal justru cepat dibaca setelah beberapa halaman: simbol | berarti “atau”, kurung siku merujuk tipe data, dan kata tanpa tanda adalah kata kunci yang ditulis apa adanya.
/* Kombinasi nilai yang sah untuk margin */
margin: 16px; /* satu nilai untuk semua sisi */
margin: 8px 16px; /* dua nilai: vertikal, horizontal */
margin: 8px auto 24px; /* tiga nilai: atas, horizontal, bawah */Kata kunci auto itulah yang memusatkan kotak secara horizontal tanpa perlu menghitung lebar secara manual.
Demo berikut menerapkan kombinasi ketiga nilai pada satu kotak di dalam wadah:
Sepuluh Property yang Paling Sering Dicari #
Daftar berikut mencakup property yang muncul di hampir semua proyek. Simpan halaman-halaman ini sebagai tab favorit:
| Property | Halaman MDN | Paling baik untuk |
|---|---|---|
color | MDN color | Warna teks elemen |
background | MDN background | Latar warna, gradien, dan gambar |
margin | MDN margin | Jarak di luar kotak elemen |
padding | MDN padding | Jarak di dalam kotak elemen |
border | MDN border | Garis tepi dan sudut membulat |
width | MDN width | Lebar kotak dan batasannya |
display | MDN display | Jenis tata letak: block, flex, grid |
gap | MDN gap | Jarak antar item flex dan grid |
font-family | MDN font-family | Pemilihan huruf beserta cadangannya |
flex | MDN flex | Pembagian ruang pada item flexbox |
Perhatikan juga bilah navigasi di sisi kiri halaman MDN. Daftar tersebut menampilkan seluruh property dalam modul yang sama; membuka font-family akan menampilkan property tipografi lain di dekatnya. Daftar ini cara tercepat menemukan property tetangga yang mungkin lebih tepat daripada yang sedang kamu cari.
Kebiasaan yang Menjaga Akurasi #
Dua kebiasaan kecil membuat referensi property selalu akurat:
- Periksa bagian Formal definition sebelum menyimpulkan perilaku default; banyak bug layout berawal dari asumsi nilai awal yang keliru.
- Baca baris terakhir tabel Browser compatibility sebelum memakai nilai baru, dan gunakan frasa aman “didukung seluruh browser modern” saat menulis dokumentasi tim.
Ringkasan #
Halaman property MDN punya lima bagian tetap: Try it, Syntax, Values, Formal definition, dan Browser compatibility. Dengan pola baca yang konsisten, kamu bisa menilai sebuah property dengan cepat dan aman. Berikutnya kita masuk ke panduan layout: pertama flexbox, yang referensinya paling sering dibuka saat membangun komponen.