HTML-loendid on igavad. Nad ei tee seda do palju, nii et me ei mõtle neile tegelikult hoolimata sellest, kui laialdaselt neid kasutatakse. Ja me saame endiselt teha samu asju, mida oleme alati teinud nende kohandamiseks, nagu markerite eemaldamine, järjekorra muutmine ja kohandatud loendurite tegemine.

Siiski on loendite kasutamisel mõned "uuemad" asjad, sealhulgas ohud. Ohud on enamasti väikesed, kuid palju tavalisemad, kui arvate. Me jõuame nende juurde, lisaks veel mõned uued asjad, mida saame loendite abil teha, ja isegi uued viisid vanadele lahendustele lähenemiseks.

Selguse huvides on need HTML-elemendid, millest me räägime:

• Järjestatud nimekirjad <ol>
• Järjestamata loendid <ul>
• Kirjeldusloendid <dl>
• Interaktiivsed loendid <menu>

Järjestatud loendid, järjestamata loendid ja interaktiivsed loendid sisaldavad loendi üksusi (<li>), mis kuvatakse vastavalt sellele, millist loendit me käsitleme. Järjestatud nimekiri (<ol>) kuvab loendiüksuste kõrval numbreid. Järjestamata loendid (<ul>) ja menüüelemendid (<menu>) kuvab loendiüksuste kõrval täppe. Me nimetame neid loendimarkeriteks ja neid saab isegi stiilida kasutades ::marker pseudoelement. Kirjeldusloendid kasutavad kirjeldavaid termineid (<dt>) ja kirjelduse üksikasjad (<dd>) selle asemel <li> ja neil pole loendimarkereid. Neid peaks kasutama metaandmete ja sõnastike kuvamiseks, kuid ma ei saa öelda, et oleksin neid kunagi looduses näinud.

Alustame lihtsatest asjadest - kuidas õigesti (vähemalt minu arvates) loendi stiile lähtestada. Pärast seda vaatame paar juurdepääsetavuse probleemi, enne kui heidame valgust rasketele <menu> element, mille õppimine võib olla üllatunud… on tegelikult ka loendi tüüp!

Loendi stiilide lähtestamine

Brauserid rakendavad automaatselt oma kasutajaagendi stiile, et aidata luua loendite visuaalset struktuuri. See võib olla suurepärane! Aga kui tahame alustada tühjalt lehelt, mis ei sisalda stiiliarvamusi, siis peame need stiilid esmalt lähtestama.

Näiteks saame loendiüksuste kõrval olevad markerid üsna lihtsalt eemaldada. Siin pole midagi uut:

/* Zap all list markers! */
ol, ul, menu { list-style: none;
}

Kuid tänapäevasel CSS-il on uusi viise, mis aitavad meil sihtida konkreetseid loendijuhtumeid. Oletame, et tahame kustutada markerid kõigist loenditest, välja arvatud juhul, kui need loendid kuvatakse pikas vormis sisu, nagu artikkel. Kui kombineerime uuemate CSS-i pseudoklassi funktsioonide võimsused :where() ja :not(), saame need juhtumid isoleerida ja lubada markerid järgmistel juhtudel:

/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) { list-style: none;
}

Miks kasutada :where() asemel :is()? Spetsiifilisus :where() on alati null, kusjuures :is() võtab oma selektorite loendis kõige spetsiifilisema elemendi eripära. Niisiis, kasutades :where() on vähem jõuline viis asjadest üle alistamiseks ja seda saab ise hõlpsasti alistada.

UA stiilid rakendavad ka polsterdust loendiüksuse sisule selle markerist eraldamiseks. Jällegi, see on mõnel juhul päris kena pakkumine kohe karbist välja võttes, kuid kui me juba eemaldame loendi markerid nagu eespool, siis võime ka selle polstri ära pühkida. See on veel üks juhtum :where():

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

OK, see takistab ilma markeriteta loendiüksuste ilmumist ruumis hõljuma. Kuid me viskasime lapse koos vanniveega välja ja eemaldasime polstri kõigil juhtudel, kaasa arvatud need, mille me varem isoleerisime. <article>. Niisiis, nüüd ripuvad need markeritega loendid sisukasti servast välja.

Pange tähele, et UA stiilid rakendavad lisa 40px Euroopa <menu> element.

Nii et see, mida me tahame teha, on vältida loendi markerite "rippumist" väljaspool konteinerit. Me saame selle parandada list-style-position Vara:

Või mitte… võib-olla taandub see stiilieelistusest?

Uuemad juurdepääsetavuse probleemid loenditega

Kahjuks on loenditega seoses paar juurdepääsuprobleemi - isegi praegusel ajal. Üks murekoht on taotlemise tulemus list-style: none; nagu tegime UA stiilide lähtestamisel.

Lühidalt, Safari ei loe järjestatud ja järjestamata loendeid stiiliga list-style: none tegelike loenditena, näiteks ekraanilugejaga sisus navigeerimisel. Teisisõnu, markerite eemaldamine eemaldab ka loendi semantilise tähenduse. The parandus selle paranduse jaoks seda rakendada an ARIA list rolli nimekirjas ja a listitem rolli loendiüksustele nii et ekraanilugejad võtavad need üles:

<ol style="list-style: none;" role="list"> <li role="listItem">...</li> <li role="listItem">...</li> <li role="listItem">...</li>
</ol> <ul style="list-style: none;" role="list"> <li role="listItem">...</li> <li role="listItem">...</li> <li role="listItem">...</li>
</ul>

Kummaline, Safari peab seda funktsiooniks pigem viga. Põhimõtteliselt teatavad kasutajad, et ekraanilugejad kuulutasid välja liiga palju loendeid (kuna arendajad kipuvad neid ülekasutama), nii et nüüd saavad ainult need, millel on role="list" teatavad ekraanilugejad, mis tegelikult polegi nii veider. Scott O'Hara on üksikasjalik ülevaade kuidas see kõik alla läks.

Teine juurdepääsetavuse probleem ei ole meie endi loodud (hurraa!). Nii et teate, kuidas sa peaksid lisada aria-label et <section> elemendid ilma pealkirjadeta? Noh, mõnikord on mõttekas teha sama loendiga, mis ei sisalda pealkirja elementi, mis aitab loendit kirjeldada.

<!-- This list is somewhat described by the heading -->
<section> <h2>Grocery list</h2> <ol role="list"> <!-- ... --> </ol>
</section> <!-- This list is described by the aria-label -->
<ol role="list" aria-label="Grocery list"> <!-- ... -->
</ol>

Sa absoluutselt ei tuleb kasutada kumbagi meetodit. Pealkirja või ARIA-sildi kasutamine on lihtsalt lisatud kontekst, mitte nõue – testige oma veebisaite kindlasti ekraanilugejatega ja tehke seda, mis pakub olukorra jaoks parimat kasutuskogemust.

Mõnevõrra seotud uudistes kirjutas Eric Bailey suurepärase kirjatüki miks ja kuidas ta arvab aria-label olla koodilõhn.

Oota, <menu> on ka nimekiri?

OK, nii et tõenäoliselt mõtlete kõige selle üle <menu> elemendid, mida olen koodinäidetesse libisenud. See on tegelikult ülilihtne; menüüd on järjestamata loendid, välja arvatud see, et need on mõeldud interaktiivsete üksuste jaoks. Need kuvatakse juurdepääsetavuse puule isegi järjestamata loenditena.

Semantilise veebi algusaegadel uskusin ma ekslikult, et menüüd on sellised <nav>s, enne kui uskusite, et need on mõeldud kontekstimenüüde (või "tööriistaribade" nagu spetsifikatsioon ütleb), sest seda ütlesid HTML-i spetsifikatsiooni varased versioonid. (MDN-il on huvitav kirjutis kõigi sellega seotud aegunud asjade kohta <menu> kui olete üldse huvitatud.)

Tänapäeval on see aga semantiline viis menüüde kasutamiseks:

<menu aria-label="Share article"> <li><button>Email</button></li> <li><button>Twitter</button></li> <li><button>Facebook</button></li>
</menu>

Isiklikult arvan, et selle jaoks on mõned head kasutusjuhtumid <menu>. See viimane näide näitab sotsiaalse jagamise nuppude loendit, mis on mähitud märgistatud <menu> element, mille tähelepanuväärne aspekt on see, et silt „Artikli jagamine” annab olulisel määral konteksti, mis aitab kirjeldada nuppude tegevust.

Kas menüüd on tingimata vajalikud? Ei. Kas nad on HTML-i maamärgid? Kindlasti mitte. Kuid need on olemas, kui teile vähem meeldib <div>s ja teile tundub, et komponent võiks kasutada an aria-label lisakonteksti jaoks.

Veel midagi?

Jah, seal on ka eelmainitu <dl> (kirjeldusloendi) element, aga Näib, et MDN ei pea neid loenditeks samamoodi — see on termineid sisaldavate rühmade loend — ja ma ei saa öelda, et oleksin neid päriselt kasutuses näinud. MDN-i kohaselt peaks neid kasutama metaandmete, sõnastike ja muud tüüpi võtme-väärtuspaaride jaoks. Ma lihtsalt väldiksin neid põhjusel, et kõik ekraanilugejad teatavad neist erinevalt.

Kuid ärgem lõpetagem asju negatiivse noodiga. Siin on nimekiri ülilahedatest asjadest, mida saate loenditega teha.

• Münditark. Euroopa parim Bitcoini ja krüptobörs.Kliki siia
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
• Allikas: https://css-tricks.com/newer-things-to-know-about-good-ol-html-lists/