Perkara yang lebih baru untuk mengetahui mengenai senarai HTML yang baik

senarai HTML sering dianggap agak membosankan dan mempunyai fungsi yang terhad, jadi kami sering mengabaikan aplikasi luas mereka. Namun, kita boleh menggunakan beberapa cara lama untuk menyesuaikan senarai, seperti mengeluarkan tag, pesanan terbalik, dan membuat kaunter tersuai.

Walau bagaimanapun, terdapat juga beberapa mata pengetahuan "baru" apabila menggunakan senarai, termasuk risiko yang berpotensi yang memerlukan perhatian. Kebanyakan risiko ini tidak penting, tetapi ia berlaku lebih kerap daripada yang anda fikirkan. Kami akan meneroka risiko ini, serta beberapa penggunaan senarai baru, dan juga beberapa idea baru untuk meningkatkan kaedah lama.

Jelas, unsur -unsur HTML yang dibincangkan dalam artikel ini termasuk:

Senarai Sorted

• Senarai Tidak Beratur
• Senarai keterangan
• <dl></dl> Senarai interaktif
• <menu></menu>
Senarai yang disusun, senarai yang tidak teratur, dan senarai interaktif semuanya mengandungi item senarai (

), dan paparan mereka bergantung pada jenis senarai. Senarai yang diperintahkan (

) Nombor paparan di sebelah senarai item yang tidak teratur ( <code><li> ) dan elemen menu (<ol></ol>) Paparan peluru di sebelah item senarai. Kami panggil "tag senarai" ini dan kami juga boleh menggunakannya menggunakan pseudo-elemen <ul></ul>. Senarai Keterangan Gunakan istilah deskriptif (<menu></menu>) dan keterangan butiran (), bukannya nombor atau peluru, dan sering digunakan untuk memaparkan metadata dan perbendaharaan kata, tetapi tidak biasa dalam aplikasi praktikal. ::marker <dt></dt> mari kita mulakan dengan bahagian yang mudah-bagaimana dengan betul (sekurang-kurangnya pada pendapat saya) menetapkan semula gaya senarai. Selepas itu, kami akan meneroka beberapa isu kebolehcapaian dan kemudian memberi tumpuan kepada elemen -elemen yang sukar difahami, yang mungkin anda terkejut untuk mencari ... itu sebenarnya sejenis senarai! <dd></dd>

Reset List Style

<menu></menu> Pelayar secara automatik menggunakan gaya ejen pengguna sendiri untuk membantu struktur visual senarai. Ini kadang -kadang sangat berguna! Tetapi jika kita mahu memulakan dengan keadaan kosong tanpa gaya, maka kita perlu menetapkan semula gaya tersebut terlebih dahulu.

Sebagai contoh, kita boleh dengan mudah mengeluarkan penanda di sebelah item senarai. Tidak ada yang baru di sini:

Tetapi CSS moden menyediakan cara baru untuk membantu kami mencari contoh senarai tertentu. Katakan kami ingin membersihkan semua senarai tanda, tetapi simpan tanda jika senarai ini muncul dalam kandungan yang panjang (seperti artikel). Jika kita menggunakan fungsi kelas pseudo CSS yang lebih baru

dan

, kita boleh mengasingkan contoh-contoh ini dan membenarkan tag dalam kes ini:

/* 清除所有列表标记！ */
ol, ul, menu {
  list-style: none;
}

:where() mengapa menggunakan :not() bukan

? Kekhususan

/* 对于不是文章中的列表... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
  list-style: none;
}

sentiasa sifar, manakala

mengambil kekhususan elemen yang paling spesifik dalam senarai pemilihnya. Oleh itu, dengan menggunakan :where() adalah kaedah liputan yang kurang wajib dan mudah dilindungi dengan sendirinya. :is()

gaya UA juga menggunakan padding untuk memisahkan kandungan item senarai dari tagnya. Ini adalah kesan lalai yang baik dalam beberapa kes, tetapi jika kita telah mengeluarkan markup senarai seperti di atas, kita juga boleh membersihkan padding juga. Ini adalah satu lagi kes penggunaan untuk :where():

/* 清除所有列表标记！ */
ol, ul, menu {
  list-style: none;
}

OK, ini akan menghalang item senarai yang tidak bertanda daripada kelihatan digantung di ruang angkasa. Tetapi kami agak berlebihan, mengeluarkan padding dalam semua kes, termasuk yang kami telah terpencil dalam <article></article>. Jadi, sekarang senarai dengan penanda sedikit digantung di luar tepi kotak kandungan.

Perhatikan bahawa gaya UA menggunakan padding tambahan 40px ke elemen <menu></menu>. Jadi apa yang perlu kita lakukan ialah menghalang penanda senarai dari "menggantung" di luar bekas. Kita boleh menggunakan atribut list-style-position untuk menyelesaikan masalah ini:

atau tidak ... mungkin ia bergantung pada keutamaan gaya?

isu kebolehaksesan baru untuk senarai

Malangnya, walaupun pada zaman moden, terdapat beberapa isu kebolehcapaian dengan penyenaraian. Satu masalah adalah hasil penggunaan list-style: none;, seperti yang kita lakukan ketika menetapkan semula gaya UA.

Singkatnya, Safari tidak membaca senarai yang diperintahkan dan tidak teratur yang menggunakan

ke senarai sebenar, seperti ketika menavigasi kandungan dengan pembaca skrin. Dalam erti kata lain, mengeluarkan tag juga menghilangkan makna semantik senarai. Penyelesaiannya adalah untuk memohon peranan senarai ARIA dalam senarai dan memohon peranan item senarai pada item senarai supaya pembaca skrin dapat mengenali mereka: list-style: none;

/* 对于不是文章中的列表... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
  list-style: none;
}

Anehnya, Safari merawat ini sebagai ciri dan bukannya bug. Pada asasnya, pengguna akan melaporkan bahawa pembaca skrin telah mengumumkan terlalu banyak senarai (kerana pemaju cenderung terlalu banyak menggunakannya), jadi sekarang, tidaklah mengejutkan bahawa hanya senarai dengan

akan diumumkan oleh pembaca skrin. Scott O'Hara menerangkan bagaimana semua ini berlaku secara terperinci. role="list"

Isu akses kedua tidak disebabkan oleh kami (Long Live!). Jadi, adakah anda tahu anda perlu menambah

kepada elemen tanpa tajuk? Nah, kadang -kadang masuk akal untuk melakukan perkara yang sama untuk senarai yang tidak mengandungi elemen tajuk yang membantu menggambarkan senarai. aria-label

:where(ol, ul, menu) {
  padding-left: 0; /* 或 padding-inline-start */
}

Anda benar -benar tidak perlu menggunakan kedua -dua kaedah. Menggunakan tajuk atau tag Aria hanya menambah konteks, bukan keperluan - pastikan untuk menguji laman web anda dengan pembaca skrin dan pilih pengalaman pengguna yang paling sesuai dengan keadaan semasa.

Dalam berita yang berkaitan, Eric Bailey menulis artikel tentang mengapa dan bagaimana berfikir adalah bau kod.

tunggu,

juga senarai? <menu></menu>

OK, jadi, anda mungkin tertanya -tanya tentang semua unsur -unsur

yang saya telah masukkan dalam contoh kod. Ini sebenarnya agak mudah; Mereka juga dipaparkan sebagai senarai yang tidak teratur dalam pokok aksesibiliti. Pada hari -hari awal Web Semantik, saya tersilap memikirkan menu adalah serupa dengan <menu></menu> dan kemudian menganggap mereka digunakan untuk menu konteks (atau "bar alat" sebagai spesifikasi memanggilnya), kerana itulah versi awal spesifikasi HTML. (Jika anda berminat, MDN mempunyai pengenalan yang menarik untuk semua kandungan yang tidak ditetapkan yang berkaitan dengan <nav></nav>.) <menu></menu> hari ini, bagaimanapun, ini adalah cara semantik menggunakan menu:

secara peribadi, saya fikir

/* 清除所有列表标记！ */
ol, ul, menu {
  list-style: none;
}

mempunyai beberapa kes penggunaan yang baik. Contoh terakhir menunjukkan senarai butang perkongsian sosial yang terkandung dalam elemen

dengan tag, dan perlu diperhatikan bahawa tag artikel saham menyumbang banyak konteks dan membantu menggambarkan fungsi butang. Adakah menu benar -benar diperlukan? Tidak Adakah mereka tonggak HTML? Tidak semestinya. Tetapi jika anda suka kurang <menu></menu> dan anda fikir komponen boleh menggunakan <menu></menu> untuk menyediakan konteks tambahan, maka mereka berada di sana. <div> <code>aria-label Lain -lain?

Ya, terdapat unsur -unsur (senarai keterangan) yang disebutkan di atas, bagaimanapun, MDN nampaknya tidak menganggap mereka sama dengan senarai lain -itu adalah senarai istilah kumpulan -dan saya tidak boleh mengatakan bahawa saya sebenarnya melihat mereka digunakan. Menurut MDN, mereka harus digunakan untuk metadata, perbendaharaan kata, dan lain-lain jenis pasangan nilai utama. Saya akan mengelakkan mereka kerana semua pembaca skrin mengumumkannya secara berbeza. Tetapi jangan berakhir dengan komen negatif. Berikut adalah beberapa perkara yang sangat keren yang boleh anda lakukan dengan senarai:

<dl></dl> Buat direktori

Visualisasikan garis masa peristiwa
Tukar Senarai ke Senarai Terpisah Koma Horizontal
tag gaya (saya secara peribadi tidak suka ini, tetapi masih sejuk)