Wikipedia:Technik/Skin/CSS

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.

BenutzungBearbeiten

EinbindungBearbeiten

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

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 AnleitungenBearbeiten

KaskadierendBearbeiten

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

Für die CSS-Unterseiten im Benutzernamensraum gilt:

  • Sie sollten 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.
  • Du kannst deine CSS-Unterseite wie jede andere deiner Unterseiten löschen lassen, indem du am Anfang {{Löschen}} einfügst (möglichst auskommentiert). Auch wenn die Vorlage nicht wie üblich dargestellt wird, funktioniert sie dennoch, sodass ein Administrator deinem Wunsch nachkommen und die Seite löschen wird.
  • 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.

KommentareBearbeiten

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 unterscheidenBearbeiten

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 LinksBearbeiten

BKL und FSBearbeiten

Begriffsklärungsseiten und Falschschreibungen

Seit Mitte September 2014 werden direkte Verlinkungen auf BKS bereits vom Server mit der Klasse mw-disambig markiert. Damit lassen sich BKS-Links auch individuell darstellen. Beispiel:

.ns-0 A.mw-disambig { color: #009900; }

Damit werden BKS-Links mit grünem Text dargestellt.

Weiterleitung (redirect)Bearbeiten

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.

Seiten-interne VerlinkungenBearbeiten

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äumeBearbeiten

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 unterscheidenBearbeiten

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 LinksBearbeiten

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" ) === 0 ) {
   importStylesheet("Benutzer:mir/Artikel-Stil.css");
}

(In etwas veraltetem Stil geschrieben)

SchwesterprojekteBearbeiten

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.

WeblinkBearbeiten

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

Blau umrahmt, erinnernd an das Weblink-Symbol  .

Weblinks auf spezielle DateiformateBearbeiten

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.

FehleranalyseBearbeiten

Oberste Überschriftenebene in ArtikelnBearbeiten

Ü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;
}

WikidataBearbeiten

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;
}

Spezielle Seiten und ElementeBearbeiten

Identifizierung bestimmter Arten von SeitenBearbeiten

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ägeBearbeiten

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.

SignaturBearbeiten

Zu weiteren Gestaltungsmöglichkeiten siehe [Hilfe:Signatur] ([Hilfe:Signatur#Links auf Benutzernamen hervorheben|Signaturen hervorheben], auch [Hilfe:Signatur#Unterdrücken von Hervorhebungen in den Signaturen anderer Benutzer|Unterdrücken von Hervorhebungen in den Signaturen anderer Benutzer]).

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

VersionsgeschichteBearbeiten

[Datei:Hervorhebung des eigenen Benutzernamens in Versionsgeschichte.png|mini|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.

BeobachtungslisteBearbeiten

Zwei spezielle Eigenschaften können auf der [Hilfe:Beobachtungsliste|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 [Hilfe:Letzte Änderungen|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 [#hints|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 [#notification|unten].

BearbeitungsseiteBearbeiten

BearbeitungsfeldBearbeiten

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 [Hilfe:Einstellungen#editor|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 [#eigenerStil|ermitteln] und den Startwert in Pixeln px festlegen. Das Hochladeformular könnte auch gesondert konfiguriert werden.

HinweiseBearbeiten

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 [../../Text/Edit/wikEd|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 [#notification|unten].

ZusammenfassungszeileBearbeiten

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;
}

ÄnderungenBearbeiten

Gilt für Versionsgeschichte und Versionsvergleich; teils Beobachtungsliste.

„kommentarlos zurücksetzen“-LinkBearbeiten

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;
}

Hilfen und HinweistexteBearbeiten

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

InhaltsverzeichnisBearbeiten

Siehe dazu: [Hilfe:Inhaltsverzeichnis#Optionen per CSS|Hilfe:Inhaltsverzeichnis]

Portal-LayoutBearbeiten

Siehe dazu auch: [../GUI|Skin/GUI]

Titel-LeisteBearbeiten

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;
}

BenachrichtigungsbalkenBearbeiten

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

Benachrichtigungs-PopupsBearbeiten

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 SituationenBearbeiten

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

  • [Hilfe:Bearbeiten-Links#CSS|Bearbeiten-Links]
  • [Hilfe:Dateien nach Commons verschieben#CSS|Dateien nach Commons verschieben]
  • [Hilfe:Echo#CSS|Echo]
  • [Hilfe:Echo/Danke#CSS|Danke]
  • [Hilfe:Einzelnachweise#CSS|Einzelnachweise]
  • [Hilfe:Inhaltsverzeichnis#CSS|Inhaltsverzeichnis]
  • [Hilfe:Kategorien#CSS|Kategorien]
  • [Hilfe:Navigationsleisten#CSS|Navigationsleisten]
  • [Hilfe:Neue Nachrichten#CSS|Neue Nachrichten]
  • [Hilfe:Signatur#CSS|Signatur]
  • [Hilfe:Weiterleitung#CSS|Weiterleitung]

Persönlichen Zeichensatz vereinbarenBearbeiten

Auf Seiten mit nichtlateinischen Texten müssen die fremdsprachlichen Zeichen eingebunden werden. Dies sollte nur über [Hilfe:Vorlagen|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.

Seinen eigenen Stil findenBearbeiten

Wer den Wunsch hat, weitere persönliche Hervorhebungen oder Ausblendungen zu definieren, geht 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 [../JS#Debugging|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 [Tag (Informatik)|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 [:en:Wikipedia:Catalogue of CSS classes#Classes|englischsprachigen Wikipedia] zu finden.

Server-seitige StileBearbeiten

Automatisch eingebundene Standardstile in der deutschsprachigen Wikipedia sind:

  • [MediaWiki:Common.css]
    gemeinsam für alle Skins; dazu jeweils
    • [MediaWiki:Vector.css]
    • [MediaWiki:Monobook.css]
    • [MediaWiki:Modern.css]
    • [MediaWiki:Print.css|Print.css]
      deutschsprachige Wikipedia

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

Inzwischen werden vom Server weltweit gültige Komponenten mittels des [../JS/ResourceLoader|ResourceLoaders] zusammengestellt. Mehr unter [../MediaWiki|Skin/MediaWiki].

Erweiterte MöglichkeitenBearbeiten

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 URLBearbeiten

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.

JavaScriptBearbeiten

Bedingter Import von einer URLBearbeiten

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 [../JS#importStylesheetURI()|importStylesheetURI()] benutzt. Diese ist veraltet (ab Frühjahr 2016 auch nicht mehr verfügbar) und bietet keinen besonderen Vorteil.

Bedingter Import einer Wikipedia-SeiteBearbeiten

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 [../JS#importStylesheet()|importStylesheet()] benutzt. Hier wurde statt der URL nur der Titel der Seite angegeben. Vermutlich 2016 ist dies auch nicht mehr verfügbar.

Dynamisches Einfügen von CSS in die SeiteBearbeiten

Über die Funktion mw.util.addCSS() – veraltet, ab Frühjahr 2016 auch nicht mehr verfügbar: appendCSS() aus [Wikipedia:Technik/Skin/JS/Obsolet#wikibits|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 AufgabenBearbeiten

TestenBearbeiten

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

Seit [MediaWiki] 1.17 (2011) wird an die [Uniform Resource Locator|URL] der Standard-CSS-Definition aller Benutzer ([Special:Mypage/common.css|common.css] sowie etwa [Special:Mypage/vector.css|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 [#JavaScript|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 [../JS#Browser-Cache|Skin/JS] angegebenen Möglichkeiten einzusetzen.

WeiterleitungsseitenBearbeiten

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

Seit Sommer 2015 wird beim [Hilfe:Seite verschieben|Verschieben] einer CSS-Seite automatisch eine CSS-Weiterleitung mittels [#@import|@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.

WikisyntaxBearbeiten

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 [#Kommentare|CSS-Kommentar] /* {{SLA}} */ gesetzt werden.

Sollten unerwünschte Verlinkungen entstehen, kann der Quelltext hingegen mit <nowiki> umschlossen werden.

Im Übrigen haben die einschlägig wirksamen Seiten das „[../../MediaWiki/Content Model|Content Model]“ CSS.

FormatierungBearbeiten

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

MediaWiki empfiehlt hierzu einen sinnvollen [mw:Manual:Coding conventions#Commenting and documentation|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.

HilfsmittelBearbeiten

jigsaw.w3.org
Überprüfen von CSS-Code; wahlweise Prüfung einer URL (etwa Benutzerseite) oder Texteingabe

Weitere InformationenBearbeiten

AnmerkungenBearbeiten

  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