Geordnete Listen mit Unicode Symbolen

Geordnete Listen gehören zu den ältesten und semantisch reichhaltigsten Elementen in HTML. Wann immer Sie eine Sequenz oder Rangfolge kommunizieren müssen, hilft Ihnen das <ol>-Tag. Das Standardaussehen des <ol>-Tags zeigt Zahlen neben jedem Listenelement an. Sie können die Eigenschaft list-style-type in CSS verwenden, um den Standard auf römische Ziffern oder Buchstaben des Alphabets zu ändern. Wenn Sie es exotisch mögen, können Sie sogar Nummerierungen aus anderen Kulturen wie Hebräisch oder Griechisch verwenden. Die vollständige Liste der verfügbaren Werte ist gut dokumentiert und einfach zu verwenden.

Kürzlich sah ich eine Gelegenheit, Würfel anstelle von Zahlen für mehrere geordnete Listen zu verwenden, die die Funktionen eines von mir erstellten HTML5-Spiels erklären namens Triple Score Bopzee. Um mein Ziel zu erreichen, experimentierte ich zunächst mit einer nun bekannten Technik, bei der eine kleine Bilddatei als Hintergrund für den li::before-Selektor in einer Liste verwendet wird. Eine Änderung, die ich am üblichen Verfahren vornahm, war, dass ich mich entschied, list-style-type: none zu vermeiden und stattdessen list-style-type: decimal zu verwenden und list-style-image auf ein 1×1 transparentes GIF zu setzen. Diese kleine Änderung hilft der Seite, Barrierefreiheitstests zu bestehen, da Screenreader die Liste immer noch als gültige nummerierte Liste erkennen.

Ich habe ein Pen erstellt, um diese klassische Technik mit GIFs von Zahlen zu demonstrieren, die die Kugeln von vier großen Sportarten enthalten.

Siehe das Pen Ordered List with Images von Steven Estrella (@sgestrella) auf CodePen.

Diese Technik hätte für meine Bedürfnisse auf der Bopzee-Website funktioniert, aber ich wurde neugierig, wie ich es ohne Bilder machen könnte. Die Antwort war, die Unicode-Symbole \2680 bis \2685 für die sechs Würfel zu verwenden. Ich habe einen Klassen-Selektor namens „dicey“ erstellt und die Pseudoselektoren nth-child und before verwendet, um das Unicode-Zeichen für jedes Listenelement zu positionieren und auszuwählen. Ich habe einen Link zur Normalize.css-Bibliothek hinzugefügt, um die subtilen Browserunterschiede zu glätten.

Hier ist das Pen für die abgeschlossene Würfelliste

Siehe das Pen Ordered Lists with Unicode Dice von Steven Estrella (@sgestrella) auf CodePen.

Also für eine Liste wie diese

<ol class="dicey">
  <li>I rolled a one.</li>
  <li>I rolled a two.</li>
  <li>I rolled a three.</li>
  <li>I rolled a four.</li>
  <li>I rolled a five.</li>
  <li>I rolled a six.</li>
</ol>

Das war der Trick

/* Still use a decimal based list for a11y */
ol {
  margin-left:40px;
  list-style:decimal url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

.dicey li:nth-child(1n):before {position:absolute;left:-1em;}

/* Actually set markers with pseudo element unicode */
.dicey li:nth-child(1):before {content: "\2680";}
.dicey li:nth-child(2):before {content: "\2681";}
.dicey li:nth-child(3):before {content: "\2682";}
.dicey li:nth-child(4):before {content: "\2683";}
.dicey li:nth-child(5):before {content: "\2684";}
.dicey li:nth-child(6):before {content: "\2685";}

Anfänglich habe ich die Schriftart, die die Unicode-Symbole anzeigen würde, nicht angegeben. Das Ergebnis war nicht schlecht, da heute jeder moderne Webbrowser und jedes webfähige Gerät Zugriff auf mindestens eine Schriftart hat, die die notwendigen Symbole aus dem Unicode-Block namens „Miscellaneous Symbols“ enthält. Es gab einige Variationen im Aussehen, aber es war ziemlich erträglich. Aber ich wusste, dass ich, wenn ich echte Kontrolle haben wollte, eine kostenlose Webschrift finden müsste. Ich identifizierte eine Schriftart namens DejaVu, die funktionieren würde, indem ich die Liste der unterstützten Schriftarten in der Tabelle der Glyphen für den Block „Miscellaneous Symbols“ durchsah.

Sobald ich den Namen der Schriftart kannte, konnte ich ein WebFont-Kit bei Font Squirrel erstellen. Bei der Erstellung eines WebFont-Kits ist es wichtig, die Option „No subsetting“ zu wählen, um sicherzustellen, dass die Schriftarten alle benötigten Unicode-Inhalte für Ihre Icons enthalten. Oder wenn Sie sich um die Dateigröße kümmern, können Sie die ursprüngliche TrueType- oder OpenType-Schriftart herunterladen und dann Font Squirrels WebFont-Generator im Expert-Modus verwenden, um nur den Unicode-Bereich 2600 bis 26FF einzuschließen, der alle Zeichen im Unicode-Block „Miscellaneous Symbols“ erfasst.

Sobald Sie mit Unicode beginnen, hört der Spaß nie auf. Ich habe viel zu viel Zeit damit verbracht, die vielen Icons zu erkunden, die Teil der DejaVu-Schriftart sind (vollständige Liste). Dort fand ich Icons für Spielkartenfarben, astrologische Zeichen, Pfeile, Aufzählungszeichen, musikalische Symbole, geometrische Formen und eine ganze Menge Schnörkel, deren Namen ich nicht einmal nennen kann. Also habe ich einige meiner Favoriten genommen und ein Pen mit mehreren verschiedenen Arten von Listen erstellt.

Das vollständige Pen

Siehe das Pen Ordered Lists with Unicode Symbols von Steven Estrella (@sgestrella) auf CodePen.

Was ist mit unsortierten Listen?

Sie können Ihren <ul>-Elementen mit einer modifizierten Form dieser Technik die gleiche großartige Unicode-Liebe geben. Hier ist ein Pen, um Ihnen den Einstieg zu erleichtern

Siehe das Pen Unordered List with Unicode Bullets von Steven Estrella (@sgestrella) auf CodePen.

Was ist mit der Zukunft?

Es gibt eine neue CSS-Regel namens @counter-style, mit der wir benutzerdefinierte Zählerstile für geordnete Listen einfacher erstellen können, indem wir die zu verwendenden Symbole, den Bereich der Liste und viele andere Optionen festlegen. Die CSS Counter Styles Level 3-Spezifikation ist jetzt eine Candidate Recommendation beim W3C, aber Stand Mai 2017 unterstützt sie nur Firefox (mit einigen Problemen). Ich erwarte, dass Chrome, Edge und Safari die Unterstützung bald hinzufügen werden, aber die endgültige Version von Internet Explorer (Version 11) wird sie wahrscheinlich nie haben. Wenn Sie diesen Browser also unterstützen müssen, bleiben Sie bei Tricks wie dem auf diesem Beitrag beschriebenen, bis die Leute IE11 nicht mehr verwenden (vielleicht im Jahr 2020?).

Beachten Sie, dass die Regel @counter-style keine Möglichkeit bietet, das Zählersymbol mit CSS zu gestalten. Selbst wenn es von allen Browsern übernommen wird, kann es Anwendungsfälle für alternative Lösungen wie die hier vorgestellte geben. Sie können mehr über @counter-style auf MDN lesen. Hier ist ein Pen mit einer Demonstration.

Verwenden Sie unbedingt Firefox, um den Effekt zu sehen

Siehe das Pen @counter-style demo (Firefox only as of May 2017) von Steven Estrella (@sgestrella) auf CodePen.

Auf den Schultern von Giganten

Wir alle lernen aus der Arbeit anderer und ich möchte die Arbeit mehrerer Autoren würdigen, deren Artikel ich bei der Vorbereitung dieses Beitrags informativ fand.

• Jose Vargas: Ordered List CSS Styles
• Roger Johannson: Styling Ordered List Numbers
• David McFarland: Custom List Numbers
• Chris Coyier: Base 64 Encode of 1x1px Transparent GIF
• Chris Coyier: Numbering in Style

Hier ist ein Pen mit der obigen unsortierten Liste, die mehrere verschiedene Symbolstile verwendet!

Siehe das Pen List of Credits with Unicode Bullets von Steven Estrella (@sgestrella) auf CodePen.