Daftar

Podcast CSS - 030: Daftar

Bayangkan Anda memiliki banyak item yang Anda rencanakan untuk dibeli pada perjalanan belanja Anda berikutnya. Salah satu cara umum untuk mewakili hal ini secara visual adalah daftar, tetapi bagaimana cara menambahkan gaya ke daftar belanja 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 belanja (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 berurut 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

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

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 memberi gaya pada contoh: list-style-position, list-style-image, dan list-style-type.

list-style-position

list-style-position memungkinkan Anda memindahkan poin berbutir ke inside atau outside pada konten item daftar. outside default berarti poin berbutir tidak disertakan dalam konten item daftar, sementara inside memindahkan elemen pertama di antara konten item daftar.

Daftar dengan penanda ::di luar dan di dalam yang menunjukkan bahwa di luar (nilai default) tidak ada dalam item daftar dan berada di dalam kotak konten item daftar.

list-style-image

list-style-image memungkinkan Anda mengganti poin butir daftar dengan gambar. Hal ini memungkinkan Anda menyetel gambar seperti url atau none agar butir Anda menjadi gambar, svg, atau gif. Anda juga bisa menggunakan jenis media apa pun atau bahkan URI data.

Mari kita lihat cara menambahkan gambar setiap item belanjaan sebagai list-style-image:

list-style-type

Opsi terakhir adalah menata gaya list-style-type yang mengubah poin berbutir menjadi kata kunci gaya yang diketahui, string kustom, emoji, dan lainnya. Anda dapat melihat semua kemungkinan jenis gaya daftar di sini.

Singkatan list-style

Setelah memiliki semua properti individual ini, Anda dapat menggunakan cara pintas 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 dari satu, dua, atau tiga properti list-style dalam urutan apa pun. Jika list-style-type dan list-style-image ditetapkan, 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 dalam bagian ini. Salah satu penerapan yang umum adalah list-style: none untuk menyembunyikan gaya default. Gaya default berasal dari browser, dan Anda sering melihat stylesheet reset yang menghapus gaya daftar seperti padding dan margin. Anda juga dapat menggunakan cara pintas ini untuk menetapkan gaya, seperti list-style: square inside;

Sejauh ini, contoh-contoh tersebut berfokus pada penataan gaya seluruh daftar dan item daftar, tetapi bagaimana dengan pendekatan yang lebih terperinci?

Elemen pseudo ::marker

Elemen penanda list-item adalah butir, tanda hubung, atau angka romawi yang membantu menunjukkan setiap item dalam daftar Anda.

Daftar berisi tiga item yang menunjukkan bahwa setiap poin adalah elemen pseudo ::marker.

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 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 penataan 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 diwakili 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 penanda saja, bukan menata gaya berdasarkan seluruh daftar.

Gaya penanda

Setelah Anda memilih penanda, sekarang mari kita lihat properti gaya visual yang tersedia untuk pemilih ini. Anda dapat mempelajari lebih lanjut Butir 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 kita 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 hal lain dengan ::marker. Contoh berikut menunjukkan judul menggunakan display: list-item untuk tujuan gaya, dengan daftar yang menggunakan markup daftar yang benar.

Meskipun Anda dapat mengubah apa pun menjadi tampilan item daftar dengan display, sebaiknya jangan gunakan ini, bukan menggunakan markup daftar yang benar, jika konten yang Anda tata gayanya adalah daftar. Mengubah tampilan visual item menjadi item daftar tidak akan mengubah cara layanan aksesibilitas membaca dan mengenali item, sehingga item tersebut tidak akan dibaca sebagai item daftar ke pembaca layar atau perangkat tombol akses. Anda harus selalu menggunakan markup semantik dan membuat daftar dengan <li> jika memungkinkan.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang daftar

Elemen yang mendahului daftar-item disebut

::butir
Coba lagi.
::pensil
Coba lagi.
::penanda
Benar.
::penghitung
Coba lagi.

Tiga jenis daftar HTML adalah

<dl>
Benar.
<lo>
Coba lagi.
<ol>
Benar.
<li>
Coba lagi.
<ul>
Benar.
<list>
Coba lagi.

Dua gaya manakah dalam daftar ini yang akan menerapkan gaya pada penanda ::?

transition
Benar.
background-color
Coba lagi.
color
Benar.
display
Coba lagi.

Referensi