Vorlage:Auflistung/styles
Zur Navigation springen
Zur Suche springen
Diese Seite dokumentiert TemplateStyles betreffend Vorlage:Auflistung.
Sie sind auf dieser Seite aktiviert.
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
[Quelltext bearbeiten]<templatestyles src="Auflistung/styles.css" />
Funktion
[Quelltext bearbeiten]Horizontal sollen Listenelemente aufeinander folgend angeordnet werden, durch Trennzeichen gegliedert.
Barrierefreiheit
[Quelltext 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 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
[Quelltext bearbeiten]- 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
[Quelltext bearbeiten]Die Spezifikation ist synchronisiert mit: Vorlage:Subpage/styles
Beispiele
[Quelltext 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>