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) |
| 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. |
| 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> |
| Selektor | Bedeutung |
|---|---|
.external | Verlinkung über eine URL
|
.extiw | Verlinkung über Interwiki-Syntax |
| |
.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.
(Beispiel) |
.plainlinks-print | Wie plainlinks, soll jedoch nur in einer Druckversion wirksam werden. |
| 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.
| 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.
| 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.
| Selektor | Bedeutung |
|---|---|
.book | Buch |
.journal | Zeitschrift |
.news | Nachricht |
.note | Anmerkung |
.web | Webseite |
Siehe auch Reference Previews.
| 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 |
Für das Dokument (<body>) gesetzt wenn JavaScript (nicht) aktiv.Wird abgeleitet etwa für | |
.cm-* | CodeMirror / meta: |
.error | Markierung ausgelöster Fehlersituationen.
(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“. |
.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. |
| 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. |
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"
class="explain"
Hier gibt es einen Tooltip .
class="mw-ajax-loader"
Dies ist eine psychedelische Animation; Vertraue miiiir …
class="mw-code"
Auch mehrzeilig.
class="mw-warning"
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"
Weitere Informationen
- Wikipedia:Technik/Skin/MediaWiki #wmfCSS – Zugang zu den Stildefinitionen
Anmerkungen
- ↑ 2021-01 phab:T268194, Gerrit:647759
