Aide:TemplateStyles

Note : si vous modifiez cette page, vous acceptez de placer votre contribution sous licence CC0. Plus d’informations sont disponibles sur le projet Aide dans le domaine public.

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

Fonctionnement

Les contributeurs peuvent ajouter <templatestyles src="[des pages]" /> à une page donnée et le contenu de la page référencée sera analysé comme code CSS, normalisé et chargé sur les pages où la balise ‎<templatestyles> est utilisée (directement ou en étant utilisé dans un modèle utilisé lui-même sur une page).

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

Si [une page] n'a pas de préfixe d'espace de noms, l'espace de noms Modèle est supposé par défaut. À titre d’exemple si <templatestyles src="Foo/styles.css" /> est indiqué, la page chargée sera Modèle:Foo/styles.css.

La balise ‎<templatestyles> doit être placée avant le contenu dont on veut préciser le style, par exemple en haut du modèle, pour éviter un clignotement du contenu pas encore mis en forme si la page est partiellement rendue alors qu'elle est encore 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 styles sont mélangés avec le wikicode, la [[Special:MyLanguage/Extension:CodeMirror|]] et les autres formes de support d'édition par CSS sont difficiles ou impossibles.
• Les éléments de style doivent être répétés pour chaque élément HTML auquel 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 feuilles de style CSS et les adaptations de l'utilisateur, de l'habillage ou celles liées à l'appareil deviennent plus difficiles.

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

• L'édition est réservée uniquement aux administrateurs d'interface , 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 à tester sans l'enregistrement préalable (tâche 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 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 por l'accès et la maintenance conduiront, nous l'espérons, à fournir plus d'innovation sur la manière dont les modèles sont visuellement conçus, à réduire l'importance de la maintenance, et à l'amélioration des options d'écran (particulièrement pour les appareils mobiles, qui représentent actuellement la moitié des pages vues de Wikipedia).

Est-ce que c'est sans danger ?

Oui ! TemplateStyles inclut un analyseur CSS complet qui lit, re-sérialise, utilise les caractères d'échappement sur tout le code et supprime les règles CSS qu'il ne reconnait pas. 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.

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 est toujours possible 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 status quo, car une telle chose était déjà possible avec le wikicode et les styles en ligne).

Quelles sont les règles CSS 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é). Pour une liste complète des propriétés permises, voir la partie « $props » du code StylePropertySanitizer de css-sanitizer .

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

Comment puis-je cibler les définitions pour la navigation mobile ou station de travail ?

Les requête de média vous permettent d’appliquer des styles différents en fonction de la définition des dispositifs clients. Certains conseils impliques de créer par défaut des styles adaptés au mobile, et d’encapsuler les styles « bureau » dans les requêtes de média. Note : Mediawiki a choisi les points de détermination à 640px et 1120px de largeur d'écran qui représentent le type de client, respectivement la tablette tactile et l'ordinateur de bureau.

Comment cibler un habillage spécifique ?

MediaWiki fournit plusieurs classes pour les balises html et body, dont une qui dépend du thème de l’utilisateur. Celles ci peuvent être ciblées par un simple sélecteur pour les éléments html ou body, en incluant les classes imbriquées, suivi par une espace (dans la terminologie CSS, le combinateur descendant).

En règle générale, nous conseillons d’utiliser cette technique par soucis de cohérence de design, plutôt que de cibler les cibles mobiles et bureau car tous les thèmes peuvent être utilisés pour les définitions mobiles et bureau. Voir aussi #Comment puis-je cibler les définitions pour la navigation mobile ou station de travail ?.

/* 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; }

Comment utiliser les styles dans les messages MediaWiki ?

Pour empêcher un utilisateur malveillant de mélanger des parties du document qui seraient à l'extérieur de la zone de contenu principal, toutes les règles CSS sont automatiquement préfixées par la classe CSS mw-parser-output . Si vous utilisez un modèle basé sur TemplateStyles en dehors de la zone de contenu (par exemple dans la notice de site ), vous devez personnellement fournir cette classe, en encapsulant le modèle dans quelquechose comme <div class="mw-parser-output">...</div>.

Dans quel ordre sont surchargés les styles CSS ?

La règle CSS appliquée est choisie d'après la spécificité (en gros, la complexité du sélecteur - par exemple div.foo { margin: 10px } est plus spécifique que .foo { margin: 5px }). Dans les cas de spécificité égale, le style CSS qui vient en dernier dans le document remplace les styles précédents.

MediaWiki:Commons.css, les autres scripts du site, les scripts utilisateurs et les gadgets sont chargés dans la section ‎<head> de la page. Les feuilles de style TemplateStyles sont chargées dans la section ‎<body>, elles surchargent donc les scripts utilisateurs et les règles de gadgets de spécificité égale, et dans le cas de deux règles TemplateStyles, la seconde remplace la première. (Notez cependant que les règles TemplateStyles sont dédoublonnées: si la même feuille de style est référencées plusieurs fois sur une page, elle est insérée seulement la première fois. Notez également que « plus tard » est relatif à la position dans le document, pas à l’ordre de chargement. Les gadgets ajoutent leur CSS après le chargement complet de la page, en manipulant la page à l'aide de JavaScript ; quelques-un ajoutent leur CSS à la demande quand l'utilisateur fait certaines actions comme cliquer sur un bouton. Ils l’ajoutent néanmoins à la section « head », donc les règles de spécificité égale du CSS dans le « body » ont la précédence sur les règles des gadgets.)

Comment les modules Lua interagissent avec les styles

TemplateStyles peut être appelé à partir d'un module Lua à l’aide de frame:extensionTag.

Voici un code d’exemple :

local p = {};

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

return p;

Quelles sont les fonctions anti-abus fournies ?

Le choix de stocker le CSS dans des pages séparées a été fait dés la conception, en partie pour faciliter l’intégration des outils standards anti-abus. Les pages CSS TemplateStyles ont leur propre modèle de contenu (sanitized-css) afin que leur changement puisse être suivi ou contrôlé par Extension:AbuseFilter , en utilisant la variable new_content_model.

L’inclusion de CSS est surveillée de la même manière que la transclusion de modèle, afin que vous puissiez voir les endroits ou une feuille de style est utilisée grâce au lien « Pages liées », voir quelles feuilles de styles sont utilisées sur une page donnée grâce au lien « Informations sur la page » (information sur la page) (potentiellement également dans l’éditeur de page, en fonction de celui que vous utilisez), et voir quelles modifications récentes pourraient affecter une page en utilisant « Suivi des pages liées » (suivi des pages liées).

TemplateStyles insère également des informations d’identification dans le code HTML ; pour trouver l’endroit d’où provient une règle spécifique, visionnez la source de la page, et les balises ‎<style> auront un attribut comme data-mw-deduplicate="TemplateStyles:r123456", ou 123456 est le numéro de révision de la page de feuille de style (utilisable avec Special:Diff, par exemple).

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

L’idée d’inclure des CSS dans les modèles a été proposée et acceptée sous forme d'appel à commentaire (Request For Comments). Les détails techniques ont été déterminés dans un second appel et le mode d’utilisation dans une consultation des utilisateurs.

Qui est en charge de TemplateStyles ?

TemplateStyles fut initialement un projet de Wikimedia Reading Infrastructure team (précédé du travail exploratoire de Coren comme bénévole) formé en son temps de Brad Jorsch (développeur), Bryan Davis (gestionnaire) and Gergő Tisza (developpeur). Les personnes et les responsabilités ont évolué depuis; voir la page des personnes de maintenance pour les responsabilités actuelles.

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

Veuillez créer une nouvelle tâche pour le composant TemplateStyles dans Phabricator.

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

Voici quelques exemples vérifiés.

Cette fonctionnalité est active sur tous les sites Wikimedia.

Voir aussi

• Extension:TemplateStyles - en particulier la section Mise en garde.
• Wikipedia:TemplateStyles — page de lignes de recommendations sur la Wikipedia anglophone.