Wikiup:Technik/Skin/CSS/Selektoren unter MediaWiki

aus Wikipedia, der freien Enzyklopädie
< Wikiup:Technik‎ | Skin‎ | CSS

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.
.infobox Insbesondere auf Mobilgeräten: Layout einer Infobox; insbesondere bei schmalem Bildschirm über die gesamte Breite.
.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

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 Benutzer definierte „kleine“ Seite; auch veränderte Linkfarbe.
– Verlinkungen im Wikilink-Format innerhalb des Wikis erhalten keine besondere Klasse.

Siehe auch Anwendungen dieser Klassen.

Medieneinbindungen
Selektor Bedeutung
.image Alle Bildeinbindungen; Verlinkung mit Dateibeschreibung usw.
.magnify Verlinkung Datei:Magnify-clip.png auf Dateibeschreibungsseite im Miniaturbild
.thumb Miniaturbild insgesamt
img.thumbborder Miniaturbild; Bildumrahmung
.thumbcaption Miniaturbild; Bildlegende
.thumbimage Miniaturbild; Grafikbereich
.thumbinner Miniaturbild; thumbimage + thumbcaption
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

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.

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

.mw-warning Neutraler, unauffällig umrahmter Kasten. (Beispiel)
.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
.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)

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-ajax-loader"

Dies ist eine psychedelische Animation; Vertraue miiiir …  

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"

Dies ist keine echte Warnung.

Weitere Informationen

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

Anmerkungen

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