Quelltext der Seite Hilfe:CSS/TemplateStyles

{{Hilfe}}
Seit April 2018 ist eine Möglichkeit vorhanden, speziell für eine bestimmte Seite [[Cascading Style Sheets|CSS]]-Definitionen verfügbar zu machen.

In erster Linie ist dabei an Seiten gedacht, die eine bestimmte [[Hilfe:Vorlagen|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:
# <code>Vorlage:[[Metasyntaktische Variable|Dingens]]/styles</code>
# <code>Vorlage:Dingens/styles.css</code>

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 <code style="white-space:nowrap">&lt;noinclude>{{Vorlage|Dokumentation/styleSeite}}&lt;/noinclude></code> in der ersten Zeile zu kennzeichnen.
Die zweite Seite enthält reinen CSS-Code.
* Der Inhalt muss ''sanitized'' sein; so darf er beispielweise keine Konstrukte mit <code>url()</code> enthalten, weil diese automatische zwangsweise [[Zählpixel]] auf beliebige Fremdserver enthalten könnten.
* Wenn der Inhalt harmlos erscheint, erhält er das [[Wikipedia:Technik/MediaWiki/Content Model|Content Model]] <code style="white-space:nowrap">sanitized-css</code> („{{int:content-model-sanitized-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 <code>styles.css</code> auch in anderen Namensräumen angelegt werden. Auf das geeignete [[#ContentModel|Content Model]] wäre dann zu achten.

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

== Aktivierung ==
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:
<syntaxhighlight lang="html">
<templatestyles src="Dingens/styles.css" />
</syntaxhighlight>
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.
* <code>@media</code>, <code>@page</code>, <code>@supports</code>, <code>@keyframe</code> und <code>@font-face</code>/<code>@font-feature-values</code> sind möglich.
* Herstellerspezifische Angaben wie beginnend mit <code>-webkit-</code>, <code>-moz-</code>, <code>-ms-</code> werden nicht unterstützt.
* Ausgeschlossen sind wie üblich <code>url()</code>, <code>background-image</code> usw.
** Ausnahme: URL, deren Pfad zu freigegebenen WMF-Projekten gehört, namentlich ''commons''.
* Die Regeln wirken auf den Bereich im HTML-Dokument, der mit <code style="white-space:nowrap">class="mw-parser-output"</code> markiert ist. Jedem Selektor im CSS-Dokument wird also bei der Ausgabe <code>.mw-parser-output </code> vorangestellt. Es ist daher nicht möglich, in Selektoren auf Elemente zu verweisen, die (wie z.&nbsp;B. das <code>&lt;body></code>-Element) oberhalb des mw-parser-output-Containers in der HTML-Struktur stehen. Das ist ein Teilbereich des Inhaltsbereichs, und damit ist eine Wirkung außerhalb (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 <code>!important</code> oder expliziteren Spezifitäts-Regeln gearbeitet werden.

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

== {{Anker|Inhaltsmodell}} Content Model ==
Die Deklarationen werden nur wirksam, wenn die Seite das [[Wikipedia:Technik/MediaWiki/Content Model|Content Model]] (Inhaltsmodell) <code style="white-space:nowrap">sanitized-css</code> – „{{int:content-model-sanitized-css}}“ hat.
* Bei Neuanlage einer Seite im Vorlagen-Namensraum wird dies automatisch zugewiesen.
* Andernfalls muss es durch Administratoren konfiguriert werden (über Spezialseite [[Spezial:ChangeContentModel|{{int:changecontentmodel}}]]).
* 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 <code>css</code> zurück.
* Gibt es einmal Schwierigkeiten, empfiehlt es sich, zuallererst das Content Model auf das neutrale <code>css</code> zu setzen. Nach Verbesserung des Inhalts kann dann wieder <code style="white-space:nowrap">sanitized-css</code> – „{{int:content-model-sanitized-css}}“ gesetzt werden.

== Wartung ==
Fehler werden in Wartungskategorien erfasst:
* Fehlerhafte CSS-Definitionen in [[:Kategorie:Wikipedia:TemplateStyles-Stylesheet mit Fehler]] (zurzeit&nbsp;<code>{{PAGESINCATEGORY:Wikipedia:TemplateStyles-Stylesheet mit Fehler}}</code>)
* Probleme bei der Verwendung in Seiten über [[:Kategorie:Wikipedia:Seite mit TemplateStyles-Fehler]] (zurzeit&nbsp;<code>{{PAGESINCATEGORY:Wikipedia:Seite mit TemplateStyles-Fehler}}</code>)
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}}
{{Phabricator|Engage=TemplateStyles|ICON=1|ENGL=1}}
* {{Phab|project=ETST}} – Quellcodes der Programmierung
* [[Wikipedia:Technik/Skin/CSS/TemplateStyles]] – Organisation innerhalb der deutschsprachigen Wikipedia
<noinclude>
{{SORTIERUNG:TemplateStyles}}
[[Kategorie:Hilfe:Wikisyntax]]
[[Kategorie:Hilfe:Vorlagen]]
[[Kategorie:Hilfe:MediaWiki-Erweiterung]]
[[Kategorie:Vorlage:TemplateStyles|!‎]]
</noinclude>