Help:TemplateStyles/de

TemplateStyles 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 löst es?
Traditionell gibt es zwei Wege, Vorlagen (oder irgendeinen anderen Inhalt) mit styles zu versehen: Mittels inline-Definition (Durch benutzen von HTML und Attributen wie ) oder durch Benutzen von Seiten im MediaWiki-Namensraum, wie MediaWiki:Common.css. Keine von diesen Möglichkeiten ist in jeder hinsicht zufriedenstellend.

Für Inline-Styling:


 * Es gibt keine Seperation 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, Syntaxhighlight oder andere Unterstützung zu bieten.
 * Die Stil-Definitionen müssen für jedes sie benutzende Element wiederholt werden, 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, sodass es unmöglich ist, Vorlagen für Verschiedene Bildschirmbreiten zum funktionieren zu bringen. Weiterhin überschreiben inline-Styles Nutzer-, Skin,- und Deviceabhängige Stile, sodass Benutzer,- Skin,- und Deviceabhängige Modifikationen unmöglich werden.

Für -Seiten:

Editierbegrenzungen können nicht aufgehoben werden, weil kein Weg existiert, die verfügbaren CSS-Definitionen auf unschädliche, die nicht zum tracken der IP-Adresse eines Lesers oder zum ausführen von Scripten fähige (nur noch in älteren Browsern) zu begrenzen.
 * Die Bearbeitung kann nur von Administratoren forgenommen werden, was die Beteiligung verhindert.
 * Die Änderungen können nicht ohne zu speichern getestet werden.
 * Alle Stildefinitionen werden auf allen Seiten geladen, ob sie benutzt werden oder nicht, was Bandbreite verschwendet und das Debugging schwerer macht.

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 TemplateSandbox) wie vorhergesehen.

Die Hindernisse zu veringern wird hoffentlich in mehr Innovation in der Art, wie Vorlagen gestaltet sind, bringen und die Bedeutung von Bildschirmen verringern, weil auf Mobilen Geräten, die mittlerweile die Hälfte der Seitenaufrufe der Wikipedia verursachen, die Bearbeitung erleichtert wird

Ist es sicher?
Ja! TemplateStyles enthält einen CSS-Parser, der den CSS-Quelltext liest, serialisiert, allen Code escaped und CSS-Regeln, die nicht auf seiner Whitelist stehen, entfernt. Der Parser wird externe Resourcen (wie Hintergrundbilder) entfernen, dabei aber lokale erlauben. Weiterhin werden die CSS-Selektoren umgeschrieben, sodass 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, die von einem der größeren Browser Anfang 2017 unterstützt wurden, akzeptiert. Neben simplen Regeln funktionieren weiterhin:, , ,  und  /  (wobei font-face aus Sicherheitsgründen auf Schriftarten, deren Namen mit TemplateStyles beginnt, beschränkt ist).

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

How can I target mobile/desktop resolutions?
Media queries allow you to target elements at mobile resolution and desktop resolution. Some advise making your styles mobile friendly by default and wrapping desktop styles within the media query. Note, MediaWiki has standardised on 720px and 1000px breakpoints to represent tablet and desktop.

How can I target specific skins?
MediaWiki provides various classes on the  and   elements, including one that indicates which skin is in use. These can be targeted by including a simple selector for the  or   element including the needed classes, followed by a space (or in CSS terms, the descendant combinator).

Generally, this technique should be used for design consistency, rather than targeting mobile and desktop as all skins can be used in both mobile and desktop resolutions. See also #How can I target mobile/desktop resolutions?.

In which order do CSS styles override?
Which CSS rule takes effect is controlled by specificity (roughly, the complexity of the selector - e.g.  is more specific than  ). In case of equal specificity, CSS styles that come later in the document override earlier styles.

Mediawiki:Commons.css, other site scripts, user scripts and gadgets are loaded in the  section of the page. TemplateStyles stylesheets are loaded in the, so they override site/user script and gadget rules with equal specificity, and in the case of two TemplateStyles rules, the second overrides the first. (Note though that TemplateStyles rules are deduplicated: if the same stylesheet is referenced multiple times on the page, it is only inserted the first time. Note also that "later" has to do with document position, not load order. Gadgets add their CSS after the page has fully loaded, by manipulating the page with Javascript; some add it on-demand when the user does some action such as clicking a button. Nevertheless, they add it to the head, so equally-specific CSS rules in the body get precedence over it.)

Welche Anti-Missbrauch-Funktionen werden bereitgestellt?
The design choice to store CSS in separate pages was made in part to make integration with the standard anti-abuse toolset easy. TemplateStyles CSS pages have their own content model so changes to them can be tracked or controlled with AbuseFilter, using the   variable.

CSS inclusion is tracked the same way as template transclusion, so you can see where a stylesheet is used via the "What links here" option, see what stylesheets are used on a page under "Page information" (and possibly on the edit screen, depending on what editor you use), and see what recent changes might be affecting a page using "Related changes".

TemplateStyles also leaves identifying information in the HTML code; to find out where a specific rule comes from, look at the page source, and the enclosing  tag will have an attribute like , where 123456 is the revision ID of the stylesheet (viewable with Special:Diff, for example).

Wie wurden die Entscheidungen in Bezug auf TemplateStyles getroffen?
The idea of including CSS with templates was proposed and accepted in a request for comments. Technical details were pinned down in a second RfC and workflow details in a user consultation.

Wer arbeitet an TemplateStyles?
TemplateStyles was originally a project of the Wikimedia Reading Infrastructure team (preceded by exploratory work Coren did as a volunteer), then people moved around. It is now maintained by an ad hoc WMF team consisting of Brad Jorsch (developer), Chris Koerner (community liaison), Dan Garry (product manager), Gergő Tisza (developer) and Grace Gellerman (project manager).

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

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

Die TemplateTyles Erweiterung war im März 2018 auf Folgenden Projekten aktiviert:

Calling from a Lua module
TemplateStyles can be called from a Lua module using.

Example code is the following:

Siehe auch

 * Extension:TemplateStyles, especially the #Caveats section.