Open main menu

Aide:TemplateStyles

This page is a translated version of the page Help:TemplateStyles and the translation is 46% complete.

Other languages:
Deutsch • ‎English • ‎français • ‎română • ‎سنڌي • ‎中文 • ‎日本語 • ‎한국어

TemplateStyles est un outil permettant d'activer des feuilles de style (CSS) pour les modèles sans les droits d'administrateur.

Contents

Fonctionnement

Les contributeurs peuvent ajouter <templatestyles src="[une page]" /> à une page et le contenu d'[une page] sera analysé comme code CSS, nettoyé et chargé sur les pages où la balise <templatestyles> est utilisée (directement ou en étant utilisé dans un modèle qui est utilisé sur une page).

[Une page] doit être un modèle de contenu sanitized-css (CSS nettoyé), qui est la valeur par défaut pour les sous-pages de l'espace de nom Modèle qui se terminent par .css. Il est recommandé d'enregister la feuille de style pour un modèle comme Modèle:Test dans une sous-page comme Modèle:Test/style.css.

Si [une page] n'a pas de préfixe d'espace de noms, l'espace de noms du modèle est supposé. C'est-à-dire que, par exemple, que <templatestyles src="Test/style.css" /> chargera automatiquement Modèle:Test/style.css.

La balise <templatestyles> doit être placée avant le contenu qui doit être chargé, par exemple en haut d'un modèle, afin d'éviter le clignotement du contenu pas encore mis en forme si la page est partiellement rendue alors qu'elle est en cours de chargement.

Quels sont les problèmes qu'il résout ?

Traditionnellement, il y a deux façons de mettre en forme les modèles (ou tout autre contenu) : en utilisant du code CSS directement en ligne (c'est-à-dire en utilisant du code HTML et en y ajoutant des attributs comme style="margin : 10px") ou en utilisant certains messages système spéciaux tels que MediaWiki:Common.css. Aucune de ces approches ne fonctionne très bien.

Pour les éléments de style en-ligne :

  • Il n'y a pas de séparation entre le contenu et la mise en forme. Dans les cas où le contenu ne provient pas d'un modèle (comme les tableaux dans les articles), le wikicode devient trop confus pour la plupart des contributeurs.
  • Puisque les éléments style sont mélangés avec le wikicode, la mise en évidence de la syntaxe du code CSS est alors difficile ou impossible.
  • Les éléments de style doivent être répétés pour chaque élément HTML auxquels ils s'appliquent, ce qui entraîne beaucoup de copier-coller et de code difficile à lire et à maintenir.
  • Les attributs de style sont limités à un sous-ensemble de CSS. Plus important encore, les règles @media requises pour la conception d'une page adaptative (responsive) ne fonctionnent pas, il est donc impossible de créer des modèles qui fonctionnent bien sur une large gamme de tailles d'écran. De plus, les éléments de style en-ligne écrasent les éléments de style dépendant des choix de l'utilisateur, de sorte que les personnalisations spécifiques, à l'habillage ou à l'appareil deviennent plus difficiles.

Pour les pages système MediaWiki:*.css :

  • L'édition est limitée uniquement aux administrateurs, ce qui constitue un obstacle majeur à la participation.
  • Les restrictions d'édition ne peuvent pas être supprimées car il n'y a aucun moyen de limiter les règles CSS qui peuvent être utilisées, et certaines d'entre elles pourraient être abusées pour suivre les adresses IP des lecteurs ou même exécuter des scripts dans certains navigateurs plus anciens.
  • Les modifications sont impossibles à visualiser sans enregistrement préalable (task T112474).
  • Toutes les feuilles de style doivent être chargées sur toutes les pages (qu'elles utilisent les règles CSS ou non), ce qui gaspille de la bande passante et rend le débogage plus difficile.

TemplateStyles permet aux contributeurs d'associer des règles CSS à des pages spécifiques, fournissant toute la puissance des feuilles de style CSS tout en filtrant les éléments dangereux. Il fonctionne avec des outils de prévisualisation / débogage (comme TemplateSandbox) comme prévu.

Réduire les barrières conduira, nous l'espérons, à plus d'innovation dans la manière dont les modèles sont conçus et à réduire l'importance de la taille des écrans, car sur les appareils mobiles, qui représentés la moitié des pages vues de Wikipedia, l'édition est facilitée.

Est-ce que c'est sans danger ?

Oui ! TemplateStyles inclut un analyseur CSS complet qui lit, re-sérialise, utilise des caractères d'échappement pour tout le code et supprime les règles CSS qui ne correspondent pas à sa liste blanche. L'analyseur est suffisamment avancé pour rejeter les ressources externes (telles que les images d'arrière-plan) tout en permettant d'utiliser les ressources locales (comme Commons).

De plus, les sélecteurs CSS sont réécrits de sorte qu'ils ne peuvent pas se référer à des éléments extérieurs au contenu de l'article. (Pour l'instant, il n'est pas impossible de modifier visuellement des zones en dehors du contenu de l'article en déplaçant des parties de l'article, par exemple par un positionnement absolu. Ce n'est pas un changement par rapport au statu quo, car une telle chose était déjà possible avec le wikicode mélangé avec des règles CSS).

Quelles sont les règles CSS @ qui sont reconnues ?

Actuellement, TemplateStyles accepte la plupart des propriétés CSS3 supportées par un ou plusieurs navigateurs majeurs (à partir de 2017). Au-delà des règles simples, @media, @page, @supports, @keyframe et @font-face / @font-feature-values sont également prises en charge (avec des polices d'écriture limitées aux polices dont le nom commence par TemplateStyles, pour des raisons de sécurité).

Les propriétés non standard (y compris les préfixes de Vendor) ne sont pas prises en charge actuellement. Voir T162379 pour les discussions en cours.

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 html and body elements, including one that indicates which skin is in use. These can be targeted by including a simple selector for the html or body 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?.

/* Elements with class 'foo' will have red text in all skins */
.foo { color: red; }

/* Override that to green for Vector only */
body.skin-vector .foo { color: green; }

/* Add a red border if the user doesn't have JavaScript enabled */
html.client-nojs .foo { border: 1px solid red; }

/* Make that border green in Vector */
html.client-nojs body.skin-vector .foo { border-color: green; }
/* This does not work! The 'body' element must be specified. */
.skin-vector .foo { background: orange; }

/* These do not work! The descendant combinator must be used */
body.skin-vector > .foo { background: orange; }
body.skin-vector ~ .foo { background: orange; }
html.client-nojs > body.skin-vector .foo { background: orange; }

In which order do CSS styles override?

Which CSS rule takes effect is controlled by specificity (roughly, the complexity of the selector - e.g. div.foo { margin: 10px } is more specific than .foo { margin: 5px }). 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 <head> section of the page. TemplateStyles stylesheets are loaded in the <body>, 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.)

Quelles sont les fonctions anti-abus fournies ?

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 (sanitized-css) so changes to them can be tracked or controlled with AbuseFilter, using the new_content_model 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 <style> tag will have an attribute like data-mw-deduplicate="TemplateStyles:r123456", where 123456 is the revision ID of the stylesheet (viewable with Special:Diff, for example).

Comment les décisions concernant TemplateStyles ont-elles été prises ?

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.

Qui est chargé de 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).

Où dois-je signaler les erreurs / demander des fonctionnalités ?

Please file tasks under the TemplateStyles component in Phabricator.

Où puis-je voir l'outil en action ?

You can look at some curated examples.

The feature is enabled on all Wikimedia sites.

Calling from a Lua module

TemplateStyles can be called from a Lua module using frame:extensionTag.

Example code is the following:

local p = {};

function p.templateStyle( frame, src )
   return frame:extensionTag( 'templatestyles', '', { src = src } );
end

return p;

Voir aussi