Neuere Dinge, die Sie über gute alte HTML -Listen wissen sollten

HTML -Listen werden häufig als relativ eintönig angesehen und haben nur begrenzte Funktionen, sodass wir ihre breite Anwendung häufig ignorieren. Trotzdem können wir einige alte Möglichkeiten verwenden, um die Liste anzupassen, z. B. das Entfernen von Tags, Inverting -Aufträgen und das Erstellen von benutzerdefinierten Zählern.

Es gibt jedoch auch einige "neue" Wissenspunkte bei der Verwendung der Liste, einschließlich potenzieller Risiken, die Aufmerksamkeit erfordern. Die meisten dieser Risiken sind unbedeutend, aber sie treten viel häufiger auf als Sie denken. Wir werden diese Risiken sowie einige neue Nutzung von Listen sowie einige neue Ideen zur Verbesserung der alten Methoden untersuchen.

Um klar zu sein, gehören die in diesem Artikel diskutierten HTML -Elemente:

• sortierte Liste
• ungeordnete Liste
• Beschreibungsliste <dl></dl>
• Interaktive Liste <menu></menu>

sortierte Listen, nicht ordnungsgemäße Listen und interaktive Listen enthalten alle Listenelemente ( <code><li> ), und ihre Anzeige hängt vom Listentyp ab. Bestellte Listen (<ol></ol>) Zeigen Sie als Listenelemente ( <code><ul></ul> ) und Menüelemente (<menu></menu>) Kugeln neben Listenelementen anzeigen. Wir nennen diese "Listen-Tags" und können sie sogar mit dem ::marker pseudo-Element stylen. Beschreibungslisten verwenden beschreibende Begriffe (<dt></dt>) und Beschreibung Details (<dd></dd>) und nicht Zahlen oder Kugeln und werden häufig zur Anzeige von Metadaten und Vokabeln verwendet, sind jedoch in praktischen Anwendungen nicht üblich.

Beginnen wir mit dem einfachen Teil-wie sie (zumindest meiner Meinung nach) den Listenstil richtig zurücksetzen. Danach werden wir einige Barrierefreiheitsprobleme untersuchen und uns dann auf die schwer fassbaren <menu></menu> Elemente konzentrieren, die Sie vielleicht überrascht sein können ... es ist eigentlich auch eine Art Liste!

List -Style

zurücksetzen

Der Browser wendet automatisch seinen eigenen Benutzeragentenstil an, um die visuelle Struktur der Liste zu unterstützen. Das ist manchmal sehr nützlich! Aber wenn wir mit einem leeren Zustand ohne Stile beginnen wollen, müssen wir zuerst diese Stile zurücksetzen.

Zum Beispiel können wir den Marker neben dem Listenelement einfach entfernen. Nichts Neues hier:

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

Aber das moderne CSS bietet neue Möglichkeiten, um bestimmte Listeninstanzen zu finden. Nehmen wir an, wir möchten alle Notenlisten löschen, aber die Markierungen behalten, wenn diese Listen in langen Inhalten (z. B. Artikeln) angezeigt werden. Wenn wir die neueren CSS-Pseudo-Klasse-Funktionen :where() und :not() verwenden, können wir diese Instanzen isolieren und in diesen Fällen Tags zulassen:

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

Warum :where() statt :is()? Die Spezifität von where() ist immer Null, während :is() die Spezifität des spezifischsten Elements in seiner Auswahlliste einnimmt. Daher ist die Verwendung von :where() eine weniger obligatorische Abdeckungsmethode und ist leicht für sich selbst abgedeckt.

ua stile stilt auch polsting, um den Inhalt des Listenelements von seinen Tags zu trennen. Dies ist in einigen Fällen ein schöner Standard -Effekt, aber wenn wir das Listen -Markup wie oben entfernt haben, können wir auch die Polsterung ebenfalls löschen. Dies ist ein weiterer Anwendungsfall für :where():

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

OK, dies verhindert, dass die nicht markierten Listenelemente im Raum suspendiert werden. Aber wir waren etwas übertrieben und entfernten die Polsterung in allen Fällen, einschließlich derer, die wir zuvor in <article></article> isoliert hatten. Jetzt sind diese Listen mit Markierungen ein wenig vor dem Rand des Inhaltsboxs aufgehängt.

Beachten Sie, dass der UA -Stil zusätzliche 40px -Polster auf das <menu></menu> Element anwendet. Wir müssen also verhindern, dass der Listenmarker außerhalb des Behälters "hängen". Wir können das Attribut list-style-position verwenden, um dieses Problem zu lösen:

oder nicht ... Vielleicht hängt es von Stilpräferenzen ab?

Neue Zugänglichkeitsprobleme für Listen

Leider gibt es auch in der modernen Zeit einige Zugänglichkeitsprobleme mit Listings. Ein Problem ist das Ergebnis der Anwendung von list-style: none;, wie wir es beim Zurücksetzen des UA -Stils getan haben.

Kurz gesagt, Safari liest keine geordneten und ungeordneten Listen, die list-style: none; für die tatsächliche Liste verwenden, z. B. beim Navigieren von Inhalten mit einem Bildschirmleser. Mit anderen Worten, das Entfernen des Tags beseitigt auch die semantische Bedeutung der Liste. Die Lösung besteht darin, die Rollen der ARIA -Listen in der Liste anzuwenden und Listenelementrollen auf das Listenelement zu verwenden, damit der Bildschirmleser sie erkennen kann:

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

Seltsamerweise behandelt Safari dies eher als Feature als als Fehler. Grundsätzlich werden Benutzer berichten, dass Bildschirmleser zu viele Listen angekündigt haben (weil Entwickler sie neigen, sie zu überbeanspruchen). Jetzt ist es jetzt nicht überraschend, dass nur die Listen mit role="list" von Bildschirmlesern angekündigt werden. Scott O’Hara beschreibt, wie dies alles im Detail geschah.

Das zweite Problem mit Barrierefreiheit wurde nicht von uns verursacht (Lang Live!). Wussten Sie, dass Sie Elementen ohne Titel aria-label addieren sollten? Nun, es ist manchmal sinnvoll, dasselbe für eine Liste zu tun, die keine Titelelemente enthält, die die Liste beschreiben.

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

Sie müssen unbedingt nicht beide Methoden anwenden. Durch die Verwendung eines Titels oder eines ARIA -Tags fügt nur einen Kontext hinzu, nicht um eine Anforderung. Testen Sie Ihre Website mit einem Bildschirmleser und wählen Sie die Benutzererfahrung, die der aktuellen Situation am besten entspricht. In verwandten Nachrichten schrieb Eric Bailey einen Artikel darüber, warum und wie man denkt

ist ein Codegeruch.

Warten Sie, <menu></menu> ist auch eine Liste?

Ok, also wundern Sie sich vielleicht über alle <menu></menu> Elemente, die ich in die Code -Beispiele eingefügt habe. Dies ist eigentlich ganz einfach; Sie werden sogar als nicht ordnungsgemäße Listen im Accessibility -Baum angezeigt. In den frühen Tagen des semantischen Webs dachte ich fälschlicherweise, die Menüs seien ähnlich wie <nav></nav> und dachte dann, sie wurden für Kontextmenüs (oder die "Symbolleiste" verwendet, wie die Spezifikation es nennt), da eine frühere Version der HTML -Spezifikation dies sagte. (Wenn Sie interessiert sind, hat MDN eine interessante Einführung in alle veralteten Inhalte im Zusammenhang mit <menu></menu>.)

Heute ist dies jedoch die semantische Methode, um Menüs zu verwenden:

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

persönlich denke ich, <menu></menu> hat einige gute Anwendungsfälle. Das letzte Beispiel zeigt eine Liste der im Element <menu></menu> mit Tags enthaltenen Social Sharing -Schaltflächen, und es ist erwähnenswert, dass das TS -Tag der Freigabeartikel viel Kontext beiträgt und die Funktionalität der Schaltfläche beschreibt. Ist das Menü unbedingt notwendig? NEIN. Sind sie HTML -Meilensteine? Absolut nicht. Wenn Sie jedoch weniger <div> mögen und der Meinung sind, dass Komponenten <code>aria-label verwenden können, um einen zusätzlichen Kontext bereitzustellen, dann sind sie da.

Andere?

Ja, es gibt die oben genannten <dl></dl> (Beschreibungsliste) Elemente, aber MDN scheint nicht zu glauben, dass sie mit anderen Listen übereinstimmen - es ist eine Gruppenliste von Begriffen - und ich kann nicht sagen, dass ich tatsächlich gesehen habe, dass sie verwendet werden. Laut MDN sollten sie für Metadaten, Vokabeln und andere Arten von Schlüsselwertpaaren verwendet werden. Ich würde sie vermeiden, weil alle Bildschirmleser sie anders ankündigen. Aber lasst uns nicht mit negativen Kommentaren enden. Hier sind einige wirklich coole Dinge, die Sie mit einer Liste machen können:

• Verzeichnis erstellen
• Ereigniszeitleiste
visualisieren
• Liste in horizontaler Komma -Trennungsliste
konvertieren
• Stil-Tags (ich persönlich mag das nicht, aber es ist immer noch cool)