Vorlage:Auflistung/styles

CSS

ol.breadcrumb-nav-container,
ul.breadcrumb-nav-container {
   list-style-image:    none;
   list-style-position: outside;
   list-style-type:     none;
   margin:              0.2em;
   padding-left:        0;
}
ol.breadcrumb-nav-container > li,
ul.breadcrumb-nav-container > li {
   display:             inline;
   margin-right:        0.3em;
   padding:             0;
}
ol.breadcrumb-nav-container > li > span.breadcrumb-nav-bullet-sep,
ul.breadcrumb-nav-container > li > span.breadcrumb-nav-bullet-sep {
   color:               transparent;
   padding-left:        1em;
   white-space:         nowrap;
}
ol.breadcrumb-nav-bullet > li::after,
ul.breadcrumb-nav-bullet > li::after {
   background-color:    #000000;
   background-position: center center;
   background-repeat:   no-repeat;
   content:             "\00A0";
   display:             inline-block;
   line-height:         0.4em;
   margin-left:         -1em;
   width:               0.4em;
}
ol.breadcrumb-nav-bullet > li.breadcrumb-nav-bullet-prefix::after,
ul.breadcrumb-nav-bullet > li.breadcrumb-nav-bullet-prefix::after {
   display:             none;
}
ol.breadcrumb-nav-bullet > li:last-child::after,
ul.breadcrumb-nav-bullet > li:last-child::after {
   display:             none;
}
ol.breadcrumb-nav-bullet > li.breadcrumb-nav-bullet-nowrap,
ul.breadcrumb-nav-bullet > li.breadcrumb-nav-bullet-nowrap {
   white-space:         nowrap;
}
ol.breadcrumb-nav-bullet-pipe > li::after,
ul.breadcrumb-nav-bullet-pipe > li::after {
   line-height:         1em;
   width:               2px;
}
ol.breadcrumb-nav-bullet-circle > li::after,
ul.breadcrumb-nav-bullet-circle > li::after {
   border-radius:       0.4em;
}
ol.breadcrumb-nav-bullet-blue > li::after,
ul.breadcrumb-nav-bullet-blue > li::after {
   background-color:    #0000FF;
}

Kopiervorlage

<templatestyles src="Auflistung/styles.css" />

Funktion

Horizontal sollen Listenelemente aufeinander folgend angeordnet werden, durch Trennzeichen gegliedert.

Barrierefreiheit

Für Screenreader wird eine Navigationsstruktur im Dokument generiert.

In der optischen Präsentation wird dies als konventionelle Abfolge von Verlinkungstexten dargestellt.
Semantisch handelt es sich um eine einfache Aufzählungsliste <ul>, wovon allerdings nur Screenreader etwas erfahren.
Die Trennzeichen zwischen den Elementen werden per CSS generiert, sind damit nicht Bestandteil des DOM, somit auch für Screenreader nicht existent.
Anders als eine konventionelle Aufzählung (etwa von Verlinkungen) in einem kontinuierlichen Fließtext getrennt durch nicht vorlesbare Symbole sind die einzelnen Elemente navigierbar voneinander abgegrenzt.
Beispielsweise können die Elemente mit der Tabulator-Taste weitergeschaltet werden.
Siehe dazu auch: Breadcrumb Example. w3.org (englisch)
Die Methodik wird im Desktop-Portalrahmen der Wikis seit den frühen 2000er Jahren nicht nur in den vertikalen Seitenleisten, sondern auch in den horizontalen Menüs verwendet.

Klassen

ul.breadcrumb-nav-container: Für die umgebende Aufzählung.; Markiert zur optischen Umwandlung von Aufzählung zur linearen Abfolge.; Ein Element mit breadcrumb-nav-container ist immer erforderlich.
ol.breadcrumb-nav-container: Alternativ zu ul.breadcrumb-nav-container für hierarchische Aufzählungen.
ol.breadcrumb-nav-bullet
ul.breadcrumb-nav-bullet: Legt das Trennzeichen-Prinzip auf grafische Elemente fest, per CSS-Hintergrundbild.
span.breadcrumb-nav-bullet-sep: Gestaltung des verborgenen Trennzeichens, das bei Copy&Paste wirksam wird.
ol.breadcrumb-nav-bullet-circle
ul.breadcrumb-nav-bullet-circle: Das Trennzeichen soll kreisförmig sein.
ol.breadcrumb-nav-bullet-pipe
ul.breadcrumb-nav-bullet-pipe: Das Trennzeichen soll wie ein Pipe-Symbol in Fettschrift anmuten.
ol.breadcrumb-nav-bullet-blue
ul.breadcrumb-nav-bullet-blue: Das Trennzeichen soll königsblaue Farbe haben.

Kompatibilität

Die Spezifikation ist synchronisiert mit: Vorlage:Subpage/styles

Beispiele

Siehe Testseite.

<ul class="breadcrumb-nav-container breadcrumb-nav-bullet">
<li>[[Eins]]<span class="breadcrumb-nav-bullet-sep"><span aria-hidden="true"> |</span></span></li>
<li>[[Zwei]]<span class="breadcrumb-nav-bullet-sep"><span aria-hidden="true"> |</span></span></li>
<li>[[Drei]]</li></ul>