Tampilan beberapa cara yang berguna dan kreatif untuk menata 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. Kumpulan konser mendatang di sebuah tempat? Sangat mungkin berupa daftar. Proses pemesanan multi-langkah? Kemungkinan besar daftar. Galeri gambar? Bahkan, hal itu dapat dianggap sebagai daftar gambar dengan teks.
Dalam artikel ini, kita akan membahas berbagai jenis daftar HTML yang tersedia di web dan kapan harus menggunakannya, termasuk beberapa atribut yang mungkin belum 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 saat item perlu dikelompokkan secara semantik. Teknologi pendukung (seperti pembaca layar) akan memberi tahu pengguna bahwa ada daftar, dan jumlah item. Jika Anda memikirkan, misalnya, petak produk di situs belanja, mengetahui informasi ini akan sangat membantu. Oleh karena itu, menggunakan elemen daftar mungkin merupakan pilihan yang baik.
Mencantumkan jenis
Dalam hal markup, kita memiliki pilihan tiga elemen daftar yang berbeda:
- Daftar yang tidak diurutkan
- Daftar yang diurutkan
- Daftar deskripsi
Pilihan yang akan diambil bergantung pada kasus penggunaan.
Daftar yang tidak diurutkan (ul)
Elemen daftar tidak teratur (<ul>) paling berguna jika item dalam daftar tidak sesuai dengan urutan tertentu. Secara default, opsi ini akan ditampilkan sebagai daftar berbutir. Contohnya adalah daftar belanja, yang urutannya tidak penting.
Contoh yang lebih umum di web adalah menu navigasi. Saat mem-build 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 jika urutan item dianggap penting, seperti proses multi-langkah. Secara default, item daftar diberi nomor. Contohnya adalah serangkaian petunjuk, dengan langkah-langkah yang harus diselesaikan secara berurutan.
Elemen <ol> dan <ul> hanya boleh 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 dapat mencakup glosarium istilah, atau mungkin menu restoran. Daftar deskripsi tidak ditampilkan dengan penanda apa pun secara default, meskipun browser cenderung membuat indentasi pada elemen <dd>.
Di HTML, Anda diizinkan untuk mengelompokkan istilah dengan deskripsi yang menyertainya menggunakan <div>. Ini 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 visual daftar sederhana
Salah satu penggunaan daftar yang paling sederhana adalah dalam blok teks isi. Sering kali daftar sederhana ini tidak memerlukan gaya yang rumit, tetapi kita mungkin ingin menyesuaikan penanda daftar urut atau tidak urut sampai batas tertentu, seperti dengan warna merek, atau dengan menggunakan gambar kustom untuk buletin. Kita dapat melakukan banyak hal dengan list-style dan elemen pseudo ::marker.
::marker
Selain memberi penanda daftar beberapa gaya dasar, kita dapat membuat peluru siklus. Di sini, kita menggunakan tiga URL gambar yang berbeda untuk nilai content dari elemen pseudo ::marker, yang menambah kesan tulisan tangan pada contoh daftar belanja kita (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 khusus
Untuk beberapa daftar yang diurutkan, kita mungkin ingin menggunakan nilai penghitung, tetapi menambahkan nilai lain ke nilai tersebut. Kita dapat menggunakan penghitung list-item sebagai nilai untuk properti content penanda dan menambahkan konten lainnya:
::marker {
content: counter(list-item) '🐈 ';
}
Penghitung kita otomatis bertambah satu, tetapi kita dapat mengizinkannya bertambah dengan nilai yang berbeda jika kita memilih, dengan menetapkan properti counter-increment pada item daftar. Misalnya, langkah ini akan menambahkan penghitung kita sebanyak tiga setiap kali:
li {
counter-increment: list-item 3;
}
Ada banyak hal lain yang dapat kita pelajari dengan penghitung. Artikel Daftar, Penanda, dan Penghitung CSS menjelaskan beberapa kemungkinan secara lebih mendetail.
Batasan gaya visual ::marker
Terkadang, kita mungkin ingin lebih mengontrol posisi dan gaya penanda. Misalnya, Anda tidak dapat memosisikan penanda menggunakan flexbox atau petak, yang terkadang dapat menjadi kelemahan jika Anda memerlukan beberapa perataan lainnya. ::marker mengekspos sejumlah properti CSS untuk penataan gaya. Jika desain kita memerlukan sesuatu selain 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 sama sekali berbeda dari gaya default. Hal ini sering terjadi pada menu navigasi, misalnya, saat 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 semu ::before adalah cara umum untuk membuat penanda daftar kustom sebelum ::marker muncul. Namun, bahkan sekarang, fitur ini dapat memberi kita lebih banyak fleksibilitas, saat diperlukan, untuk gaya visual daftar yang kompleks.
Seperti ::marker, kita dapat menambahkan gaya buletin kustom 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 memosisikan elemen tersebut dengan relatif mudah menggunakan flexbox, dan hal ini membuka lebih banyak kemungkinan untuk penyelarasan. Misalnya, kita dapat mengganti posisi penanda:
Jika kita menata gaya daftar urut menggunakan elemen ::before, kita mungkin juga ingin menggunakan penghitung untuk menambahkan penanda numerik.
li::before {
counter-increment: list-item;
content: counter(list-item);
}
Menggunakan ::before, bukan ::marker, memungkinkan kita memiliki akses penuh ke properti CSS untuk gaya kustom, serta mengizinkan animasi dan transisi—yang dukungannya terbatas untuk ::marker.
Mencantumkan atribut
Elemen daftar berurutan menerima beberapa atribut opsional, yang dapat membantu kita dalam berbagai kasus penggunaan.
Daftar terbalik
Jika 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 cukup menggunakan atribut reversed di HTML. Saya berpendapat bahwa secara umum penggunaan atribut reversed lebih masuk akal secara semantik daripada menambahkan penghitung secara negatif di CSS, kecuali jika penghitung tersebut murni bersifat presentasi. Jika CSS gagal dimuat, Anda akan tetap melihat angka yang menghitung mundur dengan benar di HTML. Selain itu, kita perlu mempertimbangkan cara pembaca layar menafsirkan daftar.
Lihat demo 10 album terpopuler tahun 2021 ini. Jika penghitung bertambah hanya dengan CSS, seseorang yang mengakses halaman menggunakan pembaca layar mungkin menyimpulkan bahwa jumlahnya 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 ekstra dari kami. Namun, jika kita membuat penanda daftar kustom menggunakan elemen pseudo ::before, kita perlu menyesuaikan penghitung. Kita hanya perlu menginstruksikan penghitung item daftar untuk bertambah secara 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.
Memisahkan daftar
Atribut start memungkinkan kita menentukan nilai numerik yang harus dimulai dari daftar. Salah satu cara yang dapat berguna adalah jika Anda ingin membagi daftar menjadi beberapa grup.
Mari kita buat contoh 10 album teratas. Mungkin kita sebenarnya ingin menghitung mundur 20 album teratas, tetapi dalam grup yang terdiri dari 10 album. Di antara kedua kelompok tersebut, terdapat beberapa konten halaman lain.
Kita harus membuat dua daftar terpisah di HTML, tetapi bagaimana cara memastikan penghitungnya akan benar? Karena markup kami saat ini berlaku, kedua daftar akan menghitung mundur dari 10 menjadi 1, dan ini tidak sesuai dengan keinginan kita. Namun, dalam HTML, kita dapat menentukan nilai atribut start. Jika kita menambahkan nilai start 20 ke daftar pertama, penanda akan diperbarui lagi secara otomatis.
<ol reversed start="20">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Tata letak daftar multi-kolom
Tata letak multi-kolom terkadang cocok untuk daftar kita, seperti yang dapat Anda lihat dari demo sebelumnya. Dengan menetapkan lebar kolom, kita dapat memastikan daftar kita otomatis responsif, yang ditempatkan di atas dua kolom atau lebih hanya jika ada cukup ruang. Kita juga dapat menetapkan jarak antarkolom, dan untuk mempercantik tampilan, tambahkan column-rule bergaya (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 daftar item—tidak selalu berupa efek yang kita inginkan.
Kita dapat mencegah jeda paksa ini menggunakan break-inside: avoid pada item daftar:
li {
break-inside: avoid;
}
Properti kustom
Properti kustom CSS membuka berbagai kemungkinan untuk menata gaya daftar. 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) 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 lebih memungkinkan, terutama jika kita menggunakan bahasa template. Contoh ini menunjukkan cara menyetelnya 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 menunjukkan progres melalui daftar dengan berbagai cara. Salah satu caranya adalah dengan 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 saat daftar berlangsung, dengan menggunakan fungsi warna hsl(). Kita dapat menghitung nilai hue menggunakan properti kustom.
Gaya visual 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 kita dalam bentuk petak. Menetapkan display: grid pada daftar tanpa wrapper div di sekitar setiap grup berarti istilah dan deskripsi kami ditempatkan di sel petak yang berbeda. Terkadang hal ini berguna, seperti dalam contoh berikut, yang menampilkan menu pai dengan deskripsinya.
Kita dapat menentukan petak pada daftar itu sendiri dan memastikan bahwa istilah dan deskripsi akan selalu sejajar dalam kolom, dengan lebar kolom ditentukan oleh istilah terpanjang.
Di sisi lain, jika kita ingin mengelompokkan istilah dengan gaya kartu deskripsinya secara jelas, wrapper <div> sangat membantu.
Resource
- Daftar Pengantar daftar dan ::marker
- Penanda kustom menggunakan ::marker
- Daftar CSS dengan penghitung