Help:TemplateStyles/de

 ist ein Tool, um komplexe Stildefinitionen in Vorlagen ohne Administratorrechte zu ermöglichen.

Wie funktioniert es?
Bearbeiter können zu einer Wikiseite hinzufügen, und der Inhalt von  wird als CSS (siehe auch de:CSS) geparst, bereinigt (englisch „sanitized“) und auf Seiten geladen, auf denen das -Tag verwendet wird (direkt oder über eine Muttervorlage).

muss das Seiten-Inhaltsmodell (englisch „content model“; siehe auch de:Wikipedia:Technik/MediaWiki/Content Model)   haben,welches das Standard-Modell für Seiten im Vorlagennamensraum ist, die auf    enden. Üblicherweise wird es genutzt, um die Stildefinitionen für eine  auf einer Unterseite wie   unterzubringen.

Wenn  keinen Namensraumpräfix hat, wird der Vorlagennamensraum angenommen. Das heißt,  wird   laden.

Das -Tag sollte vor dem Inhalt stehen, auf den er wirkt, um kurzzeitig aufblitzende Inhalte ohne Stil (siehe auch de:Flash of Unstyled Content) zu vermeiden, wenn die Seite partiell bereits gerendert wird, während sie noch geladen wird.

Welche Probleme werden gelöst?
Traditionell gibt es zwei Wege, Vorlagen (oder irgendeinen anderen Inhalt) mit Stilen zu versehen: mittels Inline-Definition (durch Benutzen von HTML-Elementen und Anwendung von Attributen wie  auf diese) oder durch Benutzen von Seiten im MediaWiki-Namensraum, wie $common-css. Keine von diesen Möglichkeiten ist in jeder Hinsicht zufriedenstellend.

In Bezug auf Inline-Styling:


 * Es gibt keine Trennung von Stilen und Inhalt. In Fällen, wo der Inhalt nicht von einer Vorlage kommt (wie Tabellen in Artikeln), wird der Wikitext zu unübersichtlich für die meisten Bearbeiter.
 * Wenn Stile mit Wikitext gemischt werden, ist es (nahezu) unmöglich, Syntaxhighlighting oder andere Formen von CSS-Unterstützung zu bieten.
 * Die Stil-Definitionen müssen für jedes sie benutzende Element wiederholt werden, für das sie genutzt werden sollen, was zu viel Copy-Paste und fast unlesbaren und schwer zu verwaltendem Code führt.
 * Stil-Definitionen sind auf ein Minimum von CSS begrenzt. Hauptsächlich -Regeln, die für Responsives Design benötigt werden, funktionieren nicht, so dass es unmöglich ist, Vorlagen für verschiedene Bildschirmbreiten zum Funktionieren zu bringen. Weiterhin überschreiben Inline-Styles Nutzer-, Skin,- und geräteabhängige Stile, so dass Benutzer,- Skin,- und geräteabhängige Modifikationen unmöglich werden.
 * Since styles are mixed with wikitext, syntax highlighting and other forms of CSS editing support are difficult or impossible.
 * Styles have to be repeated for each HTML element they apply to, which results in lots of copy-pasting and code that is hard to read and maintain.
 * Style attributes are limited to a subset of CSS. Most importantly,  rules needed for responsive design do not work so it's impossible to make templates that work well over a wide range of screen sizes. Furthermore, inline styles take precedence over CSS stylesheets so user-, skin- or device-specific customizations become more difficult.

In Bezug auf -Seiten:


 * Die Bearbeitung kann nur von Administratoren vorgenommen werden, was die Beteiligung massiv erschwert.
 * Editierbegrenzungen können nicht aufgehoben werden, weil kein Weg existiert, die verfügbaren CSS-Definitionen auf unschädliche Regeln zu begrenzen, die nicht zum Tracken der IP-Adresse eines Lesers geeignet sind oder sogar zum Ausführen von Skripten fähig sind (nur noch in älteren Browsern).
 * Die Änderungen können nicht ohne Speichern getestet werden.
 * Alle Stildefinitionen werden auf allen Seiten geladen, ob sie benutzt werden oder nicht, was Bandbreite verschwendet und das Debugging schwerer macht.
 * Editing restrictions cannot be lifted as there is no way to limit what CSS rules can be used, and some of them could be abused to track readers' IP addresses or even execute scripts in some older browsers.
 * Changes are impossible to test without saving first.
 * All stylesheets must be loaded on all pages (whether they actually use the page or not), which wastes bandwidth and makes debugging style rules harder.

TemplateStyles erlaubt es Bearbeitern, Stildefinitionen zu einer spezifischen Seite hinzuzufügen, während gefährliche Konstrukte gefiltert werden. Das funktioniert auch mit Vorschau-/Debug-Tools (wie der TemplateSandbox; siehe auch de:Hilfe:Vorlagenspielwiese) wie vorhergesehen.

Die Hindernisse zu verringern wird hoffentlich zu mehr Innovation in der Art, wie Vorlagen gestaltet sind, und zu geringerem Wartungsaufwand führen sowie eine bessere Anpassung an die Bildschirmauflösung ermöglichen (vor allem an mobile Geräte, die mittlerweile die Hälfte der Seitenaufrufe der Wikipedia verursachen).

Ist es sicher?
Ja! TemplateStyles enthält einen CSS-Parser, der den CSS-Quelltext liest, serialisiert, allen Code escapet und CSS-Regeln entfernt, die nicht auf seiner Whitelist stehen. Der Parser wird insbesondere externe Ressourcen (wie Hintergrundbilder) entfernen, dabei aber lokale erlauben. Weiterhin werden die CSS-Selektoren umgeschrieben, so dass sie nur innerhalb des Artikeltextes wirksam werden. (Visuelle Änderungen wie das Ändern der Position mit dem Position-Attribut und andere, bereits vorher mit Inline-Definitionen mögliche Definitionen funktionieren wie gehabt.)

Welche CSS-Regeln werden erkannt?
Momentan werden die meisten CSS3-Definitionen akzeptiert, die von einem der größeren Browser unterstützt wurden (Stand Anfang 2017). Neben simplen Regeln funktionieren weiterhin:, , ,  und  /  (wobei font-face aus Sicherheitsgründen auf Schriftarten beschränkt ist, deren Namen mit   beginnt). For a comprehensive list of allowed properties, see the "$props" parts of the StylePropertySanitizer code from.

Nicht-standardmäßige Eigenschaften (inklusive Hersteller-Präfixen) sind derzeit nicht unterstützt. Siehe für Pläne.

Wie kann ich mobile und Desktop-Auflösungen berücksichtigen?
Medienabfragen (englisch „media queries“) erlauben es, gezielt Elemente in Auflösungen für Mobil- und Desktopgeräte zu beeinflussen. Manche Leute empfehlen, Stile mobilfreundlich zu gestalten und Desktopstile in die Medienabfrage zu integrieren. Beachte, dass MediaWiki standardidisierte Umbruchsbreiten bei 720px and 1000px besitzt (Umbruchsbreite: englisch „breakpoint“) für die Darstellung in Tablet- und Desktop-Auflösungen.

Wie kann ich spezifische Benutzeroberflächen berücksichtigen?
MediaWiki bietet stellt verschiedene Klassen in den - und  -Elementen bereit, darunter eine, die anzeigt, welche Benutzeroberfläche (englisch „skin“) in Verwendung ist. So kann die Beeinflussung dadurch erfolgen, dass ein simpler Selektor an das - oder  -Element angehängt wird bestehend aus der benötigten Klasse, gefolgt von einem Leerzeichen (oder in CSS-Begriffen vom Nachfahrenkombinator, englisch „descendant combinator“).

Im Allgemeinen sollte diese Technik nur für die Konsistenz des Designs verwendet werden, anstatt Mobil- und Desktopauflösungen zu beeinflussen, da alle Skins für diese Auflösungen verwendet werden können. Siehe auch Wie kann ich mobile und Desktop-Auflösungen berücksichtigen?

How do I use styles in MediaWiki messages?
To prevent a malicious user from messing with the parts of the document outside the main content area, all CSS rules automatically get prefixed by the  CSS class. If you use a TemplateStyles-based template outside of the content area (e.g. in the sitenotice), you need to provide that class yourself, by wrapping the template in something like.

In welcher Reihenfolge übersteuern CSS-Stile einander?
Welche CSS-Regel aktiv ist, wird beeinflusst von der Spezifität (grob gesagt der Komplexität des Selektoren – beispielsweise ist  spezifischer als  ). Wenn die Spezifität gleich ist, übersteuern CSS-Stile, die später im Dokument vorkommen, frühere Stile.

, andere projektweite Skripte, Benutzerskripte und Helferlein werden im -Bereich der Seite geladen. TemplateStyles-Stile werden im geladen, so dass sie Regeln aus Projekt-/Benutzskripten und Helferlein übersteuern, wenn die Spezifität identisch ist, und im Falle zweier TemplateStyles-Regeln übersteuert die zweite die erste. (Beachte aber, dass in TemplateStyles ein Dublettenabgleich erfolgt: Wenn dieselbe Regel auf einer Seite mehrfach referenziert wird, wird sie nur beim ersten Mal eingefügt. Beachte auch, dass „später“ sich auf die Position im Dokument bezieht, nicht auf die Reihenfolge des Ladens. Helferlein fügen ihr CSS hinzu, nachdem die Seite geladen ist, indem sie mittels JavaScript manipuliert wird; manche fügen es auch erst auf Anforderung durch den Benutzer ein, wenn er eine Aktion auslöst, etwa durch Drücken eines Schalters. Trotzdem fügen sie es in den Kopfbereich ein, also in, so dass CSS-Regeln mit gleicher Spezifität aus dem   Vorrang vor ihnen erhalten.)

Aufruf von einem Lua-Modul aus
TemplateStyles kann aus einem Lua-Modul heraus aufgerufen werden mit Hilfe der Erweiterung.

Vergleiche folgenden Beispielcode:

Welche Anti-Missbrauch-Funktionen werden bereitgestellt?
Die Designentscheidung, CSS auf separaten Seiten zu speichern, erfolgte zum Teil aus dem Grund, die Integration in das Standard-Antimissbrauchs-Toolset leicht zu machen. TemplateStyles-CSS-Seiten besitzen ihr eigenes Inhaltsmodell, so dass Änderungen an ihnen mit Missbrauchsfiltern verfolgt ud kontrolliert werden können (mit der Variable ).

Die CSS-Einbindung wird auf die gleiche Weise wie die Transklusion von Vorlagen verfolgt, sodassDu über die Option "" sehen kannst, wo ein Stylesheet verwendet wird und welche Stylesheets auf einer Seite unter "" (und möglicherweise auf dem Bearbeitungsbildschirm) verwendet werden Klicke auf den von Dir verwendeten Editor, und überprüfe mithilfe von "", welche Änderungen sich auf eine Seite auswirken können.

TemplateStyles hinterlässt auch im HTML-Code identifizierbare Informationen; um herauszufinden, woher eine spezifische Regel stammt, sieh im Seitenquelltext nach – das einschließende -Tag wird ein Attribut wie  besitzen, wo   die Revisions-ID des Stils ist (beispielsweise sichtbar mit Special:Diff).

Wie wurden die Entscheidungen in Bezug auf TemplateStyles getroffen?
Die Idee, CSS mit Vorlagen einzubinden, wurde in einem Request for Comments vorgeschlagen und akzeptiert. Technische Details wurden in einem zweiten RfC festgehalten und Workflow-Details in einer Benutzerbefragung.

Wer arbeitet an TemplateStyles?
TemplateStyles war ursprünglich ein Projekt des $wminfr (vorangegangen waren Erörterungen durch den Volunteer Coren), dann wechselten die Personen. Es wird jetzt gepflegt durch ein WMF-Team bestehend aus Brad Jorsch (Entwickler), Chris Koerner (Communityverbindung), Dan Garry (Produktmanager), Gergő Tisza (Entwickler) and Grace Gellerman (Projektmanager).

Wo melde ich Fehler/frage ich nach Features?
Wende dich dazu bitte an den Bereich File Tasks im TemplateStyles-Teil von Phabricator.

Wo kann ich es in Aktion sehen?
Du kannst dir einige Beispiele ansehen.

Die TemplateStyles-Erweiterung ist in allen Wikimedia-Projekten aktiviert.

Siehe auch

 * - * $extension (englisch), speziell den Abschnitt Caveats.