Podcast CSS - 030: Daftar
Bayangkan Anda memiliki banyak barang yang ingin Anda beli selama perjalanan belanja kebutuhan sehari-hari. Salah satu cara umum untuk merepresentasikannya secara visual adalah daftar—tetapi bagaimana Anda dapat menambahkan gaya visual ke daftar belanjaan Anda?
<ul>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ul>
Membuat Daftar
Daftar sebelumnya dimulai dengan elemen semantik, atau <ul>
, dengan item daftar belanjaan (elemen <li>
) sebagai turunan. Jika Anda memeriksa setiap elemen <li>
, Anda dapat melihat bahwa semuanya memiliki display: list-item
, itulah sebabnya browser merender ::marker
secara default.
li {
display: list-item;
}
Ada dua jenis daftar lainnya.
Daftar yang diurutkan dapat dibuat dengan <ol>
, dalam hal ini item daftar akan menampilkan angka sebagai ::marker
.
<ol>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ol>
Daftar deskripsi juga dibuat dengan <dl>
, tetapi jenis daftar ini tidak menggunakan elemen item daftar <li>
.
<dl>
<dt>oat milk</dt>
<dd>- non dairy trendy drink</dd>
<dt>cereal</dt>
<dd>- breakfast food</dd>
</dl>
Gaya daftar
Setelah mengetahui cara membuat daftar, Anda dapat menata gayanya. Properti CSS pertama yang ditemukan adalah properti yang diterapkan ke seluruh daftar.
Ada tiga properti gaya daftar yang dapat Anda gunakan untuk menata gaya contoh Anda: list-style-position
, list-style-image
, dan list-style-type
.
list-style-position
list-style-position
memungkinkan Anda memindahkan poin butir ke inside
atau outside
konten item daftar. outside
default berarti poin butir tidak disertakan dalam konten item daftar, sementara inside
memindahkan elemen pertama di antara konten item daftar.
list-style-image
list-style-image
memungkinkan Anda mengganti poin butir daftar dengan gambar. Dengan begitu, Anda dapat menyetel gambar seperti url
atau none
agar poin menjadi gambar, svg, atau gif. Anda juga dapat menggunakan jenis media apa pun atau bahkan URI data.
Mari kita lihat cara menambahkan gambar setiap item bahan makanan sebagai list-style-image
:
list-style-type
Opsi terakhir adalah menata gaya list-style-type
yang mengubah poin butir menjadi kata kunci gaya, string kustom, emoji, dan lainnya yang diketahui. Anda dapat melihat semua jenis gaya daftar yang mungkin di sini.
Singkatan list-style
Setelah memiliki semua properti individual ini, Anda dapat menggunakan singkatan list-style
untuk menetapkan semua gaya daftar dalam satu baris:
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
list-style
memungkinkan Anda mendeklarasikan kombinasi satu, dua, atau tiga properti list-style
dalam urutan apa pun. Jika list-style-type
dan list-style-image
disetel, list-style-type
akan digunakan sebagai penggantian jika gambar tidak tersedia.
/* type */
list-style: square;
/* image */
list-style: url('../img/shape.png');
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;
/* Keyword value */
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;
Ini adalah properti yang paling umum digunakan dari gaya daftar yang dibahas di bagian ini. Salah satu aplikasi yang umum adalah list-style: none
untuk menyembunyikan gaya default. Gaya default berasal dari browser, dan Anda sering melihat stylesheet yang direset menghapus gaya daftar seperti padding dan margin. Anda juga dapat menggunakan singkatan ini untuk menetapkan gaya, seperti list-style: square inside;
Sejauh ini, contoh berfokus pada penataan gaya seluruh daftar dan item daftar, tetapi bagaimana dengan pendekatan yang lebih terperinci?
Elemen semu ::marker
Elemen penanda list-item
adalah butir, tanda hubung, atau angka romawi yang membantu menunjukkan setiap item dalam daftar Anda.
Jika memeriksa daftar di DevTools, Anda dapat melihat elemen ::marker
untuk setiap item daftar, meskipun tidak mendeklarasikan apa pun dalam HTML. Jika memeriksa ::marker
lebih lanjut, Anda akan melihat gaya default browser untuknya.
::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: start !important;
}
Saat Anda mendeklarasikan daftar, setiap item diberi penanda, meskipun tidak ada poin butir atau angka romawi di HTML Anda. Ini adalah elemen semu karena browser membuatnya untuk Anda, dan menyediakan API dengan gaya terbatas untuk menargetkannya. Pelajari anatomi butir CSS lebih lanjut. ::marker
memiliki dukungan terbatas di Safari.
Kotak penanda
Dalam model tata letak CSS, penanda item daftar direpresentasikan oleh kotak penanda yang terkait dengan setiap item daftar. Kotak penanda adalah penampung yang biasanya berisi butir atau angka.
Untuk menata gaya kotak penanda, Anda dapat menggunakan pemilih ::marker
. Hal ini memungkinkan Anda memilih hanya penanda, bukan menata gaya berdasarkan seluruh daftar.
Gaya penanda
Setelah memilih penanda, sekarang mari kita lihat properti gaya visual yang tersedia untuk pemilih ini. Anda dapat mempelajari lebih lanjut Poin kustom dengan CSS ::marker di web.dev.
Ada beberapa Properti ::marker
CSS yang diizinkan:
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
Jenis tampilan
Semua properti list-style
dan ::marker
tahu cara menata gaya elemen <li>
karena memiliki nilai tampilan default item daftar. Anda juga dapat membuat hal-hal yang bukan <li>
menjadi item daftar.
Untuk melakukannya, tambahkan properti display: list-item
. Salah satu contoh penggunaan display: list-item
adalah jika Anda menginginkan butir menggantung pada judul, sehingga Anda dapat mengubahnya menjadi bentuk lain dengan ::marker
. Contoh berikut menunjukkan judul menggunakan display: list-item
untuk tujuan gaya visual, dengan daftar menggunakan markup daftar yang benar.
Meskipun Anda dapat mengubah apa pun menjadi tampilan item daftar dengan display
, Anda tidak boleh menggunakannya, bukan menggunakan markup daftar yang benar, jika konten yang Anda tata gayanya benar-benar berupa daftar. Mengubah tampilan visual item ke item daftar tidak mengubah cara layanan aksesibilitas membaca dan mengenali item, sehingga tidak akan dibaca sebagai item daftar untuk pembaca layar atau perangkat beralih. Anda harus selalu menggunakan markup semantik dan membuat daftar dengan <li>
jika memungkinkan.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang daftar
Elemen sebelum item daftar disebut elemen
::marker
::pencil
::bullet
::counter
Tiga jenis daftar HTML adalah
<li>
<dl>
<list>
<ul>
<ol>
<lo>
Dua gaya manakah dalam daftar ini yang akan menerapkan gaya ke ::marker
?
background-color
display
transition
color