Ein echter CSS-Trick, wenn es jemals einen gab! @ShadowShahriar hat eine CodePen-Demo erstellt, die Pseudo-Elemente verwendet, um Kommas zwischen Listenelementen zu setzen, die inline angezeigt werden, und das Ergebnis ist ein natürlich aussehender vollständiger Satz mit richtiger Interpunktion.
Wie es funktioniert
Der Trick? Erstens, es besteht darin, eine ungeordnete Liste zu einem Inline-Element ohne Marker oder Abstand zu machen
ul {
padding: 0;
margin: 0;
display: inline;
list-style-type: none;
}Als nächstes zeigen wir Listenelemente inline an, damit sie natürlich als Text in einem Satz fließen
li {
display: inline;
}Dann fügen wir Kommas zwischen Listenelementen hinzu, indem wir deren ::after Pseudo-Element auswählen und dessen content Eigenschaft mit einem Komma (,) Wert setzen.
li::after{
content: var(--separator);
}Oh, aber warte! Was ist mit dem alten Oxford-Komma? Verwenden Sie :nth-last-of-type(), um das vorletzte Listenelement auszuwählen und dessen ::after Pseudo-Element content Eigenschaft auf ", und" vor dem letzten Listenelement zu setzen.
li:nth-last-of-type(2)::after{
content: ", and ";
}Wir sind noch nicht fertig. @ShadowShahriar berücksichtigt einen Ausnahmefall, bei dem es nur zwei Elemente gibt. Alles, was wir brauchen, ist, ein "und" zwischen diesen beiden Elementen anzuzeigen, also
li:first-of-type:nth-last-of-type(2)::after {
content: " and ";
}Ich musste das bei Selectors Explained nachschlagen, um sicherzugehen, dass ich es richtig lese. Das besagt
Das
afterPseudo-Element... eines
<li>Elements, vorausgesetzt, es ist das erste seiner Art in seinem Elternteil und das n-te seiner Art von hinten (Formel) in seinem Elternteil.
Was für ein Zungenbrecher! Der letzte Schliff ist ein Punkt am Ende der Liste
li:last-of-type::after {
content: ".";
}Verwendung von benutzerdefinierten Eigenschaften
Wir haben gerade eine gekürzte Version des tatsächlichen Codes gesehen. @ShadowShahriar macht eine gute Sache, indem er ein Komma und das "und" als benutzerdefinierte Eigenschaften festlegt
ul {
--separator: ",";
--connector: "and";
padding: 0;
margin: 0;
display: inline;
list-style-type: none;
}Auf diese Weise können wir diese später gegen andere Möglichkeiten zum Trennen von Listenelementen austauschen. Nette Geste.
Das ist mir nicht nur wegen seines cleveren Einsatzes von Pseudo-Element-Tricks aufgefallen, sondern auch wegen seiner Einfachheit. Es verwendet bewährte CSS-Prinzipien auf eine Weise, die semantisches HTML unterstützt – keine zusätzlichen Klassen, Elemente oder sogar JavaScript, um Dinge zu manipulieren. Es lässt mich fast fragen, ob HTML eine Art Inline-Listenelement (<il>, jemand???) gebrauchen könnte, um Sätzen beim Vermitteln von Listenelementen zu helfen, ohne aus einem Absatz auszubrechen.
Nicht dasselbe, aber erinnert mich auch an diesen extrem schicken Trick, der die Verwendung von Trennzeichen bei Zeilenumbrüchen behandelt
https://chriskirknielsen.com/blog/inline-lists-with-conditional-separators/
Wirklich nett! Leider ist ein unglücklicher Nebeneffekt dieses Ansatzes, dass die Kommas und das "und" nicht enthalten sind, wenn Sie den Text markieren.
Das Beispiel mit den drei Elementen wird zum Beispiel
wenn Sie es kopieren und einfügen.
Dennoch könnte dies in Kontexten nützlich sein, in denen Sie den Text nicht auswählen müssen.
Beim Kopieren des Textes werden das letzte und das vorletzte Element zusammengeführt.
Die Zeit vergeht. Ich habe das 2003 diskutiert und es verwendet, wann immer IE keine Rolle spielte. Für Breadcrumb-Navigationen ist dies seitdem die bevorzugte Methode.
Das Endergebnis ist großartig. Ich frage mich, ob Screenreader diese leichter parsen könnten als einfachen Text. Gibt es über die gute Optik hinaus einen Vorteil?
Barrierefreiheits-Technologien ignorieren Pseudo-Elemente, daher würden sie die Liste als normale Listenelemente ohne die Änderungen vorlesen. Es wäre rein visuell für sehende Benutzer.
Tatsächlich könnte es potenziell – ich kann es nicht mit Sicherheit sagen – zu Verwirrung bei Benutzern mit eingeschränktem Sehvermögen führen, da sie möglicherweise einen einzelnen Satz erkennen können, ihre AT ihn aber als Liste von Elementen interpretiert.
Obwohl ich dies als nette Art, dies zu tun, schätzen kann, kann ich nicht verstehen, warum man das tun möchte.
Die Begründung ergibt für mich keinen Sinn
„Es gab Zeiten, in denen Sie wahrscheinlich Ihre Listenelemente in einem Absatz oder in einer Aussage anzeigen wollten.“
Warum nicht die Elemente in einem Absatz oder einer Aussage auflisten? Warum sich mit zusätzlichem Markup und Styling befassen, wenn es nicht benötigt wird?
Dieser Trick ist nett. Was hat Sie dazu bewogen, hier zusätzliches Markup hinzuzufügen? Semantisch mag es Sinn machen, aber haben Sie getestet, wie verschiedene Screenreader diese Listen mit Pseudo-Selektoren ankündigen?