Setelah dua chapter memakai list-style-type dan list-style: none secara terpisah, kini saatnya melihat property ini secara utuh. Shorthand list-style menyatukan tiga komponen penanda — bentuk, posisi, dan gambar — dan kesalahan kecil dalam menulisnya bisa diam-diam mereset komponen lain. Chapter ini membedah anatomi shorthand-nya, memasang gambar SVG sebagai bullet lewat list-style-image, menggali ::marker lebih dalam hingga property content, dan menutup perbandingan inside versus outside.
Tiga Komponen Penanda #
Property list-style adalah shorthand untuk tiga longhand:
| Longhand | Mengatur | Nilai umum |
|---|---|---|
list-style-type | bentuk penanda teks | disc, square, decimal, none |
list-style-position | posisi terhadap kotak konten | outside (default), inside |
list-style-image | gambar sebagai penanda | none, url(...) |
Urutan penulisannya bebas, tetapi konsekuensinya tidak: seperti shorthand lain yang kita bahas sejak section Warna dan Background, komponen yang tidak disebut kembali ke nilai initial-nya. Aturan list-style: square di tengah berkas akan mereset list-style-position yang sebelumnya ditetapkan inside — penanda tiba-tiba pindah ke luar tanpa peringatan.
.daftar-sorot {
list-style: square inside;
}Demo berikut memperlihatkan shorthand itu pada daftar yang teksnya pindah baris:
Kebiasaan yang aman adalah menulis ketiga komponen sekaligus bila shorthand dipakai, atau memilih longhand bila hanya satu aspek yang berubah.
Gambar sebagai Penanda: list-style-image #
list-style-image mengganti penanda teks dengan gambar, dan SVG data URI membuatnya tetap satu berkas tanpa aset terpisah:
.daftar-cek {
list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-6' fill='none' stroke='%231f6f54' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}Sekali ditulis, gambar ini tampil tajam di segala ukuran layar karena berbasis vektor.
Keterbatasannya jujur perlu disebut: ukuran gambar mengikuti kotak marker yang tingginya mengikuti baris teks, sehingga mengendalikan ukuran ikon lewat property ini sulit. Karena itu section Typography menyarankan ::marker untuk penanda bergaya, sementara list-style-image paling nyaman untuk ikon yang memang berukuran seukuran teks.
::marker Lebih Dalam #
::marker menerima daftar property yang lebih panjang daripada yang biasa dipakai:
| Property | Bisa disetel? | Catatan |
|---|---|---|
color, opacity | ya | pewarnaan penanda |
font-size, font-weight, font-family | ya | ukuran dan ketebalan nomor |
content | ya | mengganti isi penanda sepenuhnya |
background-color, padding | tidak | diabaikan browser |
Property content adalah tambahan paling berguna sekaligus paling perlu catatan dukungan: mengganti penanda 1. menjadi panah misalnya, cukup satu deklarasi:
.daftar-sorot li::marker {
content: "→ ";
color: #1f6f54;
}Demo berikut memakai list-style-image dengan SVG data URI pada daftar pertama, dan ::marker berwarna dengan content panah pada daftar kedua:
content pada ::marker didukung browser modern terbaru; pada browser yang belum mendukung, penanda kembali ke bentuk default-nya — degradasi yang aman karena tidak ada layout yang berubah. Untuk target yang lebih luas, pola ::before dari chapter sebelumnya tetap jadi pilihan paling konsisten.
inside vs outside: Perbandingan Ringkas #
list-style-position menentukan di mana penanda duduk terhadap kotak konten li:
| Aspek | outside (default) | inside |
|---|---|---|
| Posisi penanda | menggantung di luar kotak konten | bagian dari baris pertama |
| Teks pindah baris | tetap sejajar dengan baris pertama | turun sejajar dengan penanda |
| Cocok untuk | daftar panjang dengan teks multi-baris | ruang sempit, daftar pendek |
Pada layout sempit seperti panel samping, inside menghemat ruang horizontal karena indentasi penanda tidak menambah lebar; pada artikel, outside menjaga struktur teks terbaca. Keduanya disetel lewat shorthand yang sama: list-style: decimal inside.
Ringkasan #
Shorthand list-style menyatukan list-style-type, list-style-position, dan list-style-image dengan aturan penting: komponen yang tidak disebut kembali ke initial. list-style-image memasang gambar — SVG data URI menjadi pasangan alaminya — meski kendali ukurannya terbatas, dan ::marker kini bisa mengganti isi penanda lewat content. Dengan daftar selesai dibedah, kita beralih ke objek styling yang jauh lebih terstruktur: tabel, dimulai dari anatomi dan resep dasarnya.