Jump to content

Manuel:Interface/Feuilles de style

From mediawiki.org
This page is a translated version of the page Manual:Interface/Stylesheets and the translation is 100% complete.
Languages:

MediaWiki:Common.css est une feuille de style en cascade (CSS) chargée après la feuille de style de l'habillage actif. Cette feuille de style est chargée avec tous les habillages et une feuille de style similaire mais spécifique à l'habillage – nommée MediaWiki:nom de l'habillage.css – lui est ajoutée (voir ci-dessous). Bien que seule Monobook.css soit listée dans Special:AllMessages, les autres feuilles de style spécifiques aux habillages fonctionneront néanmoins.

Si $wgAllowUserCss vaut true, les utilisateurs peuvent personnaliser l'interface pour eux-mêmes simplement en créant des sous-pages utilisateur avec un titre en minuscules (voir ci-dessous).

Les feuilles de style globales ne se chargeront pas sur les pages spéciales restreintes telles que login ou préférences, sauf si $wgAllowSiteCSSOnRestrictedPages est activé.

Ils ne se chargeront pas non plus si le mode de sauvegarde est utilisé.

Liste des feuilles de style

Feuilles de style globales

Ce sont des feuilles de style qui affectent tous les utilisateurs du wiki, en fonction de leur configuration — quel habillage ils utilisent, leur groupe utilisateur, etc.

Feuilles de style personnelles

Celles-ci sont des feuilles de style que seulement vous et les utilisateurs avec le droit editusercss (les administrateurs d'interface, le plus souvent) peuvent modifier.

Dans le cas de paramètres de style conflictuels pour un contenu, le réglage résultant dépend principalement de la spécificité. Si deux règles sont relatives à la même spécificité, cela dépend de leur ordre dans les feuilles de style : c'est la dernière rencontrée qui fait foi. Voir aussi l'ordre de la cascade. L'ordre peut être redéfini avec l'indication !important, mais cela doit généralement être évité.

Sélecteurs CSS

Dans l'habillage Monobook, les sélecteurs CSS pertinents pour le style du corps de page comprennent les éléments suivants. Dans la mesure du possible, les exemples donnés montrent le résultat pour les paramètres de style actuels :

  • :link – lien non visité – exemple : help:index ; valeur par défaut : help:index
  • :visited – lien visité
  • :link#contentTop
  • :link.external – http://example (par défaut)
  • :link.extiw – lien interwiki dans le corps de la page –  ; valeur par défaut : en:example [1]
  • :link.image – lien entre l'image complète et la page de description de l'image
  • :link.internal – lien vers le fichier lui-même (Media:), et liens de la vignette et de l'icône de la loupe vers la page de description de l'image (notez que la couleur et la taille de la police spécifiées pour a.internal ne s'appliquent que dans le premier cas) – Media:example.png
  • :link.new – doesnotexist ; valeur par défaut : doesnotexist
  • .allpagesredirect – abc – redirige vers Special:Allpages et Special:Prefixindex
  • body.ns-0, ..., body.ns-15 (espaces de noms)
  • div#bodyContent
  • div#column-content
  • div#editsection
  • div#globalWrapper
  • div#tocindent
  • div.tocline
  • h1.firstHeading
  • h2
  • h3
  • small – exemple
  • table.toc
  • :link et :visited – Une erreur commune est d'utiliser a à la place de :link ou :visited pour mettre en forme les liens (respectivement non-visités et visités). A la différence des dernières pseudo-classes qui ne s'appliquent qu'aux liens, a s'applique à la fois aux liens et aux ancres nommés (comme <a name="bookmark">).
  • #p-lang a – pour les liens interlangues

On peut aussi faire dépendre le style de la valeur d'un attribut, par exemple avec les sélecteurs :

  • :link[title = "User:username"]}}
  • link[title = "pagename"]}}
  • link[href = "full url "]}}

pour coloriser le code ou mettre en valeur des utilisateurs particuliers (y compris vous-même) et (ou) les liens vers des pages particulières (comme mettre en gras les pages visitées dans la liste des modifications récentes).

Voir aussi Help:Pages suivies

La liste de suivi et la liste des modifications récentes utilisent deux classes :

  • .autocomment
    example
  • .new (voir ci-dessous)

La page historique possède des classes auto-commentées et :

  • .user
  • .minor

Ainsi, la police spécifiée pour user s'applique dans l'historique de la page, mais pas dans la liste de suivi ni les modifications récentes.

Modifier la page

  • Boîte d'édition : textarea#wpTextbox1
example1
  • Modifier la boîte du résumé : input#wpSummary
example2

Non affichable

Un style extrême pour un texte est display:none;, c'est-à-dire ne pas l'afficher, par exemple.

p<span style="display:none;">q</span>r → pqr

Pour permettre à un texte d'avoir optionnellement ce style, spécifiez une classe ou un identifiant pour elle; un utilisateur qui veut le masquer peut alors le spécifier explicitement dans son CSS personnel :

.classname {display: none;} or #id {display: none;}

Les liens non affichés ne fonctionnent pas, contrairement aux liens dans une police très petite, comparer :

p<span style="display:none;">[[q]]</span>r gives pqr
p<small><small><small><small><small>[[q]]</small></small></small></small></small>r gives pqr

Ne peut pas être utilisé pour supprimer le texte dans les expressions pour les noms de modèle, les noms de paramètres, les valeurs de paramètres, les noms de pages dans les liens, etc.

Alors que display: none; ne produit rien, visibility: hidden; produit des espaces vides qui remplacent le contenu; son opposé est visibility: visible;.

Exemple :

p<span style="visibility: hidden;">q</span>r gives pqr

Essayez d'analyser la page avec les Outils développeur probablement déjà fournis avec votre navigateur pour trouver les éléments masqués.

Pour voir le texte masqué, vous devez utiliser un greffon sur votre navigateur. Le greffon Web Developer par exemple est disponible pour Firefox et Chrome. Vous pouvez l'ajouter à votre navigateur, puis choisir "Divers" -> "Afficher les éléments masqués" dans cette barre d'outils, pour les faire apparaître.

Non imprimable

On peut exclure le contenu à l'impression (si le navigateur prend en charge CSS) en déclarant le contenu avec la classe "noprint" : 

<div class="someclass noprint">This will not appear in the print version.</div>

Style dépendant d'un paramètre ou d'une variable

Classe de variable ou ID

Une classe ou un ID peut dépendre du résultat produit par un modèle ou un paramètre de modèle, par exemple class="abc{{{1|def}}}". Pour un ou plusieurs noms de classe possibles, le style de cette classe peut être défini. Si la classe est non définie, elle est ignorée et le style standard est utilisé. Dans le cas le plus simple, nous avons par exemple class="abc{{{1}}}" et définissons la classe abcdef. If the parameter value is "def", it applies.

Si une page d'utilisation générale n'a de sens que lorsque les styles sont définis pour certaines classes, alors ceux-ci doivent être spécifiés sur la page MediaWiki:Common.css, qui s'applique à tous les utilisateurs et à tous les habillages, dans la mesure où ils ne sont pas redéfinis.

Valeur du paramètre du style variable

Le wikicode <span style="display:{{{3|none}}}">Wed</span> affiche "Wed" quand le 3e paramètre est initialisé, mais sa valeur n'est pas "none", et n'affiche rien si ce paramètre n'est pas défini ou s'il vaut "none". Si la valeur du paramètre 3 est un style d'affichage différent de none, ce style est appliqué.

Voir aussi

Références

  1. ↑ Le code HTML est <a href="//en.wikipedia.org/wiki/example" class="extiw" title="en:example">en:example</a> et il est le même pour tous les habillages.
Retrieved from "https://www.mediawiki.org/w/index.php?title=Manual:Interface/Stylesheets/fr&oldid=8304823"