Wikipedia:Technik/Skin/CSS/Selektoren unter MediaWiki

Selektoren unter MediaWiki

In der MediaWiki-Software werden Zehntausende von Selektoren verwendet. Bis etwa 2010 hatte die englischsprachige Wikipedia noch versucht, die vergebenen Klassen zu erfassen, dies aber längst aufgegeben. Jede Extension definiert eigene Klassenbezeichner; auch bei MediaWiki weiß man schon lange nicht mehr, welche Klassenbezeichner alles in den generierten HTML-Dokumenten erscheinen – es gibt keine zentrale Registrierung.

Hinzu kommt, dass es Selektoren gibt, die spezifisch für eine einzelne Seite sind und spontan generiert werden; so ist das Lemma eines Artikels immer auch ein Selektor, wie auch jede Spezialseite einen speziellen Selektor hat. Genauso bewirkt jede Abschnittsüberschrift und jedes <ref> spontane Selektoren.

Interessanter als die Vielfalt theoretisch möglicher Klassenbezeichner sind diejenigen, für die

CSS-Definitionen zentral vorgehalten werden
sich häufig benötigte Effekte ausnutzen lassen.

Diese Seite listet besonders häufige oder wichtige Selektoren auf.

Namensschema

Seit 2010 wird häufig, jedoch nicht durchgehend, das Präfix mw-* vorangestellt. Daran angeschlossen ist dann oft ein Schlüsselwort für die ganze Gruppe eines Verwendungszwecks, woran auf - folgend die einzelnen Selektoren gebildet werden.

Aufbau einer Seite und Portalrahmen

Siehe dazu ausführlich Skin/GUI.

Direkte Dekoration in Artikeln, Vorlagen und anderen Seiten

Die nachstehenden Klassen können zur Textformatierung genutzt werden.

Selektor	Bedeutung
`.center`	Layout von Blockelementen; siehe Hilfe:Textgestaltung/Zentrieren
`.explain`	Gepunktete Unterstreichung, wie für die Anzeige des HTML-Elements `<abbr>` üblich; soll auf einen verfügbaren Tooltip bei einem beliebigen Textelement hinweisen. (Beispiel)
`.floatleft` `.floatright` `.tleft` `.tright`	Textfluss von Blockelementen; siehe Hilfe:Textgestaltung/Layoutfluss #weltweit.
`.mw-code`	Kodierter Text, wie er auch mit `<code>` dargestellt wird. (Beispiel)
`.mw-collapsible`	Ein- und ausklappbare Elemente.
`.mw-datatable`	Veraltet; Markierung von Tabellenzeilen beim Überfahren mit der Maus.
`.small`	Schriftverkleinerung vergleichbar `<small>` – jedoch statt der aus Tradition der frühen 1990er Jahre stammenden `85%` ein barrierefreies Maß wie `94%` (globale Vorgabe Stand 2021) oder vielleicht auch `91%` für Menschen mit Augenproblemen. Ungünstig im Fließtext, aber geeignet in Tabellen und der Vorlagenprogrammierung.
`.sortable` `.unsortable` `.sortbottom` `.sorttop` `.expand-child`	Sortierbare Tabelle; siehe Hilfe:Tabellen/Sortierung .
`.wikitable`	Hübsche Standardtabelle; siehe Hilfe:Tabellen.

Situative Auslösung

Ein * bedeutet beliebige Fortsetzung zur Konkretisierung (Wildcard).

Selektor	Bedeutung
`.action-`*	Momentane Aktion `view`, `edit`, `submit`, etc. als Klasse des `<body>`
`.ltr` `.rtl`	Veraltet. Die gewöhnliche Schreibrichtung in der Seite oder im Bereich ist „von links nach rechts“ bzw. „von rechts nach links“; insbesondere Eigenschaft von `<body>` und damit Ausnutzung in Kind-Elementen möglich. Aktuell soll `html[dir="ltr"]` bzw. `html[dir="rtl"]` ausgewertet werden (für die gesamte Seite); ggf. für Kind- oder Eltern-Elemente. Die Seitensprache und damit die Schreibrichtung richten sich nach der Benutzersprache, nicht nach dem Inhaltsbereich.
`.nomobile`	Dieser Bereich soll nicht sichtbar werden, wenn die Seite momentan auf einem Mobilgerät dargestellt wird; siehe Technik/Mobil #Seitendarstellung.
`.noprint`	Dieser Bereich soll ausgeblendet werden, wenn die Seite in einer Druckversion bzw. als PDF dargestellt werden soll.
`.ns-`*	Die Seite befindet sich momentan in einem bestimmten Namensraum als Klasse des `<body>`.
`.page-`*	Name der umgebenden Seite als Klasse des `<body>`
`.skin-`*	Name der momentanen Skin als Klasse des `<body>`

Kennzeichnung von Verlinkungen
Selektor	Bedeutung
`.external`	Verlinkung über eine URL `.external .free` Unformatiert (nur URL) `.external .text` Weblink (betitelt, in Klammern) `.external .autonumber` Weblink (unbetitelt, in Klammern, nummeriert)
`.extiw`	Verlinkung über Interwiki-Syntax
`.interlanguage` `.interwiki-xx`	Sprachversion Verlinkung auf Sprache mit Code `xx`
`.mw-disambig`	Verlinkung auf eine Begriffsklärung
`.mw-redirect`	Verlinkung auf eine Weiterleitung
`a.new`	„Redlink“; Verlinkung einer nicht existierenden Seite im eigenen Projekt
`.plainlinks`	Externe Verlinkungen werden normalerweise mittels gekennzeichnet und dadurch von projektinternen Verlinkungen unterschieden. Mittels dieser Klasse kann das auf bestimmten Funktionsseiten unterdrückt werden; etwa für Werkzeuge innerhalb der Wiki-Familie. In enzyklopädischen Artikeln ist diese Irreführung der Leser unzulässig. (Beispiel) Siehe auch mw:Manual:Plainlinks (englisch)
`.plainlinks-print`	Wie plainlinks, soll jedoch nur in einer Druckversion wirksam werden.
`.selflink` `a.mw-selflink`	Verlinkung auf die dargestellte Seite selbst (Fettschrift).
`.stub`	Verlinkung auf vom Benutzerkonto definierte „kleine“ Seite; auch veränderte Linkfarbe.
–	Verlinkungen im Wikilink-Format innerhalb des Wikis erhalten keine besondere Klasse.

Siehe auch Anwendungen dieser Klassen.

Medieneinbindungen bis 2023
Selektor	Bedeutung
`.image`	Alle Bildeinbindungen; Verlinkung mit Dateibeschreibung usw.
`.magnify`	Verlinkung auf Dateibeschreibungsseite im Miniaturbild
`.thumb`	Miniaturbild insgesamt
`img.thumbborder`	Miniaturbild; Bildumrahmung
`.thumbcaption`	Miniaturbild; Bildlegende
`.thumbimage`	Miniaturbild; Grafikbereich
`.thumbinner`	Miniaturbild; thumbimage + thumbcaption

Ab Juli 2023 werden diese Selektoren nicht mehr im generierten HTML verwendet (phab:T318433); siehe FAQ. Die CSS-Ressourcen sollen noch „einige Zeit“ ausgeliefert werden.

Medieneinbindungen ab 2023
Selektor	Bedeutung
`figure`	Alle Bildeinbindungen; mit Legende und Verlinkung zur Dateibeschreibung usw.
`figcaption`	Bildlegende
`.mw-default-size`	Miniaturbild
`.mw-file-description`	Verlinkung zur Dateibeschreibungsseite
`.mw-file-element`	Medienelement: `<img>`
`.mw-halign-left`	Bild ist links im Layoutfluss angeordnet
`.mw-halign-right`	Bild ist rechts im Layoutfluss angeordnet

Die nachstehenden Klassen werden in der englischsprachigen Wikipedia genutzt und sollen deshalb von allen Wikis der Welt genauso benutzt werden; die Klassenbezeichner dürfen nicht anders verwendet werden.

Zitationen / `<ref>`
nach Art
Selektor	Bedeutung
`.book`	Buch
`.journal`	Zeitschrift
`.news`	Nachricht
`.note`	Anmerkung
`.web`	Webseite

Siehe auch Reference Previews‎.

Verschiedene besondere Elemente
Selektor	Bedeutung
`.minoredit`	Markierung kleiner Änderungen in der Beobachtungsliste
`.reference`	Markierung eines Anmerkungszeichens im Text
`.reference-text`	Anmerkungs-Element im Block `<references>`
`.searchbox`	Eigenschaft der `<inputbox>` – siehe Hilfe:Eingabefelder
`.toc`	Markierung des Inhaltsverzeichnisses („TOC“); Formatierung kann sich jederzeit ohne Angabe von Gründen ändern oder völlig wegfallen

Funktionelle Effekte

Die nachstehenden Selektoren sind eher nicht dauerhafter Bestandteil des Seiteninhalts; ihnen ist auch nicht notwendig unmittelbar eine Dekoration zugeordnet. Teils haben sie eine Wirkung auf bestimmte Software-Funktionen, teils weisen sie auf bestimmte Situationen hin. Einige der CSS-Dekorationen sind in den 2020ern nicht mehr in jeder Wiki-Seite enthalten, sondern erhalten das CSS von MediaWiki nur wenn generiert.

Selektor	Bedeutung
`.cdx-`*	Codex-Element
`#centralNotice`	CentralNotice
`.client-js` `.client-nojs`	Für das Dokument (`<body>`) gesetzt wenn JavaScript (nicht) aktiv. Wird abgeleitet etwa für `.noscript` ausgenutzt.
`.cm-`*	CodeMirror / meta:
`.error`	Markierung ausgelöster Fehlersituationen. Die Parserfunktion `{{#iferror:}}` erkennt, dass ein derartiger Text im eingeschlossenen Bereich vorkommt; jedoch nur, wenn der Klassenbezeichner auch in `"` eingeschlossen wurde, nicht aber bei `'` oder ohne. Andere Softwarewerkzeuge erkennen das Vorhandensein der Klasse ebenfalls. Die Darstellung erfolgt in roter Schrift; möglicherweise außerdem Fettschrift, vergrößert oder gelb unterlegt. Generierte Fehlermeldungen sollen immer über diese Klasse gekennzeichnet werden, niemals im Eigenbau mittels einfacher roter Schriftfarbe. (Beispiel)
`.errorbox`	Darstellung ähnlich `.error` als Kasten; aber ohne die Auslösung zusätzlicher Effekte. (Beispiel)
`.fileinfotpl`*	Maschinenlesbare Datei-Infos, siehe .licensetpl
`.licensetpl`*	Maschinenlesbare Lizenz-Infos, ausschließlich für Vorlagen, die für Dateibeschreibungsseiten bestimmt sind.
`.metadata`	Eigenschaft beim Medienbetrachter; unterdrückt die Medienbetrachter-Anzeige nebensächlicher Bilder.
`.multicol`	2019 Zwangsumbruch von Layouttabellen in der Mobildarstellung
`.mw-archivedtalk`	DiscussionTools
`.mw-highlight .err`	Markierung von Syntaxfehlern bei `<syntaxhighlight>`.
`.mw-indicators`	Seitenindikatoren (rechts oben)
`.mw-infobox`	deprecated styles^[1] Gemeint ist ohnehin keine „Infobox“, sondern eine „warnende Information“. Siehe auch: `.infobox`
`.mw-notalk`	DiscussionTools
`.mw-warning`	Neutraler, unauffällig umrahmter Kasten. (Beispiel)
`.navigation-not-searchable`	Bestimmte Textbereiche sollen als unwichtig für die Suchergebnisse markiert werden; siehe Suche/Cirrus
`.noresize`	Eigenschaft der Mobildarstellung; verhindert bei echten Endgeräten das responsive sizing – Grafiken werden gegenüber dem Text verkleinert. Das wäre bei Icons unerwünscht.
`.notheme`	Ein Dark Mode soll für diesen Bereich explizit ausgeschlossen werden.
`.notpageimage`	Mögliches Seitenvorschaubild ausschließen.
`.noviewer` `.noarticletext`	Eigenschaft beim Medienbetrachter; unterdrückt die Medienbetrachter-Anzeige.
`.searchaux`	Bestimmte Textbereiche sollen als nachrangig für die Reihenfolge von Suchergebnissen markiert werden; siehe Suche/Cirrus
`#siteNotice`	SiteNotice
`.skin-invert`	Für Grafiken mit schwarzem Text auf transparentem Hintergrund: Farben im Dunkelmodus invertieren
`.success`	Markierung ausgelöster erfolgreicher Situationen; Gegenstück zu `.error`. (Beispiel)
`.tdg-`*	TemplateData-Generator
`.ve-not-available`	VisualEditor nicht verfügbar
`.warning`	Markierung ausgelöster minder schwerer Fehlersituationen; ähnlich `.error`. (Beispiel)
`.warningbox`	Ähnlich `.warning` als Kasten. (Beispiel)

Konzepte der englischsprachigen Wikipedia

Die nachstehenden Praktiken werden in der englischsprachigen Wikipedia genutzt und sollen deshalb von allen Wikis der Welt mit demselben Konzept und der gleichen Auswirkung verwendet werden. Vorrangig in der Mobildarstellung wirksam. Manual: IDs and classes.

Selektor	Bedeutung
`.ambox`	Undocumented – soll irgendwie ein Problem beschreiben, wie es in der enWP auftritt, und hätte deshalb irgendeine Auswirkung in der Mobildarstellung.
`.hatnote`	Soll andeuten, dass ein Element im Kopf einer Seite erscheint.
`.infobox`	Insbesondere auf Mobilgeräten: Layout einer Infobox; insbesondere bei schmalem Bildschirm über die gesamte Breite. Siehe auch: `.mw-infobox`
`.navbox`	Undocumented – soll auf Mobilgeräten irgendeine Auswirkung haben.
`.tmbox`	Undocumented – soll auf Mobilgeräten irgendeine Auswirkung haben.
`.topicon`	Undocumented – soll auf Mobilgeräten irgendeine Auswirkung haben.
`.vertical-navbox`	Undocumented – soll auf Mobilgeräten irgendeine Auswirkung haben.

Veraltend

Die nachstehenden Selektoren waren einmal Standard gewesen, werden jedoch nicht mehr unterstützt oder sollen nicht mehr verwendet werden.

Selektor	Bedeutung
`.mw-ajax-loader`	Animation „Ajax-ladend“

Spezialseiten und Aktivitäten

Viele Klassen und Konfigurationsmöglichkeiten für einzelne Spezialseiten und Aktivitäten sind bei Skin/CSS beschrieben; außerdem auch bei den jeweils zugehörigen Hilfeseiten.

Beispielformatierungen

class="error"

Dies ist kein echter Fehler.

class="errorbox"

Dies ist kein echter Fehler.

class="explain"

Hier gibt es einen Tooltip .

class="mw-code"

Dies ist Computer-Code.
Auch mehrzeilig.

class="mw-warning"

Warnhinweis.

class="plainlinks"

http://example.org/ und zum Vergleich http://example.org/

class="success"

Dies ist ein Erfolg.

class="warning"

Dies ist keine echte Warnung.

class="warningbox"