Menyesuaikan warna, ukuran, atau jenis angka, atau poin saat menggunakan <ul> atau <ol> kini menjadi mudah.
Berkat Igalia, yang disponsori oleh Bloomberg, kami akhirnya dapat memanfaatkan cara-cara kami untuk membuat daftar gaya. Lihat!
Berkat CSS ::marker, kita dapat mengubah konten serta beberapa gaya poin dan angka.
Kompatibilitas browser
::marker didukung di Firefox untuk desktop dan Android, Safari desktop dan Safari iOS (tetapi hanya properti color dan font-*, lihat Bug 204163), serta browser desktop dan Android berbasis Chromium.
Elemen Pseudo
Pertimbangkan daftar HTML penting yang tidak diurutkan berikut ini:
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li>Dolores quaerat illo totam porro</li>
<li>Quidem aliquid perferendis voluptates</li>
<li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
<li>Fuga</li>
</ul>
Yang menghasilkan rendering yang tidak mengejutkan berikut:
Titik di awal setiap item <li> tidak dikenakan biaya. Browser menggambar dan membuat kotak penanda yang dihasilkan untuk Anda.
Hari ini, kami sangat antusias untuk membahas elemen pseudo ::marker, yang memberikan kemampuan untuk menata gaya elemen bullet yang dibuat browser untuk Anda.
Membuat penanda
Kotak penanda elemen semu ::marker otomatis dibuat di dalam setiap elemen item daftar, sebelum konten sebenarnya dan elemen pseudo ::before.
li::before {
content: "::before";
background: lightgray;
border-radius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}
Biasanya, item daftar merupakan elemen HTML <li>, tetapi elemen lain juga dapat menjadi item daftar dengan display: list-item.
<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
<dd>Dolores quaerat illo totam porro</dd>
<dt>Ipsum</dt>
<dd>Quidem aliquid perferendis voluptates</dd>
</dl>
dd {
display: list-item;
list-style-type: "🤯";
padding-inline-start: 1ch;
}
Menata gaya penanda
Hingga ::marker, gaya daftar dapat diberi gaya menggunakan list-style-type dan list-style-image untuk mengubah simbol item daftar dengan 1 baris CSS:
li {
list-style-image: url(/right-arrow.svg);
/* OR */
list-style-type: '👉';
padding-inline-start: 1ch;
}
Itu mudah tetapi kita
membutuhkan lebih banyak lagi. Bagaimana dengan mengubah warna, ukuran, spasi, dll!? Di sinilah ::marker membantu. ID ini memungkinkan penargetan individual dan global pada elemen pseudo ini dari CSS:
li::marker {
color: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}
Properti list-style-type memberikan kemungkinan gaya yang sangat terbatas. Elemen pseudo ::marker berarti Anda dapat menargetkan penanda itu sendiri dan menerapkan gaya langsung ke penanda tersebut. Hal ini memungkinkan kontrol yang jauh lebih besar.
Meskipun demikian, Anda tidak dapat menggunakan setiap properti CSS di ::marker. Daftar properti yang diizinkan dan tidak diizinkan ditunjukkan dengan jelas di spesifikasi. Jika Anda mencoba sesuatu yang menarik dengan elemen semu ini dan itu tidak berhasil, daftar di bawah ini adalah panduan Anda tentang apa yang bisa dan tidak dapat dilakukan dengan CSS:
Properti ::marker CSS yang Diizinkan
animation-*transition-*colordirectionfont-*contentunicode-bidiwhite-space
Mengubah konten ::marker dilakukan dengan content, bukan list-style-type. Dalam contoh berikutnya ini, item pertama ditata menggunakan list-style-type dan yang kedua dengan ::marker. Properti dalam kasus pertama berlaku untuk seluruh item daftar, bukan hanya penanda, yang berarti teks dianimasikan serta penanda. Saat menggunakan ::marker, kita dapat menargetkan kotak penanda saja, bukan teks.
Selain itu, perhatikan bagaimana properti background yang tidak diizinkan tidak berpengaruh.
li:nth-child(1) {
list-style-type: '?';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}
Hasil campuran antara penanda dan item daftar
li:nth-child(2)::marker {
content: '!';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}
Hasil yang terfokus antara penanda dan item daftar
Mengubah konten penanda
Berikut beberapa cara untuk menata gaya penanda.
Mengubah semua item daftar
li {
list-style-type: "😍";
}
/* OR */
li::marker {
content: "😍";
}
Mengubah hanya satu item daftar
li:last-child::marker {
content: "😍";
}
Mengubah item daftar ke SVG
li::marker {
content: url(/heart.svg);
content: url(#heart);
content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}
Mengubah daftar bernomor
Bagaimana dengan <ol>? Penanda pada item daftar yang diurutkan adalah angka dan bukan butir secara default. Dalam CSS, ini disebut Penghitung, dan cukup canggih. Mereka bahkan memiliki properti untuk disetel dan direset di mana angka dimulai dan diakhiri, atau mengalihkannya ke angka romawi. Bisakah kita mengatur gayanya? Ya, kita bahkan bisa menggunakan nilai konten penanda untuk membuat presentasi penomoran sendiri.
li::marker {
content: counter(list-item) "› ";
color: hotpink;
}
Proses debug
Chrome DevTools siap membantu Anda memeriksa, men-debug, dan mengubah gaya yang diterapkan ke elemen pseudo ::marker.
Gaya elemen Pseudo mendatang
Anda dapat mengetahui lebih lanjut tentang ::marker dari:
- Daftar, Penanda, dan Penghitung CSS dari Majalah Smashing
- Penghitungan Dengan Penghitung CSS dan Petak CSS dari Trik CSS
- Menggunakan Penghitung CSS dari MDN
Hal ini bagus untuk mendapatkan akses ke sesuatu yang sulit untuk ditata gayanya. Anda mungkin berharap dapat menata gaya elemen lain yang dibuat secara otomatis. Anda mungkin akan menemui kesulitan dengan <details> atau indikator pelengkapan otomatis input penelusuran, hal-hal yang tidak diterapkan dengan cara yang sama di seluruh browser. Salah satu cara untuk membagikan hal yang Anda butuhkan adalah dengan membuat keinginan di https://webwewant.fyi.