Lihat beberapa cara kreatif dan berguna untuk mengatur gaya daftar.
Apa yang terlintas di pikiran Anda ketika memikirkan daftar? Contoh yang paling jelas adalah daftar belanja—daftar yang paling sederhana, kumpulan item tanpa urutan tertentu. Tapi kita menggunakan daftar dengan berbagai cara di web. Koleksi konser mendatang di suatu tempat? Kemungkinan besar berupa daftar. Proses pemesanan multi-langkah? Bisa jadi berupa daftar. Galeri gambar? Bahkan, itu bisa dianggap sebagai daftar gambar dengan keterangan.
Dalam artikel ini, kita akan mendalami berbagai jenis daftar HTML yang tersedia untuk kita di web dan kapan menggunakannya, termasuk beberapa atribut yang mungkin tidak Anda ketahui. Kita juga akan melihat beberapa cara yang berguna dan kreatif untuk menata gayanya dengan CSS.
Kapan harus menggunakan daftar
Elemen daftar HTML harus digunakan ketika item perlu dikelompokkan secara semantik. Teknologi pendukung (seperti pembaca layar) akan memberi tahu pengguna bahwa ada daftar, dan jumlah item. Jika Anda berpikir tentang, misalnya, kisi-kisi produk di situs belanja, mengetahui informasi ini akan sangat membantu. Oleh karena itu, menggunakan elemen daftar mungkin menjadi pilihan yang baik.
Mencantumkan jenis
Dalam hal markup, kita memiliki pilihan tiga elemen daftar berbeda yang tersedia untuk kita:
- Daftar yang tidak diurutkan
- Daftar yang diurutkan
- Daftar deskripsi
Mana yang harus dipilih tergantung pada kasus penggunaannya.
Daftar yang tidak diurutkan (ul)
Elemen daftar yang tidak diurutkan (<ul>) paling berguna jika item dalam daftar tidak sesuai dengan urutan tertentu. Secara default, daftar ini akan ditampilkan sebagai daftar berbutir. Contohnya adalah daftar belanja, di mana urutan tidak menjadi masalah.
Contoh yang lebih umum di web adalah menu navigasi. Saat membuat menu, sebaiknya gabungkan ul dalam elemen nav dan identifikasi menu dengan label, untuk membantu teknologi pendukung. Kita juga harus mengidentifikasi halaman saat ini di menu, yang dapat kita lakukan menggunakan atribut aria-current:
<nav aria-label="Main">
<ul>
<li>
<a href="/page-1" aria-current="page">Menu item 1</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
…
</ul>
</nav>
Artikel tentang struktur menu ini menguraikan sejumlah rekomendasi untuk memastikan menu navigasi kami dapat diakses oleh semua orang.
Daftar yang diurutkan (ol)
Elemen daftar yang diurutkan (<ol>) adalah pilihan terbaik ketika urutan item penting, seperti proses multi-langkah. Secara default, item daftar diberi nomor. Contohnya dapat berupa kumpulan petunjuk, yang langkah-langkahnya harus diselesaikan secara berurutan.
Elemen <ol> dan <ul> hanya dapat berisi elemen <li> sebagai turunan langsungnya.
Daftar deskripsi (dl)
Daftar deskripsi berisi istilah (elemen <dt>) dan deskripsi (<dd>). Setiap istilah dapat disertai dengan lebih dari satu deskripsi. Kemungkinan kasus penggunaan mencakup glosarium istilah, atau mungkin menu restoran. Daftar deskripsi tidak ditampilkan dengan penanda secara default, meskipun browser cenderung mengindentasi elemen <dd>.
Di HTML, diizinkan untuk mengelompokkan istilah dengan deskripsi yang menyertainya menggunakan <div>. Ini dapat berguna untuk tujuan penataan gaya, seperti yang akan kita lihat nanti.
<!-- This is valid -->
<dl>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</dl>
<!-- This is also valid -->
<dl>
<div>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
</div>
<div>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</div>
</dl>
Gaya daftar sederhana
Salah satu penggunaan daftar yang paling sederhana adalah dalam blok teks isi. Daftar sederhana ini sering kali tidak memerlukan penataan gaya yang rumit, tetapi kita mungkin ingin menyesuaikan penanda dari daftar yang diurutkan atau tidak diurutkan sampai batas tertentu, seperti dengan warna merek, atau dengan menggunakan gambar kustom untuk poin-poin. Kita dapat melakukan banyak hal dengan list-style dan elemen pseudo ::marker.
::penanda
Selain memberi penanda daftar beberapa gaya dasar, kita dapat membuat poin siklus. Di sini kita menggunakan tiga URL gambar yang berbeda untuk nilai content dari elemen pseudo ::marker, yang menambah nuansa tulisan tangan dari contoh daftar belanja (bukan hanya menggunakan satu gambar untuk semuanya):
::marker {
content: url("/marker-1.svg") ' ';
}
li:nth-child(3n)::marker {
content: url("/marker-2.svg") ' ';
}
li:nth-child(3n - 1)::marker {
content: url("/marker-3.svg") ' ';
}
Penghitung kustom
Untuk beberapa daftar yang diurutkan, kita mungkin ingin menggunakan nilai penghitung, tetapi menambahkan nilai lain ke dalamnya. Kita dapat menggunakan penghitung list-item sebagai nilai untuk properti content penanda dan menambahkan konten lain:
::marker {
content: counter(list-item) '🐈 ';
}
Penghitung kita otomatis bertambah satu, tetapi kita dapat mengizinkannya bertambah dengan nilai yang berbeda jika kita mau, dengan menetapkan properti counter-increment di item daftar. Misalnya, hal ini akan menambah penghitung kita sebesar tiga setiap kali:
li {
counter-increment: list-item 3;
}
Masih banyak lagi yang bisa kita gali dengan penghitung. Artikel Daftar CSS, Penanda, dan Penghitung menjelaskan beberapa kemungkinan secara lebih mendetail.
Batasan gaya visual penanda
Ada kalanya kita mungkin menginginkan kontrol yang lebih besar atas posisi dan gaya penanda. Misalnya, tidak mungkin menempatkan penanda menggunakan flexbox atau petak, yang terkadang dapat menjadi kelemahan jika Anda memerlukan beberapa penyelarasan lain. ::marker mengekspos properti CSS dalam jumlah terbatas untuk gaya visual. Jika desain kita memerlukan sesuatu selain penataan gaya dasar, sebaiknya kita menggunakan elemen pseudo lain.
Menata gaya daftar yang tidak terlihat seperti daftar
Terkadang kita mungkin ingin menata gaya daftar dengan cara yang benar-benar berbeda dari gaya default. Ini sering kali terjadi pada menu navigasi, misalnya, tempat kita biasanya ingin menghapus semua penanda, dan mungkin menampilkan daftar secara horizontal, menggunakan flexbox. Praktik yang umum adalah menetapkan properti list-style ke none. Artinya, elemen pseudo penanda tidak akan dapat diakses lagi di DOM.
Penanda kustom dengan ::before
Menata gaya elemen pseudo ::before adalah cara umum untuk membuat penanda daftar kustom sebelum ::marker muncul. Namun saat ini, hal ini memberi kita lebih banyak fleksibilitas, saat kita membutuhkannya, untuk gaya daftar yang kompleks secara visual.
Seperti ::marker, kita dapat menambahkan gaya butir kustom kita sendiri menggunakan atribut content. Tidak seperti menggunakan ::marker, kita perlu melakukan beberapa pemosisian manual karena kita tidak mendapatkan manfaat otomatis yang ditawarkan oleh list-style-position. Namun, kita dapat memosisikannya relatif mudah dengan flexbox, dan hal itu membuka lebih banyak peluang untuk penyelarasan. Misalnya, kita dapat berganti posisi penanda:
Jika menata gaya daftar yang diurutkan menggunakan elemen ::before, kita juga dapat menggunakan penghitung untuk menambahkan penanda numerik.
li::before {
counter-increment: list-item;
content: counter(list-item);
}
Penggunaan ::before dan bukan ::marker memungkinkan kita mendapatkan akses penuh ke properti CSS untuk gaya visual kustom, serta mengizinkan animasi dan transisi—yang dukungannya terbatas untuk ::marker.
Mencantumkan atribut
Elemen daftar yang diurutkan menerima beberapa atribut opsional, yang dapat membantu kita dalam berbagai kasus penggunaan.
Daftar terbalik
Jika kita memiliki daftar 10 album teratas tahun lalu, kita mungkin ingin menghitung mundur dari 10 ke 1. Kita dapat menggunakan penghitung kustom untuk itu, dan menambahkannya secara negatif. Atau, kita dapat menggunakan atribut reversed di HTML. Saya berpendapat bahwa penggunaan atribut reversed umumnya masuk akal secara semantik, bukan menambahkan penghitung di CSS secara negatif, kecuali jika penghitung sepenuhnya presentasi. Jika CSS gagal dimuat, Anda masih akan melihat angka menghitung mundur dengan benar di HTML. Selain itu, kita perlu mempertimbangkan bagaimana {i>screen reader<i} akan menafsirkan daftar tersebut.
Ikuti demo 10 album teratas tahun 2021 ini. Jika penghitung hanya ditingkatkan dengan CSS, seseorang yang mengakses halaman menggunakan pembaca layar mungkin menyimpulkan bahwa angka dihitung ke atas, sehingga angka 10 sebenarnya adalah nomor satu.
Anda dapat melihat dalam demo bahwa dengan menggunakan atribut reversed, penanda kita sudah memiliki nilai yang benar, tanpa upaya tambahan dari pihak kita. Namun, jika membuat penanda daftar kustom menggunakan elemen pseudo ::before, kita perlu menyesuaikan penghitung. Kita hanya perlu menginstruksikan penghitung item daftar agar bertambah negatif:
li::before {
counter-increment: list-item -1;
content: counter(list-item);
}
Ini akan cukup di Firefox, tetapi di Chrome dan Safari, penanda akan menghitung mundur dari nol hingga -10. Kita dapat memperbaikinya dengan menambahkan atribut start ke daftar.
Daftar terpisah
Atribut start memungkinkan kita menentukan nilai numerik yang akan menjadi awal daftar. Salah satu kegunaan hal ini adalah ketika Anda ingin membagi daftar menjadi beberapa grup.
Mari kita buat contoh 10 album teratas kita. Mungkin kita sebenarnya ingin menghitung mundur 20 album teratas, tetapi dalam kelompok berisi 10 album. Di antara kedua grup tersebut, ada beberapa konten halaman lain.
Kita harus membuat dua daftar terpisah di HTML, tetapi bagaimana kita memastikan bahwa penghitung akan benar? Karena markup saat ini berlaku, kedua daftar akan menghitung mundur dari 10 ke 1, yang bukan yang kita inginkan. Namun, dalam HTML, kita dapat menentukan nilai atribut start. Jika kita menambahkan nilai start 20 ke daftar pertama, penanda sekali lagi akan diperbarui secara otomatis.
<ol reversed start="20">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Tata letak daftar multi-kolom
Tata letak multi-kolom terkadang dapat cocok dengan daftar kita, seperti yang dapat Anda lihat dari demo sebelumnya. Dengan menetapkan lebar kolom, kita dapat memastikan bahwa daftar secara otomatis responsif, menempatkan dirinya di atas dua kolom atau lebih hanya ketika ada ruang yang cukup. Kita juga dapat menetapkan jarak antar-kolom, dan untuk pengembangan tambahan, tambahkan aturan kolom yang ditata (menggunakan singkatan yang mirip dengan properti border):
ol {
columns: 25rem;
column-gap: 7rem;
column-rule: 4px dotted turquoise;
}
Dengan menggunakan kolom, terkadang kita bisa mendapatkan jeda yang tidak sedap di item daftar—tidak selalu efek yang kita inginkan.
Kita dapat mencegah jeda paksa ini menggunakan break-inside: avoid di item daftar kita:
li {
break-inside: avoid;
}
Properti khusus
Properti khusus CSS membuka berbagai kemungkinan untuk daftar gaya. Jika mengetahui indeks item daftar, kita dapat menggunakannya untuk menghitung nilai properti. Sayangnya, saat ini tidak ada cara untuk menentukan indeks elemen (dengan cara yang dapat digunakan, dalam kecepatan apa pun) di CSS saja. Penghitung hanya mengizinkan kita menggunakan nilainya di properti content, dan tidak mengizinkan penghitungan.
Namun, kita dapat menetapkan indeks elemen dalam atribut style di HTML, yang dapat membuat penghitungan menjadi lebih mudah, terutama jika kita menggunakan bahasa template. Contoh ini menunjukkan cara menetapkannya menggunakan Nunjucks:
<ol style="--length: items|length">
</ol>
Splitting.js adalah library yang menjalankan fungsi serupa di sisi klien.
Dengan menggunakan nilai properti kustom, kita dapat menampilkan progres melalui daftar dengan berbagai cara. Salah satunya dapat berupa status progres untuk daftar langkah. Dalam contoh ini, kita menggunakan elemen pseudo dengan gradien linier untuk membuat batang bagi setiap item yang menunjukkan seberapa jauh pengguna berada dalam daftar.
li::before {
--stop: calc(100% / var(--length) * var(--i));
--color1: deeppink;
--color2: pink;
content: '';
background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);
}
Kita juga dapat menyesuaikan hue seiring progres daftar, dengan menggunakan fungsi warna hsl(). Kita dapat menghitung nilai hue menggunakan properti kustom.
Gaya daftar deskripsi
Seperti yang disebutkan sebelumnya, kita dapat memilih untuk menggabungkan istilah dan definisinya dalam div di dl, untuk memberi kita lebih banyak opsi gaya. Misalnya, kita mungkin ingin menampilkan daftar sebagai petak. Menetapkan display: grid pada daftar tanpa wrapper div di sekitar setiap grup akan berarti persyaratan dan deskripsi ditempatkan di sel petak yang berbeda. Terkadang cara ini berguna, seperti dalam contoh berikut, menampilkan menu pai beserta deskripsinya.
Kita dapat menentukan petak pada daftar itu sendiri dan memastikan bahwa istilah dan deskripsi akan selalu sejajar dalam kolom, dengan lebar kolom yang ditentukan oleh jangka waktu terpanjang.
Di sisi lain, jika kita ingin mengelompokkan istilah dengan gaya kartu deskripsinya, wrapper <div> sangat membantu.
Referensi
- Daftar Pengantar daftar dan ::penanda
- Penanda kustom menggunakan ::marker
- Daftar CSS dengan penghitung