Hilfe:CSS/TemplateStyles

Seit 2018 ist eine Möglichkeit vorhanden, speziell für eine bestimmte Seite CSS-Definitionen verfügbar zu machen.

In erster Linie ist dabei an Seiten gedacht, die eine bestimmte Vorlage einbinden, wobei dann diese Vorlage für sich selbst oder auch für eine Gruppe damit verbundener Vorlagen die Stildefinitionen aktiviert.

Das Feature setzt fortgeschrittene Kenntnisse in Wikisyntax, CSS, Seiten- und Projektorganisation voraus.

Organisation

Im Vorlagen-Namensraum wird eine Gruppe von zwei Seiten angelegt:

1. Vorlage:Dingens/styles
2. Vorlage:Dingens/styles.css

Die erste Seite enthält die spezifische Dokumentation, verlinkt mit Anwendungen und bewirkt die Kategorisierung.

• In ihr sind automatisch die Stildefinitionen eingebunden, und sie soll an einigen Anwendungsbeispielen typische Auswirkungen der Stile demonstrieren.
• Sie ist mittels <noinclude>{{Dokumentation/styleSeite}}</noinclude> in der ersten Zeile zu kennzeichnen.

Die zweite Seite enthält reinen CSS-Code.

• Der Inhalt muss sanitized sein; so darf er beispielsweise keine Konstrukte mit url() enthalten, weil diese automatische zwangsweise Zählpixel auf beliebige Fremdserver enthalten könnten.
• Wenn der Inhalt harmlos erscheint, erhält er das Content Model sanitized-css („Bereinigtes CSS“) und kann verwendet werden.

Das CSS kann dann von beliebigen Vorlagen oder selbst direkt in Metaseiten eingebunden werden.

• So kann eine Muttervorlage stellvertretend für eine ganze Familie von Vorlagen den gemeinsamen CSS-Code bereitstellen; es könnte sogar die einzige Aufgabe der Muttervorlage darin bestehen, den CSS-Code einzubinden, zu verwalten und zu dokumentieren.

Grundsätzlich können die styles.css auch in anderen Namensräumen angelegt werden. Auf das geeignete Content Model wäre dann zu achten.

Alle verwendeten Familien von Selektoren sind auf AufEinWort:Technik/Skin/CSS/TemplateStyles zu dokumentieren.

Aktivierung

Wikisyntax: <tag>

• Typ: unary
• Attribute:
  • src=""

In der aktivierenden Vorlage (die eine styles.css-Unterseite hätte, aber auch in jeder anderen) ist zu Beginn die folgende Anweisung anzubringen; ggf. auch mehrere:

<templatestyles src="Dingens/styles.css" />

Grundsätzlich ist das Element erstmal dazu gedacht, dass nur der expandierte Inhalt einer Vorlage dekoriert werden soll.

• Tatsächlich ist es aber browsertechnisch kaum zu vermeiden, dass spätestens ab dem ersten Auftreten alle Spezifikationen für den Rest der Wiki-Seite wirksam bleiben.
• Unklar im Raum steht, ob es irgendwann in der Zukunft einmal Mechanismen geben könnte, die die Wirkung außerhalb der Vorlageneinbindung verhindern könnten.
• Oberhalb der ersten Einbindung werden die Regeln (je nach Browser) vermutlich nicht wirksam werden.

Wie oft Vorlagen mit solch einem Element in die dargestellte Seite eingebunden werden, ist gleichgültig; die Wiki-Software arbeitet die Definitionen nur ein einziges Mal in die Gesamtseite ein.

Mögliche CSS-Regeln

Alle regulären CSS3-Dekorationen sind möglich.

• Voraussetzung sind allerdings Anweisungen, die auch in den Kernbestand großer Browser übernommen wurden.
• @media, @page, @supports, @keyframe und @font-face/@font-feature-values sind möglich.
• Herstellerspezifische Angaben wie beginnend mit -webkit-, -moz-, -ms- werden nicht unterstützt.
• Ausgeschlossen sind wie üblich url(), background-image usw.
  • Ausnahme: URL, deren Pfad zu freigegebenen WMF-Projekten gehört, namentlich commons.
• Die Regeln wirken auf den Bereich im HTML-Dokument, der mit class="mw-parser-output" markiert ist. In jedem Selektor im CSS-Dokument wird also bei der Ausgabe .mw-parser-output ergänzt. Es ist daher zwar möglich, in Selektoren Elemente zu nutzen, die (wie z. B. das <body>-Element) oberhalb des mw-parser-output-Containers in der HTML-Struktur stehen, diese können aber mittels CSS nicht selbst Wirkungsziel werden. Damit ist eine Wirkung außerhalb des Inhaltsbereichs (etwa im Portalrahmen) ausgeschlossen.
• Die Regeln werden unmittelbar vor dem ersten Element, das sie anfordert, in das HTML-Dokument einmalig eingefügt. Damit haben sie gegenüber allen sonstigen Projekt- und Benutzer-Regeln Vorrang, weil sie erst nach diesen in der Kaskade auftreten. Um trotzdem noch eine Benutzer-Regel wirksam werden zu lassen, muss ggf. mit !important oder expliziteren Spezifitäts-Regeln gearbeitet werden.

Verwendungen

Mit „Links auf diese Seite“ werden die jeweiligen Verwendungen als Vorlageneinbindungen aufgelistet.

Content Model

Die Deklarationen werden nur wirksam, wenn die Seite das Content Model (Inhaltsmodell) sanitized-css – „Bereinigtes CSS“ hat.

• Bei Neuanlage einer Seite im Vorlagen-Namensraum wird dies automatisch zugewiesen.
• Andernfalls muss es durch Administratoren konfiguriert werden (über Spezialseite Inhaltsmodell einer Seite ändern).
• Beim Speichern jeder Bearbeitung einer Seite, die diese Eigenschaft hatte, wird geprüft, ob alle Anweisungen sicherheitsmäßig unbedenklich sind. Ist das nicht der Fall, ist die Speicherung nicht möglich bzw. das Modell fällt auf css zurück.
• Gibt es einmal Schwierigkeiten, empfiehlt es sich, zuallererst das Content Model auf das neutrale css zu setzen. Nach Verbesserung des Inhalts kann dann wieder sanitized-css – „Bereinigtes CSS“ gesetzt werden.

Wartung

Fehler werden in Wartungskategorien erfasst:

• Fehlerhafte CSS-Definitionen in Kategorie:AufEinWort:TemplateStyles-Stylesheet mit Fehler (zurzeit 0)
• Probleme bei der Verwendung in Seiten über Kategorie:AufEinWort:Seite mit TemplateStyles-Fehler (zurzeit 0)

Wird im Element auf eine fehlende oder leere Seite verwiesen, dann erscheint eine Fehlermeldung: „Die Seite …/styles.css hat keinen Inhalt.“

Weitere Informationen

MediaWiki: Help:TemplateStyles – Freie Wikisoftware (englisch)

Phabricator – Workboard: #TemplateStyles (englisch)

• ETST/* – Quellcodes der Programmierung
• AufEinWort:Technik/Skin/CSS/TemplateStyles – Organisation innerhalb AufEinWort