CSS / list-style-image: gambar, ukuran, dan penanda cadangan

CSS list-style-image menetapkan gambar untuk penanda item daftar. Biasanya disetel pada ul atau ol dan diwarisi oleh item li mereka. Jika tidak ada gambar yang bisa digunakan, penanda list-style-type digunakan sebagai gantinya, jadi tentukan juga cadangan yang sesuai.

Fungsi dan nilai list-style-image

Nilai awal adalah none, dan properti ini diturunkan. Penanda milik elemen dengan display: list-item, seperti elemen li biasa. Menetapkannya pada ul biasanya berhasil karena item daftar mewarisi nilainya; properti ini tidak menambahkan gambar latar pada ul itu sendiri.

Dalam sintaks, url() adalah fungsi yang berisi URL, bukan kata url itu sendiri. Jenis animasi adalah diskret, yang tidak berarti bahwa dua gambar berubah halus menjadi satu sama lain. MDN list-style-image referensi

Contoh lengkap untuk disalin

Simpan kode lengkap di bawah ini sebagai list-marker.html dalam UTF-8 dan buka di browser. Tidak diperlukan pustaka, server, atau berkas gambar terpisah. SVG, Scalable Vector Graphics, adalah format gambar vektor; contoh ini menanamkan lingkaran biru 16×16 dalam URL data. Kata-kata dalam bahasa Inggris adalah item perbandingan.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Perbandingan penanda gambar</title>
  <style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .image-list {
      list-style-type: square;
      list-style-position: outside;
      list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%230066cc'/%3E%3C/svg%3E");
      font-size: 20px;
      max-width: 22rem;
      padding-inline-start: 2rem;
    }
    .image-list li { margin-block: .5rem; }
    .large { font-size: 32px; }
    .reset { list-style-image: none; }
  </style>
</head>
<body>
  <h1>Perbandingan penanda gambar</h1>
  <h2>list-style-image</h2>
  <ul class="image-list"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
  <h2>font-size: 32px</h2>
  <ul class="image-list large"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
  <h2>list-style-image: none</h2>
  <ul class="image-list reset"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
</body>
</html>

Hasil yang diharapkan adalah penanda lingkaran biru pada dua daftar pertama dan penanda kotak pada daftar ketiga. Hanya teks yang membesar menjadi 32px pada daftar kedua. Ketika item kedua yang panjang berpindah baris, bandingkan penyelarasan penanda di luar dengan teksnya. Setelah mengedit file, simpan dan muat ulang.

Membedakan ukuran gambar dan huruf

SVG ini secara eksplisit menentukan lebar dan tinggi sebagai 16, memberikan dimensi penanda gambar sebesar 16×16 piksel CSS. Meningkatkan teks dari 20px menjadi 32px tidak otomatis membesarkan gambar ini secara proporsional. Juga tidak akurat untuk mengatakan bahwa setiap gambar penanda selalu menggunakan dimensi piksel aslinya: ukuran dapat berbeda ketika gambar tidak memiliki dimensi atau rasio intrinsik.

list-style-image tidak memiliki parameter lebar atau tinggi penanda terpisah. Siapkan gambar penanda kecil atau berikan dimensi SVG yang sesuai. Properti yang didukung oleh ::marker juga terbatas; menetapkan lebar dan tinggi di sana tidak memberikan ukuran gambar sembarang. Untuk ukuran dan jarak yang presisi, pertimbangkan desain background-image atau pseudo-element terpisah sambil mempertahankan semantik daftar dan informasi teks yang sebenarnya. MDN: properti yang didukung ::marker

Menghapus gambar dan memeriksa bentuk singkat

Untuk menghapus hanya gambarnya, atur list-style-image: none seperti di bawah ini. Contohnya mempertahankan list-style-type: square, sehingga tanda kotak muncul. Bandingkan perubahan tersebut dan pulihkan deklarasi url() asli untuk mengembalikan gambar. Penanda cadangan juga digunakan ketika pemuatan gambar gagal dan tidak ada gambar yang dapat digunakan.

.image-list {
  list-style-image: none;
}

Bentuk singkat list-style berikut juga mereset komponen gambar yang dihilangkan. Menerapkannya kemudian dapat menghapus gambar yang dideklarasikan sebelumnya. Periksa apakah ada penimpaan oleh bentuk singkat yang ditulis setelahnya, dan gunakan properti individu atau sertakan gambar dalam bentuk singkat sesuai dengan maksud Anda.

.image-list {
  list-style: square outside;
}

Memeriksa penanda yang tidak muncul

1. Periksa URL gambar dan responsnya. URL relatif dalam stylesheet eksternal diselesaikan relatif terhadap file CSS tersebut, bukan file HTML. URL dalam elemen style mengikuti URL dasar dokumen. Gunakan panel Jaringan di alat pengembang untuk memeriksa respons 404 dan format gambar yang tidak valid.
2. Periksa elemen li yang dipilih untuk list-style-image dan display yang dihitung. Periksa apakah ada bentuk singkat list-style atau aturan dengan prioritas lebih tinggi yang menimpa nilai tersebut. Juga periksa apakah display telah diubah menjadi sesuatu seperti flex, sehingga elemen tidak lagi menghasilkan marker list-item.
3. Dengan posisi outside, indentasi yang tidak cukup atau pengaturan overflow dari induk dapat memotong marker. Periksa padding dan pemotongan daftar. Jika kebijakan situs memblokir URL data, gantilah gambar contoh dengan URL gambar yang diizinkan.

Daftar bersarang juga bisa mewarisi properti ini. Untuk menghapus gambar dari daftar bersarang, terapkan secara eksplisit list-style-image: none pada daftar tersebut dan atur list-style-type sesuai nilai yang diinginkan.

Menjaga makna dan aksesibilitas daftar

Lingkaran biru di sini bersifat dekoratif. Letakkan makna penting seperti penyelesaian, peringatan, atau penilaian dalam teks item daftar itu sendiri, bukan hanya pada gambar CSS. Penanda CSS tidak menyediakan atribut alt seperti pada elemen img HTML, jadi jangan menghilangkan informasi dengan asumsi bahwa gambar akan dimuat atau diumumkan.

Memberikan marker gambar yang sama pada ol menggantikan angka yang terlihat dengan gambar. Pertahankan angka asli ketika pembaca membutuhkan penomoran langkah. Pertahankan struktur ul, ol, dan li, dan pastikan bahwa item dan urutannya tetap dapat dipahami tanpa gambar. W3C definisi marker daftar gambar