Manual:CSS/fr

Les règles Cascading Style Sheet (CSS) définissent en grande partie l'apparence et du comportement de MediaWiki : la taille de police, les couleurs, l'espacement, le logo et l'image d'arrière-plan, même si le contenu du site est affiché ou est masqué.

Le CSS peut être utilisé pour changer le style de l'ensemble du wiki, par exemple pour rendre l'arrière-plan d'une couleur différente, ou vous pouvez utiliser CSS en ligne pour le style des morceaux de texte spécifiques dans votre wiki. Par exemple texte en vert peut être accompli en faisant. Si vous voulez rendre tout le texte sur le wiki plus grand, vous pouvez ajouter le code $body à $common. For example green text can be accomplished by doing. If you want to make all text on the wiki larger you can add the code to MediaWiki:Common.css. Pour la version mobile, utilisez MediaWiki:Mobile.css

Pour changer l'apparence et le comportement de l'écran d'affichage de votre MediaWiki (présentation dans un navigateur), vous pouvez mettre le CSS dans.

Pour changer la façon dont les pages de MediaWiki s'affichent à l'impression, vous pouvez mettre le CSS dans MediaWiki:Print.css sur votre wiki.

S'il est activé sur votre wiki, les utilisateurs individuels peuvent créer des feuilles de style personnalisées pour eux-mêmes à Special:MyPage/.css (par exemple Special:MyPage/vector.css s'ils utilisent l'habillage Vector). Special:MyPage/common.css permet la création de feuilles de style personnelles pour tous les habillages. Special:MyPage/common.css allows the creation of personal stylesheets for all skins.

Vous pouvez également créer des habillages personnalisés pour MediaWiki.

Aide
La syntaxe CSS, les attributs et les valeurs, doivent être corrects sinon cela ne fonctionnera pas comme il le faut. [$w3c World Wide Web Consortium (W3C)] est une excellente référence pour vérifier que le code CSS est rédigé correctement, en accord avec les standards: World Wide Web Consortium (W3C) is an excellent reference for checking how to write CSS correctly directly from the standards:
 * $propidx -- CSS 2.1 index des propriétés &larr; très utile
 * $indexlist -- CSS 2.1 index général
 * $minitoc -- CSS 2.1 table des matières


 * https://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

Wikipédia donne un bon aperçu du CSS.

Si vous préférez une référence facilement consommable aux côtés de démonstrations de fonctionnalités CSS Mozilla Developer Network CSS Reference vous fournira un guide "à jour" pour la syntaxe et l'utilisation de base des différents éléments.


 * Mozilla Developer Network CSS Reference

Mises en garde
Assurez-vous de conserver votre sémantique de balisage HTML. S'appuyer sur le style pour indiquer le sens est une mauvaise pratique (par exemple pour la lisibilité de la machine, par les moteurs de recherche, les lecteurs d'écran utilisant le texte à la parole et les navigateurs de texte). 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).

CSS Normalisé
Beaucoup de code CSS s'appuie aujourd'hui sur un CSS "réinitialisé" ou "normalisé" pour que tous les navigateurs fonctionnent de la même manière. MediaWiki n'a pas de réinitialisation en soi, bien qu'il existe des feuilles de style intégrées telles que common/commonElements.css, common/commonContent.css, common/commonInterface.css et $1. 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.

Si vous copiez du code CSS, vérifiez qu'il ne dépende pas de code CSS supplémentaire.

Par exemple, jsFiddle a une case à cocher pour "CSS normalisé". Ceci définit s vers   et réinitialise les nombres sur les listes ordonnées. Comme aucun de ces CSS de normalisation ne s'exécute sur les sites MediaWiki, vous ne devriez pas l'utiliser lors du test du code relatif à MediaWiki. This sets s to   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 possède une fonctionnalité d'importation de CSS. Si vous testez l'habillage Vector sur Wikipédia en anglais, les premières feuilles devraient être (dans cet ordre) : 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 Code CSS commun intégré au noyau (tous les habillages qui utilisent CSS)]
 * [/load.php?debug=true&lang=en&modules=skins.vector.styles&only=styles&skin=vector CSS Général et Vector intégrés au noyau]
 * [/load.php?debug=true&lang=en&modules=site&only=styles&skin=vector Site CSS (espace de noms MediaWiki)]
 * [/load.php?debug=true&lang=en&modules=ext.gadget.site-styles&only=styles&skin=vector CSS pour tous les habillages (pour tous les utilisateurs) sur MediaWiki.org (espace de noms MediaWiki)]
 * [/load.php?debug=true&lang=en&modules=site.styles&only=styles&skin=vector CSS habillage Vector (espace de nom MediaWiki)]
 * [/load.php?debug=true&lang=en&modules=site.styles&only=styles&skin=vector CSS habillage Vector (espace de nom MediaWiki)]

Vous pouvez ajuster le domaine dans l'URL pour d'autres wikis WMF. En les important, vous pouvez avoir une meilleure idée de la façon dont votre CSS interagit avec le CSS sur wikis WMF. By importing these, you can get a better idea how your CSS interacts with the CSS on WMF wikis.

Les styles ne fonctionnent pas sur Special:UserLogin ou Special:Preferences ?
Par défaut, la personalisation des CSS du site (par exemple MediaWiki:Common.css) ne prend pas effet sur la page de login et des préférences. Il s'agit de préserver la sécurité du processus de connexion et de permettre aux utilisateurs de supprimer les personnalisations indésirables sans être gênés. Si vous n'êtes pas préoccupé par les risques de sécurité, vous pouvez utiliser le paramètre de configuration pour permettre aux CSS personnalisés de fonctionner sur ces pages.