Hier werden zum Einsatz von Cascading Style Sheets (CSS) bei der Konfiguration der optimalen Arbeitsumgebung angemeldeter Benutzer[1] praxiserprobte Anwendungsbeispiele und Tipps für Einsteiger dargestellt.

CSS zum Einsatz bei der Seitengestaltung wird unter Hilfe:CSS beschrieben.

Benutzung

Einbindung

Schnell und einfach mittels Einstellungen:

  • Anklicken von: common.css – „Gemeinsames CSS aller Benutzeroberflächen“. In diese Seite die gewünschten Formatanweisungen einfügen, wie sie hier angegeben sind.
  • Wer mit mehreren Skins jongliert, kann zusätzlich spezifische Definitionen anlegen, etwa vector.css. Für die aktive Skin über Einstellungen:
    • In der Registerkarte Aussehen ist die aktive Skin gekennzeichnet; daneben der Link zum spezifischen CSS.
    • Dies wird dann anschließend an common.css aktiviert und überschreibt gleichartige Definitionen. Skin-spezifisches CSS allein geht auch.
  • Außerdem sind einheitliche Stile für alle Wikis der WMF („global“) möglich, und Mobilgeräte benötigen ggf. spezielle Dekorationen. Siehe Skin/Einstellungen zu Einzelheiten.

Beim Bearbeiten dieser CSS-Seiten schaltet sich automatisch der CodeEditor hinzu und ermöglicht farbige Syntaxhervorhebung.

Voraussetzung ist allerdings, sich als Benutzer angemeldet zu haben – sonst lassen sich keine Benutzerseiten anlegen. Alternativ sind Browser-Skripte möglich.

CSS-Notation

CSS in a nutshell: 

Selektor1,
Selektor2 {
   Eigenschaft1: Wert;
   Eigenschaft2: Wert;
}
Selektor3 {
   Eigenschaft: Wert;
}

Sinnvolle Selektoren sind hier beschrieben. Den Elementen, auf die sie zutreffen, wird der in Klammern definierte Stil zugewiesen. Wikimedia hat den Elementen der Seite viele Identifikatoren und Klassen zugewiesen, so dass sich einzelne Elemente gezielt ansprechen lassen.

Es gibt eine Vielzahl von Eigenschaften (Attribute). Jeweils paarweise wird der Eigenschaft der gewünschte Wert zugewiesen. Aufeinander folgende Paare werden durch ein Semikolon getrennt; damit man es beim Verschieben von Zeilen nicht vergisst, wird oft hinter das letzte Paar ein eigentlich unnötiges Semikolon gesetzt. (siehe auch Formatierung)

Werden von der Wikimedia-Umgebung und vom Benutzer derselben Eigenschaft unterschiedliche Werte zugewiesen, so macht das überhaupt nichts. Die Werte sind „kaskadierend“ – das heißt, dass die jeweils letzte und speziellere Definition die vorherige Angabe überschreibt; dabei kommen die benutzerdefinierten Stile zum Schluss und haben also in der Regel Vorrang.

Ein häufiger Wert sind Farben. Sie werden am sichersten als Hexadezimalzahlen angegeben: #RRGGBB – mit R=rot, G=grün, B=blau; jeweils sind die Zeichen 0–9,A–F möglich.

Einige Anleitungen

Wikibooks: CSS

Kaskadierend

Wie der Name schon sagt, baut CSS sich „kaskadierend“ auf – das bedeutet, dass die jeweils letzte und speziellere Definition die vorherigen Angaben überschreibt.

Konkret ergibt sich die Hierarchie:

  1. Server-definierte Stile (weltweit)
  2. Stile der deutschsprachigen Wikipedia: Mediawiki:Common.css usw.
  3. Stile des aktuellen Benutzers: common.css usw.
  4. Dynamische Stile: addCSS
  5. Angaben direkt im Element (mit style="...")
  6. Deklarationen mit !important

CSS-Seiten

Für CSS-Seiten, die nur Code enthalten, gilt:

  • Bis zu einer gewissen Maximalgröße der Seite werden die Syntaxelemente in unterschiedlichen Farben dargestellt.
  • Seit Anfang 2021 werden auf Code-Seiten auch Zeilennummern angezeigt.
    • Eine Verlinkung auf eine bestimmte Zeile ist möglich mit dem Fragmentbezeichner #L-1, #L-2, #L-3 usw.
    • Ein Klick auf die Zeilennummer hebt die aktuelle Zeile hervor, und in der Adresszeile des Browsers wird die geeignete Verlinkung auf diese Zeile dargestellt.
    • In aktuellen Diskussionen kann auf die momentane Version verlinkt werden (Beispiel: #L-14).
    • Weil sich der vorangehende Code im Lauf der Zeit ändern kann, wäre ggf. ein PermaLink ratsam.
    • Die Maximalgröße von Seiten mit Syntaxhervorhebung, die eine farbige Auszeichnung bei zu großen Seiten unterbindet, verhindert dann auch die Generierung der Zeilennummern.
  • Du kannst solche Seiten wie jede andere ggf. schnelllöschen lassen, indem du am Anfang {{Löschen}} einfügst (möglichst CSS-auskommentiert). Auch wenn die Vorlage nicht wie üblich dargestellt wird, funktioniert sie dennoch, so dass ein Administrator deinem Wunsch nachkommen und die Seite löschen wird. Andernfalls wäre eine reguläre Löschdiskussion erforderlich, die über die zugehörige Diskussionsseite abgewickelt werden muss.
  • Andere Wikisyntax neben Vorlageneinbindungen, namentlich Wikilinks, ist ebenfalls nach außen wirksam; auch Kategorisierungen. Das wird kaum einmal als CSS-Deklaration vorkommen, womöglich aber in einem Kommentar. Solltest du das nicht beabsichtigen, muss der Bereich in <nowiki> eingeschlossen werden.
  • Die wirksamen Seiten haben das „Content Model“ css (bzw. sanitized-css im Fall von TemplateStyles).

CSS-Benutzerseiten

Für die CSS-Unterseiten im Benutzernamensraum gilt außerdem:

  • Ihr Name sollte immer auf kleingeschriebenes .css enden, damit sie von jeder beteiligten Software sicher erkannt werden.
  • Die festgelegten Skin-spezifischen Definitionen müssen exakt so (klein) geschrieben werden wie die Skin technisch heißt. Am sichersten ist es, sie über die Einstellungen zu generieren (siehe Einbindung).
  • Ansonsten kann Groß- und Kleinschreibung der Unterseite frei gewählt werden.
  • Außer dir können nur Administratoren deine CSS-Unterseite verändern, was diese jedoch nicht tun.

Kommentare

Auch in CSS gibt es die Möglichkeit, Kommentare zu den Deklarationen zu hinterlassen. Dabei ist jedoch zu beachten:

  • Der Kommentar beginnt mit /* und endet mit */ (auch nach mehreren Zeilen).
  • Das vom Wikitext und HTML gewohnte <!-- Format --> ist nicht möglich. Es würde dazu führen, dass die gesamten Deklarationen zumindest ab dieser Stelle nicht mehr erkannt werden.
  • Ein /* Kommentar */ darf nicht innerhalb einer Deklaration stehen; also entweder nach einer schließenden Klammer } oder am Beginn der Seite möglich.

Link-Typen unterscheiden

Um unerwünschte oder nur in bestimmten Bereichen zulässige Verlinkungen leicht zu erkennen, können sie von Autoren farblich markiert werden. Für reine Leser ist dies weniger wichtig.

Die folgenden Möglichkeiten wirken auf die normale Artikeldarstellung und die Vorschau (Kurzübersicht).

Durch Voranstellen des Klassen-Selektors .ns-0 werden die Definitionen jeweils auf den Artikelnamensraum begrenzt.

Der eigentliche Artikelinhalt wird als Abschnitt div#mw-content-text identifiziert.[2] Ohne diese Einschränkung wäre jeweils die gesamte Portal-Seite betroffen.

Projektinterne Links

BKL und FS

Begriffsklärungsseiten und Falschschreibungen

Seit 2014 werden direkte Verlinkungen auf BKS bereits vom Server mit der Klasse mw-disambig markiert. Das Gadget nutzt dies aus. Genauso lassen sich BKS-Links auch individuell dekorieren.

Weiterleitung (redirect)

Weiterleitungen sind oft sinnvoll, manchmal (beispielsweise bei Abkürzungen und verschobenen Artikeln) ist die Angabe des wirklichen Lemmas als Linkziel vorzuziehen, gelegentlich ist aber von der momentanen Weiterleitungsseite der Ausbau zu einem eigenen Artikel zu erhoffen (mehr). 

.ns-0 A.mw-redirect {
   background-color: #F0E68C;
}

Weiterleitungs-Links werden damit blassgelb unterlegt (nur ANR).

Oder: 

.mw-redirect {
   color: #FF00FF;
}

bewirkt, dass alle Links auf Weiterleitungen mit magentafarbenem Text dargestellt werden. Dabei geht allerdings die unterschiedliche Färbung verloren, an der sich erkennen lässt, ob diese Seite bereits einmal besucht wurde. Umgehen lässt sich das beispielsweise mit 

 .mw-redirect         { color: #CC00CC; }
 .mw-redirect:visited { color: #FF99FF; }

wodurch besuchte Links heller eingefärbt werden.

Seiten-interne Verlinkungen

Innere Verlinkungen können gesondert hervorgehoben werden, etwa durch den Wikitext [[#Literatur|Literatur]] erzeugt.[3] 

#mw-content-text [href^='#']:not([href='#']) {
   color: #408F40;
}

Alle Linkziele, die mit # beginnen, aber nicht nur aus # bestehen (was bei eingefügten Werkzeug-Links vorkommt), werden im Kernbereich markiert.

Namensräume

Aus dem Artikel soll nicht in andere Namensräume verlinkt werden oder nur in besonderen Fällen.

Sowohl mit http: wie auch beim gesicherten Zugriff mit https: funktioniert:[3] 

.ns-0 #mw-content-text A[href*="/wiki/Kategorie:"],
.ns-0 #mw-content-text A[href*="/wiki/Portal:"] {
   border: 1px solid #408F40;
}

Links auf Seiten der aufgezählten Namensräume bekommen einen grünen Rahmen. Sie sind in einem Artikel am richtigen Ort sinnvoll.

Die anderen Namensräume und die jeweiligen Diskussionsseiten müssten genauso selektiert werden; sie sind als Links aus einem Artikel kaum sinnvoll (ausgenommen etwa Boxen der Qualitätssicherung oder Löschanträge, oder ein Artikel über die Wikipedia selbst) und erhalten einen roten Rahmen:[3] 

.ns-0 #mw-content-text A[href*="/wiki/Diskussion:"],
.ns-0 #mw-content-text A[href*="/wiki/Benutzer_Diskussion:"],
.ns-0 #mw-content-text A[href*="/wiki/Benutzerin_Diskussion:"],
.ns-0 #mw-content-text A[href*="/wiki/Hilfe_Diskussion:"],
.ns-0 #mw-content-text A[href*="/wiki/Kategorie_Diskussion:"],
.ns-0 #mw-content-text A[href*="/wiki/Portal_Diskussion:"],
.ns-0 #mw-content-text A[href*="/wiki/Spezial_Diskussion:"],
.ns-0 #mw-content-text A[href*="/wiki/Vorlage_Diskussion:"],
.ns-0 #mw-content-text A[href*="/wiki/Wikipedia_Diskussion:"],
.ns-0 #mw-content-text A[href*="/wiki/Benutzer:"],
.ns-0 #mw-content-text A[href*="/wiki/Benutzerin:"],
.ns-0 #mw-content-text A[href*="/wiki/Hilfe:"],
.ns-0 #mw-content-text A[href*="/wiki/Spezial:"],
.ns-0 #mw-content-text A[href*="/wiki/Vorlage:"],
.ns-0 #mw-content-text A[href*="/wiki/Wikipedia:"] {
    border: 2px solid #FF0000;
}

Dies greift auch bei Alias-Namen wie WP:LIT, Kleinschreibung wikipedia:LIT oder project:FzW; ein möglicher Alias des Namensraums ist bereits aufgelöst. Die Zeichenkette /wiki/Benutzer: ist hinreichend charakteristisch, um das Link zu identifizieren. Bei http: ist es der Beginn des relativen Pfades; bei https: steht (bis Herbst 2011) vorher noch /wikipedia/de am Beginn des Pfades.

Die bisherigen Ausschmückungen markieren alle entsprechenden Links am Artikel; das sind jedoch einige zuviel. ISBN, einige Hilfestellungen, Erläuterungen am Seitenfuß und die Versionsgeschichte sollen nicht hervorgehoben werden:[3] 

.ns-0 #mw-content-text A[href*="/wiki/Spezial:ISBN-Suche/"],
.ns-0 #mw-content-text A[href*="/wiki/Hilfe:Audio/"],
.ns-0 #mw-content-text A[href*="/wiki/Wikipedia:Chinesische_Begriffe/"],
.ns-0 div#mw-content-text A[href*="/wiki/Wikipedia:Wappen"],
.ns-0 #mw-content-text A[href*="/wiki/Wikipedia:WikiProjekt_Kommunen_und_Landkreise_in_Deutschland/Einwohnerzahlen/"],
.ns-0 .mw-body .templatesUsed A[href*="/wiki/Hilfe:"],
.ns-0 .mw-body .templatesUsed A[href*="/wiki/Vorlage:"],
.ns-0 .mw-body #catlinks A[href*="/wiki/Spezial:Kategorien"],
.ns-0 .mw-body #catlinks A[href*="/wiki/Kategorie:"],
.ns-0 .mw-body #pagehistory A {
   border: none;
}

Früher wurden hier Selektor-Ausdrücke empfohlen mit einer Auswahl nach dem Titel, etwa:[3] 

.ns-0 #mw-content-text a[title^="Benutzer:"] {
   border: 2px solid #FF0000;
}

Mittlerweile[4] kann das Titel-Attribut jedoch nicht mehr zuverlässig ausgewertet werden. Hinzu kam noch vor einiger Zeit, dass ein Alias (etwa WP: oder wp:) teilweise noch im Titel stehen kann und die Groß- und Kleinschreibung (so wikipedia:) einzeln abgefangen werden musste. Beim Attribut href= liegt das Link hingegen bereits in standardisierter Form vor.

Bilder nach Speicherort unterscheiden

Zu Wartungszwecken kann es von Interesse sein, die bereits auf Commons transferierten Dateien von Bildern im lokalen Projekt zu unterscheiden:[3] 

#mw-content-text img[src*="/wikipedia/de/"] {
   border: dotted 1px #0000FF;
}
#mw-content-text img[src*="/wikipedia/de/math/"] {
   border-style: none;
}

Die erste Zuweisung markiert Bilder, deren URL die Zeichenkette /wikipedia/de/ enthält – das sind solche, die im lokalen Projekt residieren. Bilder auf Commons haben eine solche URL nicht und werden nicht gekennzeichnet. Die zweite Zuweisung nimmt das wieder zurück für durch TeX generierte Bilder; sie sind immer lokal, im übrigen temporär und für die Wartung uninteressant.

Externe Links

Sie sollen im Artikelrumpf nur in Ausnahmefällen vorkommen, sondern eingefügt werden unter Weblinks oder als Einzelnachweis, auch in Infoboxen.

Eine Hervorhebung soll nur im Artikelinhalt (#mw-content-text) geschehen und nicht im umgebenden Editor- sowie ggf. Navigationsbereich.

Weil diese Regel nur für Artikel gilt, empfiehlt sich eine Begrenzung auf den Artikelnamensraum durch Voranstellen des Klassen-Selektors .ns-0 (nur im ANR gegeben).

Alternativ lässt sich das durch bedingte Einbindung mittels JavaScript erreichen: 

if ( ! mw.config.get( "wgNamespaceNumber" ) ) {
   importStylesheet( "Benutzer:Beispielnutzer/Artikel-Stil.css");
}

(In etwas veraltetem Stil geschrieben)

Schwesterprojekte

Zu anderen Sprachen und anderen Wikimedia-Projekten soll im Artikelrumpf nicht verlinkt werden. 

.ns-0 #mw-content-text A.extiw {
   background-color: #ADD8E6;
   color: #4040FF;
 }

Hellblauer Untergrund, Schrift in üblichem Link-Blau.

Weblink

.ns-0 #mw-content-text A.external {
   border: 1px solid #4080FF;
}

Blau umrahmt, erinnernd an das Weblink-Symbol .

Weblinks auf spezielle Dateiformate

Weblinks auf Seiten, die besondere Dateiformate enthalten (etwa PDF oder Microsoft Office), benötigen beim Benutzer besondere Software zur Darstellung, oder sie eröffnen Sicherheitsprobleme. Deshalb sollten derartige Weblinks sparsam eingesetzt werden. In jedem Fall ist unmittelbar am Weblink-Symbol der besondere Dateityp (gern auch die ungefähre Dateigröße) anzugeben.

Mit Sicherheit lässt es sich einer URL nicht entnehmen, aber man kann versuchen, eine „Dateinamenserweiterung“ zu erkennen und daraus das Dateiformat zu erraten; in diesen Fällen ist für die anderen Leser die Bezeichnung des Linktyps erforderlich. Das folgende Beispiel zeigt Symbole für PDF und für Microsoft Word Dokumente (.doc) an.[3] 

#mw-content-text A.external[href$=".pdf"],
#mw-content-text A.external[href*=".pdf?"],
#mw-content-text A.external[href*=".pdf#"],
#mw-content-text A.external[href*=".pdf&"],
#mw-content-text A.external[href$=".PDF"],
#mw-content-text A.external[href*=".PDF?"],
#mw-content-text A.external[href*=".PDF#"],
#mw-content-text A.external[href*=".PDF&"] {
   background: url("//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif")
               center right no-repeat;
   padding-right: 16px;
}

/* :en:User:Gadget850/ExternalLinkIcons.css */
#mw-content-text A.external[href$=".doc"],
#mw-content-text A.external[href*=".doc?"],
#mw-content-text A.external[href*=".doc#"],
#mw-content-text A.external[href*=".doc&"],
#mw-content-text A.external[href$=".DOC"],
#mw-content-text A.external[href*=".DOC?"],
#mw-content-text A.external[href*=".DOC#"],
#mw-content-text A.external[href*=".DOC&"] {
   background: url("//upload.wikimedia.org/wikipedia/commons/a/a1/Page_white_word.png")
               center right no-repeat;
   padding-right: 18px;
}

Mehr Wiki-Icons, Datei-Icons, (ZIP),  (Microsoft Excel),  (Flash Video) sowie CSS.

Diese speziellen Icons sind nur für WP-Autoren sichtbar, die sie definiert haben. Für nicht angemeldete Leser sollte in Klammern hinter dem normalen Link-Symbol das Format angegeben sein – auch verlinkt wie etwa DjVu – und möglichst die ungefähre Größe ergänzt sein.

Fehleranalyse

Oberste Überschriftenebene in Artikeln

Überschriften mit nur einem Gleichheitszeichen   = Überschrift =   sollen in Artikeln nicht vorkommen. Um sie besser unterscheiden zu können, erhalten sie einen (teilweise) roten Rahmen und Unterlegung: 

.ns-0 H1 SPAN.mw-headline {
   border: 2px solid #FF0000;
   background-color: #FFB6C1;
}

Standardfehler

Sowohl die globale Software wie auch eigene Vorlagen markieren Fehlermeldungen mittels class="error". Dies wird standardmäßig in leicht vergrößerter Schrift und roter Schriftfarbe dargestellt. Um es noch etwas leichter zu finden und auffallender hervorzuheben, könnte der Hintergrund in signalgelb eingefärbt werden: 

.error {
   background-color: #FFFF00;
}

Spezielle Seiten und Elemente

Identifizierung bestimmter Arten von Seiten

Praktisch alle speziellen Inhalte oder bestimmte Seitentypen lassen sich über einen spezifischen Selektor identifizieren. Er ist meist weit oben in der Hierarchie angesiedelt und muss deshalb den anderen Selektoren vorangestellt werden. Eine Auswahl:

  • .page-Spezial_Beobachtungsliste
  • .page-Spezial_Beiträge_MeinEigenerBenutzerName
  • Versionsgeschichte
    UL#pagehistory vor den Listeneinträgen
  • .skin-vector (siehe Hilfe:Skin)
  • .ns-0 Artikelnamensraum
    Allgemein: .ns-n mit n als Nummer des Namensraums
    • Jede Diskussionsseite hat .ns-talk (alle ungeraden Namensraum-Nummern >0)
    • Jede „Vorderseite“ dazu hat .ns-subject (keine Diskussions- oder Spezialseite).
    • Die Spezialseiten haben hingegen .ns-special (zusätzlich zu .ns--1).
  • action-* (view, edit, etc.) als Klasse des HTML-body

Beispiele für die Beschränkung auf bestimmte Seiten unter Externe Links.

  • Das Basis-Element jeder Seite html enthält immer entweder .client-js oder .client-nojs – damit lassen sich Hinweise anzeigen oder ausblenden, je nachdem ob JavaScript beim Leser aktiviert ist oder nicht.

Vorsicht bei Selektoren über ID: Auch jede Abschnittsüberschrift erhält einen Selektor dieses Namens; in einem span-Element. Bei mehreren gleichlautenden Abschnittsüberschriften werden die Selektoren automatisch mittels einer laufenden Nummer unterschieden.

Eigene Beiträge

Auf Versionsgeschichte und Beobachtungslisten kann es von Interesse sein, seine eigenen Beiträge hervorzuheben; wer einen langen Benutzernamen hat, kann auch ein knappes Ich an diese Stelle setzen.

Um Platz zu sparen und vielleicht den eigenen Edit in eine einzelne Zeile zu bekommen, kann das Link auf sich selbst, seine eigene Diskussion und seine eigenen Beiträge ausgeblendet werden – bei den Einträgen, bei denen hier nichts steht, geht es um diesen Benutzer selbst. 

span.mw-usertoollinks a[title="Spezial:Beiträge/MeinEigenerName"],
span.mw-usertoollinks a[title="Benutzer Diskussion:MeinEigenerName"],
ul.special a[title="Benutzer:MeinEigenerName"] {
   display: none;
}

Die Links auf MeinEigenerName, seine Diskussion und Beiträge sind für den Benutzer dieser CSS unsichtbar auf Versionsgeschichte und Beobachtungslisten.

Signatur

Zu weiteren Gestaltungsmöglichkeiten siehe Hilfe:Signatur (Signaturen hervorheben, auch Unterdrücken von Hervorhebungen in den Signaturen anderer Benutzer). 

#content a[href$="Benutzer:MeinEigenerName"] { background:#FF3030; font-weight:bold; } /* meine Signatur in rot */

Versionsgeschichte

Hervorhebung des eigenen Benutzernamens (leicht rötlicher Hintergrund, keine schwarze Schrift) innerhalb einer Versionsgeschichte
span.history-user a[title="Benutzer:MeinEigenerName"] {
   display: inline-block;
   width: 25px;
   overflow: hidden;
   visibility: collapse;
}
span.history-user a[title="Benutzer:MeinEigenerName"]:before {
   content: "(Ich)";
   visibility: visible;
   background-color: #FF80FF;
   color: #000000;
   font-weight: bold;
}

In der Versionsgeschichte wird das Link auf MeinEigenerName dargestellt als (Ich) und damit zwischen den anderen Benutzerbeiträgen hervorgehoben.

:before ist eine ältere Notation, die von allen Browsern verstanden wird; künftig werden moderne Browser die geänderte Schreibweise ::before mit zwei Doppelpunkten akzeptieren.

Beobachtungsliste

Zwei spezielle Eigenschaften können auf der Beobachtungsliste ausgenutzt werden:

  • Die Listenpunkte sind abwechselnd mit den Klassen mw-line-odd und mw-line-even versehen. Damit lassen sich zusammenhängende Listenzeilen pastellfarbig unterlegen, beispielsweise um in schmalen Bildschirm-Fenstern mehrfach umbrochene Listenpunkte unterscheiden zu können.
  • Jeder Listenpunkt hat eine eigene Klasse:
    watchlist-NamensraumNummer-Artikelbezeichner
    Im Artikelbezeichner sind Leerzeichen, Doppelpunkte und Schrägstriche durch Unterstreichungsstriche ersetzt.
    Damit lassen sich besonders interessierende Seiten auffallend hervorheben; es muss aber für jeden einzelnen Seitentitel ein Selektor angegeben werden.
  • Bei Unterseiten-Systemen, bei denen man nicht jede einzeln angeben und pflegen möchte, kann man hervorheben:[3]
a.mw-changeslist-title[href*="/wiki/Wikipedia_Diskussion:Technik/Skin"],
a.mw-changeslist-title[href*="/wiki/Wikipedia:Technik/Skin"] {
  background-color: #ADD8E6;
}
a.mw-changeslist-title[href*="/wiki/Benutzer_Diskussion:MeinEigenerName"] {
  background-color: #7FFF00;
}
a.mw-changeslist-title[href*="/wiki/Benutzer:MeinEigenerName"] {
  background-color: #FFB6C1;
}
/* Wikidata */
.mw-changeslist-src-mw-wikibase {
 background: #DDDDDD;
}
  • Interessante Seiten und Unterseiten werden hellblau unterlegt (#ADD8E6).
  • Eigene Diskussionsseiten (einschließlich der Unterseiten, für die es keinen Benachrichtigungsbalken gibt) werden hellgrün unterlegt (#7FFF00).
  • Jemand hat eine von meinen Seiten geändert (#FFB6C1) – war ich das selbst, hat ein lieber Mensch mir einen Tippfehler bereinigt, oder muss ich grollen?
  • Hinweis: mw-changeslist-title wird auch bei den Letzten Änderungen verwendet und wirkt dann dort auch; wer Änderungen an bestimmten Seiten besonders wichtig findet, dem kann es egal sein, ob das nun auf der Beobachtungsliste oder in den Letzten Änderungen zuerst bemerkt wird.
  • Wikidata-Einträge werden grau unterlegt (#DDDDDD, allerdings nur unausklappbare)
  • Auch das Ausblenden bestimmter Seiten ist möglich (wenn nur die zugehörige Seite von Interesse ist). Das nachstehende Beispiel blendet im Namensraum 5 (=„Wikipedia-Diskussion“) die Vorgänge der Seite mit dem Titel „Kurier“ aus; der eigentliche WP:K im Namensraum 4 wird jedoch weiterhin angezeigt:
table.mw-changeslist-ns5-Kurier,
li.watchlist-5-Kurier {
   display: none;
}

Im Dezember 2013 wurde eine Zeichenerklärung eingefügt, zum Ausblenden siehe unten.

Im Mai 2012 wurde neu eingeführt, dass solche Änderungen hervorgehoben werden, deren Seiten zwischenzeitlich nicht besucht wurden. Standardmäßig erfolgt diese Hervorhebung in Fettschrift, damit sie auch von Benutzern mit technischen oder sonstigen Einschränkungen gut wahrgenommen werden können.
Wem dies nicht gefällt, dem bieten sich mehrere Möglichkeiten (Juli 2012 wurden die Bezeichner geändert):

  • Traditioneller Zustand ohne Hervorhebung:
.mw-changeslist-line-watched .mw-title {
   font-weight: normal;
}
  • Hervorhebung in Kursiv- statt in Fettschrift:
.mw-changeslist-line-watched .mw-title {
   font-weight: normal;
   font-style:  italic;
}

Wer die Markierung der Änderungen nicht mehr wahrnehmen kann, benötigt auch keinen Button dazu mehr: 

#mw-watchlist-resetbutton {
   display: none;
}

Zum Popup nach dem Hinzufügen oder Entfernen siehe unten.

Bearbeitungsseite

Bearbeitungsfeld

Das Bearbeitungsfeld für die Quelltextbearbeitung, aber auch im Rahmen des Hochladeformulars kann mit einer bestimmten Zahl von Zeilen voreingestellt werden. Bis Januar 2017 gab es hierzu auch eine Einstellung für registrierte Benutzer. 

#wpTextbox1 {
    height: 37.5em;
}

Unter typischen Bedingungen müsste der Zahlenwert vor em anderthalb Mal so groß sein wie die Anzahl der gewünschten Zeilen. Das Feld lässt sich auch flexibel auf eine bestimmte Größe schieben; erfahrene Browser-Benutzer können dann diese Größe ermitteln und den Startwert in Pixeln px festlegen. Das Hochladeformular könnte auch gesondert konfiguriert werden.

Hinweise

Wer alle Boxen schon auswendig kennt und trotzdem beachtet, sich auch über die rechtliche Bedeutung klar ist, kann sie unsichtbar machen, hat mehr Platz zum Editieren und muss weniger scrollen. Auf kleinen Bildschirmen, etwa Netbooks, brauchen routinierte Autoren auch keinen Link auf die Bearbeitungshilfe. 

#editpage-copywarn,
.editpage-head-copywarn,
#mw-editform-cancel,
.editHelp,
a[target="helpwindow"],
.wikEdHelpSpan {
   display: none ! important;
}
  • #editpage-copywarn ist die Box Mit dem Speichern dieser Seite versichere ich, …
  • #mw-editform-cancel entfernt die gesonderte Möglichkeit zum „Abbrechen“ (es führt einfach auf die normale Seite zurück); im Browser gäbe es dazu auch andere Möglichkeiten.
    • .editHelp das Link „Abbrechen“ zusammen mit der Bearbeitungshilfe sicher wegbekommen.
  • A[target="helpwindow"][3] entfernt das Link „Bearbeitungshilfe“
  • .wikEdHelpSpan wäre für routinierte Benutzer von wikEd sinnvoll; allen anderen schadet es nicht.

Die Bearbeitungshilfen lassen möglicherweise einen Leerraum zurück; auch dieser kann entfernt werden: 

.editHelp,
.wikEdEditHelp {
   color: #FFFFFF;
   border-collapse: collapse;
}

Zum Popup nach dem Speichern siehe unten.

Zusammenfassungszeile

Bei manchen Skins wird die Vorschau einer längeren Zusammenfassungszeile nicht umbrochen (mehrzeilig dargestellt), sondern am rechten Fensterrand abgeschnitten. 

DIV.mw-summary-preview SPAN.comment {
   white-space: normal;
}

Änderungen

Gilt für Versionsgeschichte und Versionsvergleich; teils Beobachtungsliste.

„kommentarlos zurücksetzen“-Link

Irrtümlich klickt man manchmal „kommentarlos zurücksetzen“ an, obwohl man „rückgängig“ wollte mit der Möglichkeit, in die Zusammenfassungszeile zu schreiben und weitere Änderungen vorzunehmen. Drei Möglichkeiten, um dies zu vermeiden:

Blassgrau; Link bleibt anklickbar, eckige Klammern bleiben stehen: 

.mw-rollback-link a {
   color: #C0C0C0;
}

Ganz ausblenden: 

.mw-rollback-link {
   display: none;
}

Allgemein ausblenden, jedoch bei „Versionsunterschiede“ blassrot unterlegt anzeigen: 

.mw-rollback-link {
   display: none;
}
.diff-ntitle .mw-rollback-link {
   display: inline;
   background-color: #FFC0C0;
}

Wikidata

Aus Wikidata übernommene enzyklopädische Informationen, die in Artikeln angezeigt werden, müssen mittels class="wikidata-content" gekennzeichnet werden. Nachstehend wird das beispielsweise durch einen Rahmen in magenta hervorgehoben. 

.wikidata-content {
   border-color: #FF00FF;
   border-style:solid;
   border-width: 1px;
   padding: 1px;
}

Hilfen und Hinweistexte

Wer routinierter Wikipedianer ist, alle Anleitungen auswendig weiß und keinerlei Hilfen und Tipps benötigt, kann sich Platz auf dem Bildschirm verschaffen: 

.mw-changeslist-legend,
.specialpage-helplink,
#editpage-copywarn,
#mw-editform-cancel,
.editHelp,
a[target="helpwindow"],
.wikEdHelpSpan,
#fundraising,
.cn-fundraising,
.cn-fundraiser-banner {
   display: none ! important;
}
  • .mw-changeslist-legend entfernt die Erläuterungen zu Symbolen auf der Beobachtungsliste (und Letzte Änderungen), die seit Dezember 2013 dargestellt werden,
  • .specialpage-helplink entfernt auf allen Spezialseiten Hinweise auf Benutzungs-Informationen (zugehörige Hilfeseite), wie sie von Einsteigern benötigt werden.
  • .cn-fundraising sowie #fundraising und .cn-fundraiser-banner sollte demgegenüber nur für einen Spendenaufruf benutzt werden, so dass andere Informationsboxen der deutschsprachigen Wikipedia erhalten bleiben müssten.
  • #wp_talkpagetext war der Hinweis für Diskussionsseiten („Bitte beachte unsere Richtlinien … und beende deinen Beitrag mit deiner Signatur: --~~~~“) und ist seit Sommer 2013 durch .wp_intro abgedeckt.
  • #mw-watchlist-resetbutton ul li entfernte bis Ende 2013 den Hinweistext der Beobachtungsliste („Seiten mit noch nicht gesehenen Änderungen werden fett dargestellt“)

Siehe entsprechende Details zur Bearbeitungsseite für weitere Einzelheiten.

Weitere Selektoren:

  • .wp_intro – Einführungsabschnitte; sollten nur für erfahrene Benutzer überflüssige Informationen enthalten
  • #siteNotice ist ein gelegentlich auf allen Seiten erscheinender Kasten (oft vor Weihnachten mit Spendenaufruf), den man vor dem Einloggen als IP beachten sollte. Parallel wird ggf. im Browser auch ein für die Nachricht spezifischer Cookie abgelegt, dass man diese Nachricht nicht mehr sehen möchte, nachdem das angeklickt wurde. Damit bekäme man wichtige Nachrichten mit; das wäre der bedingungslosen Ausblendung vorzuziehen.

Mehr: Projektweite Selektoren speziell für die deutschsprachige Wikipedia

Inhaltsverzeichnis

Siehe dazu: Hilfe:Inhaltsverzeichnis

Portal-Layout

Siehe dazu auch: Skin/GUI

Titel-Leiste

Wer auf dem Bildschirm Platzmangel hat und die Titelleiste (Links zu Benutzerseite, „Eigene Diskussion“, „Einstellungen“, „Beobachtungsliste“, …) einkürzen möchte, damit sie bei schmalem Fenster und langem Benutzernamen nicht mehrzeilig wird, kann dies wie folgt veranlassen: 

LI#pt-userpage A,
LI#pt-mytalk A,
LI#pt-watchlist A {
   display: inline-block;
   overflow: hidden;
   width: 30px;
   visibility: collapse;
}
LI#pt-userpage A:before {
   content: "Ich   ";
   font-weight: bold
}
LI#pt-mytalk A:before {
   content: "Disk   ";
}
LI#pt-watchlist A:before {
   content: "BEO   ";
}
LI#pt-userpage A:before,
LI#pt-mytalk A:before,
LI#pt-watchlist A:before {
   visibility: visible ! important;
}

Die drei Listenelemente (LI) der PersonalToolbar pt werden auf kleine Felder von 30 Pixel Breite reduziert und geeignet konfiguriert. Dann wird deren Standard-Text eine Ersatz-Zeichenkette vorangestellt, die mittels anschließender Leerzeichen den Originaltext aus dem sichtbaren Feld herausschiebt. Der Ersatz ist ein in Fettschrift hervorgehobenes Ich statt Benutzername, „Disk“ statt „Eigene Diskussion“, „BEO“ statt „Beobachtungsliste“. Damit dies möglichst in jedem Browser sichtbar ist, wird dies noch einmal mittels important bekräftigt, obwohl das vermutlich nicht erforderlich wäre.

Wer sich noch an dem kleinen grafische Symbol für „Benutzer“ neben dem Link zu seiner eigenen Seite stört, mag es ausblenden: 

LI#pt-userpage {
   background-image: none;
}

Benachrichtigungsbalken

Angemeldete Benutzer erhalten seit November 2013 ihre Benachrichtigungen mittels Echo. Zur Konfiguration simulierender Helferlein und für nicht angemeldete Benutzer siehe Hilfe:Neue Nachrichten.

Benachrichtigungs-Popups

Im Herbst 2012 wurde eingeführt, dass nach jedem Abspeichern einer Seite für einige Sekunden ein kleines Feld erscheint (PostEdit); außerdem wird beim Hinzufügen oder Entfernen auf der Beobachtungsliste ein derartiges Feld vorübergehend angezeigt. Beide Anwendungen verwenden grundsätzlich unterschiedliche Programmierungen. Ausblenden lassen sich beide mittels 

.mw-notification-autohide,
.postedit {
   display: none;
}
  • .mw-notification-autohide
    betrifft jede Art von Benachrichtigung, die nach einigen Sekunden von selbst verschwindet; ausgenommen PostEdit.
  • .postedit
    betrifft abweichend davon PostEdit.
  • #mw-notification-area
    würde auch alle anderen Benachrichtigungen betreffen; ausgenommen PostEdit.

Weitere Situationen

Für die nachstehenden Situationen sind auf den einschlägigen Hilfeseiten Möglichkeiten zur individuellen CSS-Konfiguration dargestellt:

Persönlichen Zeichensatz vereinbaren

Auf Seiten mit nichtlateinischen Texten müssen die fremdsprachlichen Zeichen eingebunden werden. Dies sollte nur über Vorlagen geschehen, die zu jedem Textabschnitt die Sprache mitteilen. Moderne Browser versuchen, unter allen auf einem Rechner vorhandenen Schriftarten eine passende zu finden. Folgendermaßen lässt sich für alle altgriechischen Abschnitte die Schriftart „Mein Spezial-Altgriechisch“ erzwingen:[3] 

span[lang|="grc"] {
   font-family: "Mein Spezial-Altgriechisch";
}

In der Vorlage:lang wird das Attribut lang definiert; die Angabe eines Zeichensatzes durch Benutzer hat Vorrang für die Darstellung. Genauso lassen sich auch Vorgaben für ganze Schriftsysteme machen; sie werden durch geeignete Vorlagen mit einer Klasse markiert, die gleich dem Identifikator des Schriftsystems gemäß ISO 15924 ist.

Seinen eigenen Stil finden

Wer den Wunsch hat, weitere persönliche Hervorhebungen oder Ausblendungen zu definieren, gehe wie folgt vor:

  1. Mit einer Browser-Funktion „Quelltext ansehen“ (vielleicht im Menüfeld „Ansicht“) den HTML-Quelltext der fraglichen Seite betrachten.
    Besonders hilfreich sind dabei Debugger; sie lassen nicht nur alle verwendeten HTML- und CSS-Daten lesen, sondern zeigen auch den möglicherweise modifizierten Zustand – und sie ermöglichen die stilistische Analyse („Kaskade“) jedes Elements auf der Seite:
    • Internet Explorer: Standardmäßig vorhanden; [Extras]→[Entwicklertools] oder F12
    • Firefox: Über die rechte Maustaste für ein dargestelltes Element; außerdem Strg+Umschalt+C für das gesamte HTML-Dokument und die wirksamen Stile sowie die zugrunde liegenden Regeln.
  2. Umschließende Tags suchen. Das sind etwa <li>…</li> oder <a>…</a>. Gerade für die Definition eigener Stile sind eingefügt: <div>Ganze Absätze</div> und <span>Teil einer Zeile</span>.
  3. Identifikatoren in den Tags suchen. Das sind wahlweise class="XYZ" oder id="abcd". Es kann mehrere Elemente der gleichen class geben; id sollte aber jeweils nur ein einziges Mal vorkommen.
  4. Spezifischen Selektor bilden.
    • Für id= wird ein # dem Bezeichner vorangestellt, für class=" ein . (Punkt).
    • Beispiel: Im HTML-Quelltext steht
      <div id="abcd">…<span class="XYZ">Interessant</span>…</div>
      Der Selektor für Interessant lautet dann:
      #abcd span.XYZ
  5. Stil-Eigenschaften suchen und in {} setzen:
    • Schriftfarbe – color: #FF80FF; – magenta
    • Hintergrundfarbe – background-color: #80FFFF; – türkis
    • Fettschrift – font-weight: bold;
    • Rahmen – border: 1px solid #0000FF; – viele weitere Möglichkeiten
    • Ausblenden – display: none;

Es kann sein, dass die vom Wiki-Server ausgelieferte Seite bereits durch Skripte verändert wurde. Dies ist in der Ansicht des HTML-Quelltextes nicht zu sehen; dann werden spezielle Untersuchungswerkzeuge benötigt wie etwa das Browser-AddOn Firebug für Mozilla Firefox.

Eine ausgiebige (aber nicht mehr aktualisierbare) Liste der Werte für class= und id= ist in der englischsprachigen Wikipedia zu finden.

Server-seitige Stile

Automatisch eingebundene Standardstile in der deutschsprachigen Wikipedia sind:

Nicht mehr wirksam sind URL-Pfade, die beginnen wie die folgenden:

Inzwischen werden vom Server weltweit gültige Komponenten mittels des ResourceLoaders zusammengestellt. Mehr unter Skin/MediaWiki.

Erweiterte Möglichkeiten

Neben der Definition in den eigenen Standard-Seiten des Benutzers wie common.css gibt es weitere Möglichkeiten, fertige Definitionen zu importieren oder abhängig von bestimmten Umständen auch dynamisch zu generieren. Nachdem solche nachträglichen Definitionen eingefügt wurden, wird die Darstellung der bislang angezeigten Seite entsprechend verändert.

Das Laden mittels @import in den eigenen CSS-Seiten reduziert das Problem des Springens von Seitenelementen, weil die Anweisungen früher zur Verfügung stehen. Sie werden auch vor den späteren Definitionen wirksam und könnten damit im Einzelfall wieder überschrieben werden.

Statischer @import von einer URL

Seit CSS.1 gibt es die folgende Möglichkeit, in die CSS als erste[5] Zeile(n) zu schreiben: 

@import url(https://de.wikipedia.org/w/index.php?title=Benutzer:PerfektesChaos/shared.css&action=raw&ctype=text/css);
@import "/w/index.php?title=Benutzer:PerfektesChaos/shared.css&action=raw&ctype=text/css";

Dies ist der schnellste Weg, wenn immer von einer festen URL importiert werden soll. Steht dies nicht vor allen anderen Deklarationen, ist das Verhalten des Browsers unklar; neuere Browser akzeptieren es auch an anderen Stellen.

JavaScript

Bedingter Import von einer URL

Mit JavaScript kann in Abhängigkeit von Bedingungen ein Import veranlasst werden; damit lassen sich elegant komplexe Situationen erfassen: 

mw.loader.load("https://de.wikipedia.org/w/index.php?title=Benutzer:PerfektesChaos/css/shared.css&action=raw&ctype=text/css",
               "text/css");

Bisher wurde dafür die Funktion importStylesheetURI() benutzt. Diese ist veraltet (ab Frühjahr 2016 auch nicht mehr verfügbar) und bietet keinen besonderen Vorteil.

Bedingter Import einer Wikipedia-Seite

Aktuell soll dafür die gleiche Funktion wie eben mit der entsprechenden URL zur Seite verwendet werden. Ärgerlich ist dabei die unübersichtliche URL; es ist zu hoffen, dass gelegentlich auch ein schlichtes Wikilink ermöglicht wird.

Bisher wurde dafür die Funktion importStylesheet() benutzt. Hier wurde statt der URL nur der Titel der Seite angegeben. Langfristig ist dies auch nicht mehr verfügbar.

Dynamisches Einfügen von CSS in die Seite

Über die Funktion mw.util.addCSS() – veraltet, ab Frühjahr 2016 auch nicht mehr verfügbar: appendCSS() aus wikibits – kann man auch spontan CSS-Definitionen zusammenstellen und in die Seite einfügen. Der CSS-Code (String) wird der Funktion als Parameter übergeben; sie gibt ein Objekt vom Typ CSSStyleSheet zurück, das später weiter manipuliert werden kann. Ewiger Nachteil bei diesem JavaScript-Stil: Es kommt zu spät und ruckelt deshalb oft.

Verschiedene Aufgaben

Testen

Bei der Bearbeitung werden die Definitionen bereits wirksam, wenn man „Vorschau“ oder „Änderungen“ anklickt. Damit lassen sie sich an den auf der „Bearbeiten“-Seite und der Portalumgebung sichtbaren Elementen testen, ohne die Versionsgeschichte belasten zu müssen.

Browser-Cache

Seit MediaWiki 1.17 (2011) wird an die URL der Standard-CSS-Definition aller Benutzer (common.css sowie etwa vector.css) ein Zeitstempel angefügt, der die letzte Veränderung angibt. Damit wird immer die gültige Definition eingebunden; Leeren des Browser-Cache (siehe Hilfe:Cache) ist deshalb nicht mehr erforderlich.

Das gilt aber nicht für die Einbindung anderer CSS-Seiten. Hier hat jede Version die identische URL und im Browser-Cache können deshalb veraltete Versionen vorkommen. Dann wären die auf Skin/JS angegebenen Möglichkeiten einzusetzen.

Weiterleitungsseiten

Die normale #WEITERLEITUNG [[...]] ist unwirksam und kann Fehlerhinweise auslösen.

Seit 2015 wird beim Verschieben einer CSS-Seite automatisch eine CSS-Weiterleitung mittels @import auf der bisherigen Seite generiert. Die bisherigen Verlinkungen sollten allerdings baldmöglichst aufgelöst werden, da es sonst zu merklichen Verzögerungen („Geruckel“) beim Lesen der Seiten kommen kann. Anders als bei Weiterleitungen von Wiki-Seiten, die bereits innerhalb des Servers aufgelöst werden, kommt es zu einer kompletten Runde von Netzwerk-Anfrage und Interpretation, bis die aktuellen Definitionen geladen werden können.

Wikisyntax

Die Wikisyntax wird zwar nicht dargestellt, aber bestimmte Aspekte wie etwa Löschanträge und Wikilinks sind trotzdem wirksam (Deklarationen als Weiterleitungsseiten hingegen nicht). Ein SLA kann in einen CSS-Kommentar /* {{SLA}} */ gesetzt werden.

Sollten unerwünschte Verlinkungen entstehen, kann der Quelltext hingegen mit <nowiki> umschlossen werden (ebenfalls CSS-auskommentiert).

Im Übrigen haben die einschlägig wirksamen Seiten das „Content Model“ css.

Formatierung

Hat man viele Stile definiert, wird die Zusammenstellung schnell unübersichtlich.

MediaWiki empfiehlt hierzu einen sinnvollen Standard (von mehreren allgemein gebräuchlichen):

  • Jeder Selektor in einer eigenen Zeile.
  • Öffnende Klammer in der gleichen Zeile wie der letzte Selektor (statt Komma).
  • Jede Eigenschaft einrücken (MW: 1 tab; oder etwa drei bis vier Leerzeichen).
  • Ein Leerzeichen zwischen Doppelpunkt und Wert.
  • Auch die letzte Zuweisung wird mit Semikolon abgeschlossen.
  • Schließende Klammer linksbündig.
.selector,
#someElement {
   float: right;
   text-align: left;
}

In der Regel werden die Eigenschaften alphabetisch sortiert; es sei denn, bestimmte Eigenschaften von besonderer Wichtigkeit sollen nebensächlichen Details vorangestellt werden.

Die Standard-CSS-Seiten werden von der MediaWiki-Software komprimiert; das heißt, auch für die Netzwerk-Übertragung und den Browser entfallen alle Kommentare und Leerzeichen. Diese werden nur für die Menschen eingefügt, damit die Regeln schnell und sicher gelesen werden können. Übrigens wird deshalb eine syntaktisch fehlerhafte CSS-Seite insgesamt unwirksam; zumindest bei normaler Verwendung.

Hilfsmittel

jigsaw.w3.org
Überprüfen von CSS-Code; wahlweise Prüfung einer URL (etwa Benutzerseite) oder Texteingabe (W3C)
csslint.net
Alternatives Angebot, wie vor.

Weitere Informationen

Anmerkungen

  1. ↑ Nicht angemeldete Benutzer können möglicherweise über Browser-Add-Ons oder andere Browser-spezifische Einstellungen die gezeigten CSS-Deklarationen für die Wiki-Domains aktivieren.
  2. ↑ Zu Einzelheiten der Seitenaufteilung siehe WP:GUI.
  3. ↑ a b c d e f g h i j Diese CSS3-Selektoren (siehe Substring matching attribute selectors) werden von allen aktuellen Browsern unterstützt.
  4. ↑ phab:T2542 (Bugzilla:542)
  5. ↑ CSS.1
source: https://de.wikipedia.org/wiki/Wikipedia:Technik/Skin/CSS