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.
Schnell und einfach mittels Einstellungen:
Beim 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 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.
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:
style="...")!importantFür CSS-Seiten, die nur Code enthalten, gilt:
#L-1, #L-2, #L-3 usw.#L-14).<nowiki> eingeschlossen werden.css (bzw. sanitized-css im Fall von TemplateStyles).Für die CSS-Unterseiten im Benutzernamensraum gilt außerdem:
.css enden, damit sie von jeder beteiligten Software sicher erkannt werden.Auch in CSS gibt es die Möglichkeit, Kommentare zu den Deklarationen zu hinterlassen. Dabei ist jedoch zu beachten:
/* und endet mit */ (auch nach mehreren Zeilen).<!-- Format --> ist nicht möglich. Es würde dazu führen, dass die gesamten Deklarationen zumindest ab dieser Stelle nicht mehr erkannt werden./* Kommentar */ darf nicht innerhalb einer Deklaration stehen; also entweder nach einer schließenden Klammer } oder am Beginn der Seite möglich.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.
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.
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, weshalb bei Verlinkungen außerhalb der aktuellen Seite die Schriftfarbe intelligenterweise nicht verändert werden sollte.
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.
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.
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.
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)
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.
.ns-0 #mw-content-text A.external {
border: 1px solid #4080FF;
}
Blau umrahmt, erinnernd an das Weblink-Symbol 
.
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.
Ü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;
}
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;
}
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_MeinEigenerBenutzerNameUL#pagehistory vor den Listeneinträgen.skin-vector (siehe Hilfe:Skin).ns-0 Artikelnamensraum.ns-n mit n als Nummer des Namensraums
.ns-talk (alle ungeraden Namensraum-Nummern >0).ns-subject (keine Diskussions- oder Spezialseite)..ns-special (zusätzlich zu .ns--1).action-* (view, edit, etc.) als Klasse des HTML-bodyBeispiele für die Beschränkung auf bestimmte Seiten unter Externe Links.
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.
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.
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 */
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.
Zwei spezielle Eigenschaften können auf der Beobachtungsliste ausgenutzt werden:
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.watchlist-NamensraumNummer-Artikelbezeichnera.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;
}
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.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):
.mw-changeslist-line-watched .mw-title {
font-weight: normal;
}
.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.
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.
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.
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;
}
Gilt für Versionsgeschichte und Versionsvergleich; teils Beobachtungsliste.
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;
}
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;
}
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_intro abgedeckt.#mw-watchlist-resetbutton ul liSiehe 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
Siehe dazu: Hilfe:Inhaltsverzeichnis
Siehe dazu auch: Skin/GUI
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;
}
Angemeldete Benutzer erhalten seit November 2013 ihre Benachrichtigungen mittels Echo. Zur Konfiguration simulierender Helferlein und für nicht angemeldete Benutzer siehe Hilfe:Neue Nachrichten.
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.postedit#mw-notification-areaFür die nachstehenden Situationen sind auf den einschlägigen Hilfeseiten Möglichkeiten zur individuellen CSS-Konfiguration dargestellt:
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.
Wer den Wunsch hat, weitere persönliche Hervorhebungen oder Ausblendungen zu definieren, geht wie folgt vor:
<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>.class="XYZ" oder id="abcd". Es kann mehrere Elemente der gleichen class geben; id sollte aber jeweils nur ein einziges Mal vorkommen.id= wird ein # dem Bezeichner vorangestellt, für class=" ein . (Punkt).<div id="abcd">…<span class="XYZ">Interessant</span>…</div>#abcd span.XYZ{} setzen:
color: #FF80FF; – magenta background-color: #80FFFF; – türkisfont-weight: bold;border: 1px solid #0000FF; – viele weitere Möglichkeitendisplay: 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.
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.
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.
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.
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.
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.
Ü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.
Bei der Bearbeitung werden die Definitionen bereits wirksam, wenn man „Vorschau“ oder „Änderungen“ anklickt. Damit lassen sie sich an den auf der „“-Seite und der Portalumgebung sichtbaren Elementen testen, ohne die Versionsgeschichte belasten zu müssen.
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.
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.
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.
Hat man viele Stile definiert, wird die Zusammenstellung schnell unübersichtlich.
MediaWiki empfiehlt hierzu einen sinnvollen Standard (von mehreren allgemein gebräuchlichen):
.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.