Wikipedia:Technik/Skin/CSS/Selektoren unter MediaWiki

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

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[Quelltext bearbeiten]

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[Quelltext bearbeiten]

Siehe dazu ausführlich Skin/GUI.

Direkte Dekoration in Artikeln, Vorlagen und anderen Seiten[Quelltext bearbeiten]

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 Markierung von Tabellenzeilen beim Überfahren mit der Maus; siehe Hilfe:Tabellen.
.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[Quelltext bearbeiten]

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
.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>
.toc Markierung des Inhaltsverzeichnisses („TOC“); Formatierung kann sich jederzeit ohne Angabe von Gründen ändern oder völlig wegfallen

Funktionelle Effekte[Quelltext bearbeiten]

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
#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)
.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. Sonderpreis für den intuitiv verständlichsten eindeutigen Klassenbezeichner ever. Ein „Dark mode“ kann in einer Wikipedia mit user formatted content (anders als bei Facebook, eBay, Twitter-X oder Amazon) aber niemals sinnvoll durchgängig funktionieren.
.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)
.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[Quelltext bearbeiten]

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

Spezialseiten und Aktivitäten[Quelltext bearbeiten]

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[Quelltext bearbeiten]

class="error"[Quelltext bearbeiten]

Dies ist kein echter Fehler.

class="errorbox"[Quelltext bearbeiten]

Dies ist kein echter Fehler.

class="explain"[Quelltext bearbeiten]

Hier gibt es einen Tooltip .

class="mw-ajax-loader"[Quelltext bearbeiten]

Dies ist eine psychedelische Animation; Vertraue miiiir …  

class="mw-code"[Quelltext bearbeiten]

Dies ist Computer-Code.
Auch mehrzeilig.

class="mw-warning"[Quelltext bearbeiten]

Warnhinweis.

class="plainlinks"[Quelltext bearbeiten]

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

class="success"[Quelltext bearbeiten]

Dies ist ein Erfolg.

class="warning"[Quelltext bearbeiten]

Dies ist keine echte Warnung.

class="warningbox"[Quelltext bearbeiten]

Dies ist keine echte Warnung.

Weitere Informationen

MediaWiki: Manual:Interface/IDs and classes – Technische Dokumentation (englisch)

Anmerkungen[Quelltext bearbeiten]

  1. ↑ 2021-01 phab:T268194, Gerrit:647759
Abgerufen von „https://de.wikipedia.org/w/index.php?title=Wikipedia:Technik/Skin/CSS/Selektoren_unter_MediaWiki&oldid=244566198“