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

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

Funktion

Bearbeiten

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

Barrierefreiheit

Bearbeiten

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.
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

Bearbeiten

Die Spezifikation ist synchronisiert mit: Vorlage:Subpage/styles

Beispiele

Bearbeiten

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>