Manuel:Interface/Feuilles de style

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:skinname.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.

• MediaWiki:Common.css - (tous les habillages et tous les utilisateurs, sauf pour l'extension MobileFrontend)
• MediaWiki:skinname.css - (par habillage, skinname est la valeur de cette variable dans le fichier PHP de votre habillage, par exemple MediaWiki:Vector.css, MediaWiki:Monobook.css)
• User group CSS - (par groupe d'utilisateurs, par exemple MediaWiki:Group-sysop.css)
• MediaWiki:Noscript.css - (pour les utilisateurs qui affichent sans JavaScript; peut être remplacé par un sélecteur body.client-nojs)
• MediaWiki:Print.css - (pour les « versions imprimables » des pages)
• MediaWiki:Mobile.css - (pour les habillages Mobile, utilisé avec Extension:MobileFrontend )
• MediaWiki:Filepage.css - particulièrement conçu pour que les pages des fichiers Commons (dépôts externes) puissent fonctionner sur les pages de fichiers 'locaux'.
• MediaWiki:Apioutput.css - for the web (not JSON) results of API queries

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.

• User:Example/common.css - (tous les habillages - introduit en MediaWiki v1.17)
• User:Example/skinname.css - (par habillage, par exemple pour User:Example/vector.css et User:Example/monobook.css)
• User:Example/global.css - (par famille de wikis, si Extension:GlobalCssJs est utilisé pour cette famille)

Dans le cas de paramètres de style conflictuels pour un contenu, le réglage résultant dépend principalement de la spécificité. For two rules of the same specificity, it depends on order between and within stylesheets: the last wins. See also cascading order. The order can be overriden with the indication "!important", but this should generally be avoided.

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 – unvisited link – example: help:index ; default: help:index
• :visited – visited link
• :link#contentTop
• :link.external – http://example ; default: http://example
• :link.extiw – interwiki link in page body –  ; default: en:example
• :link.image – link from full image to image description page
• :link.internal – link to file itself (Media:), and links from thumbnail and magnifying glass icon to image description page (note that color and font size specified for a.internal are only applicable in the first case) – Media:example.png
• :link.new – doesnotexist ; default: doesnotexist
• .allpagesredirect – abc – redirects in Special:Allpages and Special:Prefixindex
• body.ns-0, ..., body.ns-15 (namespaces)
• div#bodyContent
• div#column-content
• div#editsection
• div#globalWrapper
• div#tocindent
• div.tocline
• h1.firstHeading
• h2
• h3
• small – example
• table.toc
• :link and :visited – It's a common mistake to use "a" instead of ":link" or ":visited" to style links (unvisited and visited, respectively). Whereas later pseudoclasses apply only to links, "a" applies to both links and named anchors (e.g. <a name="bookmark">).

• #p-lang a – for interlanguage links

One may also have the style depend on the value of an attribute, e.g. with the selectors:

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

to color-code or highlight particular users (including oneself) and/or links to particular pages (like the bolding of watched pages on Recent Changes).

See also Help:Watching pages#CSS

The watchlist and Recent Changes use two classes:

• .autocomment
  example
• .new (see below)

The page history has classes autocomment and:

• .user
• .minor

Thus the font specified for user applies in the page history, but not in the watchlist or Recent Changes.

Edit page

• Edit box: textarea#wpTextbox1

example1

• Edit summary box: input#wpSummary

example2

Non-display

One extreme "style" for a text is "display:none;", i.e., not displaying it, e.g.

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

To allow a text to optionally have this style, specify a class or id for it; a user who wants to hide it can then correspondingly specify in their personal CSS:

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

Non-displayed links do not work, as opposed to links in a very small font, compare:

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

It cannot be used to remove text in expressions for template names, parameter names, parameter values, page names in links, etc.

While "display: none;" produces nothing, "visibility: hidden;" produces blank spaces replacing the content; its opposite is "visibility: visible;".

Example:

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

Try inspecting the page with the Developer tools probably provided with your browser to find the hidden element.

If you would like to view the hidden text, you could use an add-on for your browser. For example, the Web Developer add-on is available for Firefox and Chrome. You could add it to your browser and then choose Misc. -> Display Hidden Elements in that toolbar, to make all hidden elements appear.

Non-print

One can exclude content from being printed (if the browser supports CSS) by declaring the content to be of the "noprint" class:

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

Style depending on a parameter or variable

Variable class or ID

A class or ID can depend on the result produced by a template or on a template parameter, e.g., class="abc{{{1|def}}}". For one or more of the possible class names, the style of that class can be defined. If the class is undefined it is ignored, so the standard style is used.

In the simplest case, we have e.g., class="abc{{{1}}}" and define class abcdef. If the parameter value is "def", it applies.

If a page for general use only makes sense when styles are defined for certain classes, then these have to be specified in the page MediaWiki:Common.css, which applies for all users and all skins, as far as not overridden.

Variable style parameter value

Wikitext like

<span style="display:{{{3|none}}}">Wed</span>

displays "Wed" if parameter 3 is defined, but its value is not "none", and displays nothing if parameter 3 is undefined or "none". If the value of parameter 3 is a display style other than "none", that style is applied.

Voir aussi

• Aide:Habillages
• Manual:CSS
• Manual:Gallery of user styles
• Category:Snippets with CSS