Manual:CSS/fr

Les feuilles de style (CSS) déterminent énormément l'apparence et l'ergonomie de Mediawiki : la taille des caractères, les couleurs, la taille des espacements entre les éléments, le logo et les images de fond, y compris sur du contenu masqué.

Les CSS permettent de changer le style d'un wiki antier, par exemple pour changer la couleur de fond, et vous pouvez utiliser des CSS «en ligne» (comme attribut des balises HTML). Par exemple texte vert peut être codé «en ligne» comme. Si vous voulez que le site en entier soit écrit en vert, vous pover utiliser  dans le fichier CSS  MediaWiki:Common.css.

To change the look and feel of MediaWiki's monitor and projector display (how it looks in a browser window) you can put CSS into.

To change the way MediaWiki pages print, you put CSS into on your wiki.

If enabled on your wiki, individual users can create custom stylesheets just for themselves at Special:MyPage/.css (for example if they are using the vector skin). Special:MyPage/common.css allows the creation of personal stylesheets for all skins.

You can also create custom skins for MediaWiki.

Aide
CSS syntax, attributes and values, must be correct or stuff won't work right. W3C.org is an excellent reference for checking how to write CSS correctly directly from the standards:
 * http://www.w3.org/TR/CSS21/propidx.html -- CSS 2.1 Index of properties &larr; very helpful
 * http://www.w3.org/TR/CSS21/indexlist.html -- CSS 2.1 Index of everything
 * http://www.w3.org/TR/CSS21/cover.html#minitoc -- CSS 2.1 Table of Contents

Wikipedia provides a good overview of CSS, along with links to additional supporting resources.

If you do not want to read through the pages and pages of standard design and deployments, then reading from the W3 Schools explanation of features, derived from the W3C standards, will provide you a quick-reference guide to syntax and basic usage of the various elements. The site will provide reference to past versions but for the most point is an "up-to-date" reference guide.


 * W3Schools CSS Reference

Caveats
Be sure to keep your markup semantic. Relying on styling to indicate meaning is a bad practice (e.g. for machine readability such as by search engines, screen readers using text-to-speech, and text browsers).

Normalized CSS
Much CSS today relies on a "reset" or "normalize" CSS to make all browsers work the same. MediaWiki does not have a reset per se, though there are built-in stylesheets such as common/commonElements.css, common/commonContent.css, common/commonInterface.css, and.

If you copy CSS, watch if it depends on additional CSS.

For example jsFiddle has a checkbox for "Normalized CSS". This sets margins to 0 and resets the numbers on ordered lists. Since none of this normalization CSS is running on MediaWiki sites, you should not use it when testing MediaWiki-related code.

jsfiddle has a feature to import CSS. If you're testing against the Vector skin on English Wikipedia, the primary sheets should be (in this order):


 * [/load.php?debug=true&lang=en&modules=mediawiki.legacy.shared&only=styles&skin=vector Legacy general (all skins that use CSS) CSS built in to core]
 * [/load.php?debug=true&lang=en&modules=skins.vector&only=styles&skin=vector General and Vector CSS built-in to core]
 * [/load.php?debug=true&lang=en&modules=site&only=styles&skin=vector Site CSS (MediaWiki namespace)]

You can adjust the domain in the URL for other WMF wikis. By importing these, you can get a better idea how your CSS interacts with the CSS on WMF wikis.

Styles not working on Special:UserLogin or Special:Preferences?
By default, site CSS customizations (e.g. MediaWiki:Common.css) do not take effect on the login and preferences pages. This is to preserve the security of the login process, and to allow users to remove any unwanted customizations without being interfered with. If you are not concerned about the security risks, you can use the configuration setting to allow custom CSS to work on these pages.

Voir aussi

 * Extension:CSS
 * Manual:Coding conventions/CSS
 * Category:Extensions de l'interface utilisateur et Categorie:extensions pour l'apparence
 * Category:exemples de code avec CSS
 * Category:Extensions de l'interface utilisateur et Categorie:extensions pour l'apparence
 * Category:exemples de code avec CSS