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:    currentcolor;
   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-pipe-narrow > li > span.breadcrumb-nav-bullet-sep,
ul.breadcrumb-nav-bullet-pipe-narrow > li > span.breadcrumb-nav-bullet-sep {
   padding-left:        0;
}
ol.breadcrumb-nav-bullet-pipe-narrow > li,
ul.breadcrumb-nav-bullet-pipe-narrow > li {
   margin-right:        0;
}
ol.breadcrumb-nav-bullet-pipe-narrow > li::after,
ul.breadcrumb-nav-bullet-pipe-narrow > li::after {
   margin-left:         -3px;
}
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;
}

Die Programmierung ist gegen Bearbeitung geschützt ((Sichter) Dreiviertelschutz).

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 sichtbaren Trennzeichen zwischen den Elementen werden per CSS generiert, sind damit nicht Bestandteil des DOM, somit auch für Screenreader nicht existent.
Auch die als Ersatz beim Copy&Paste zwischen den Elementen generierten Pipe-Symbole | werden für Screenreader unterdrückt; jedoch nicht per CSS.
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-pipe
ul.breadcrumb-nav-bullet-pipe: Das Trennzeichen soll ein senkrechter Strich sein sein.
ol.breadcrumb-nav-bullet-pipe-narrow
ul.breadcrumb-nav-bullet-pipe-narrow: Der senkrechte Strich soll dichter am Text stehen; etwa weil dieser nur aus einem Buchstaben besteht.
ol.breadcrumb-nav-bullet-circle
ul.breadcrumb-nav-bullet-circle: Das Trennzeichen soll kreisförmig sein.
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>