Manual:CSS/fr


 * "CSS" redirects here. For the extension, see Extension:CSS.

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é.

Pour changer l'apparence et le comportement de l'écran d'affichage de votre MediaWiki (tel qu'il apparaît dans un navigateur), vous pouvez mettre le CSS dans. Ce fichier est une page de votre wiki, pas un fichier comme index.php ou load.php, donc vous ne pouvez pas le trouver en regardant la structure des répertoires sur votre serveur, ni lié à votre page principale ou à toute autre page initiale. The page initially consists of just a one-line comment. To find it, type MediaWiki:Common.css in the search box on the main page of your wiki. It will appear as a file with an address something like https://www.myserver.org/mywiki/index.php?title=MediaWiki:Common.css. (Requires the following permission to edit: "interface administrator")

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.

Le CSS peut être utilisé pour changer le style de l'ensemble du wiki, par exemple pour modifier la couleur de l'arrière-plan, ou la mise en forme de morceaux de texte spécifiques dans votre wiki en utilisant le CSS en ligne. Par exemple peut être fait avec. Si vous voulez rendre tout le texte du wiki plus grand, vous pouvez ajouter le code à votre MediaWiki:Common.css. Pour la version mobile, utilisez MediaWiki:Mobile.css

Si l'option est activée sur votre wiki, les utilisateurs individuels peuvent créer des feuilles de style personnalisées pour eux-mêmes à Special:MyPage/&lt;skin_name&gt;.css (par exemple Special:MyPage/vector.css s'ils utilisent l'habillage Vector). "Special:MyPage/common.css" permet la création de feuilles de styles personnalisées pour toutes les apparences.

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. World Wide Web Consortium (W3C) est une excellente référence pour savoir comment écrire du CSS correctement, directement à partir de la norme :


 * https://www.w3.org/TR/CSS21/propidx.html - CSS 2.1 Index des propriétés &larr; utile
 * http://www.w3.org/TR/CSS21/indexlist.html - CSS 2.1 Index exhaustif
 * http://www.w3.org/TR/CSS21/cover.html#minitoc - CSS 2.1 Table des contenus

Wikipédia donne un bon aperçu des Feuilles de style en cascade.

Si vous préférez une référence facilement consommable aux côtés de démonstrations de fonctionnalités CSS, Référence CSS du réseau de développeurs Mozilla (MDN) vous fournira un guide "à jour" pour la syntaxe et l'utilisation de base des différents éléments.


 * * Référence CSS

Mises en garde
Assurez-vous de conserver votre sémantique de balisage HTML. Compter sur la mise en forme stylisée pour indiquer le sens est une mauvaise idée (par exemple : pour la lisibilité par des machines telles que les robots des moteurs de recherche, les lecteurs d'écran utilisant la synthèse vocale, les navigateurs textuels).

If necessary, custom style sheets can temporarily be deactivated using the  URL parameter.

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 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 fixe les s à   et réinitialise les nombres pour les listes ordonnées. 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 effectuez un test pour la skin Vector de la Wikipédia anglaise, les premières règles devraient être (dans l'ordre) :


 * [/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. 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.

Using the url function
For privacy reasons, Wikimedia sites are configured to reject loading resources from external servers using the  CSS function. This includes resources encoded in data URLs.

However, you can load resources that are hosted in the Wikimedia servers. For example, you can load an image from Wikimedia Commons and use it as a background image via CSS:

You can also use a custom font family provided by Wikimedia's Universal Language Selector extension (see the list of fonts available on Wikimedia wikis).

Example CSS to load the Gochi Hand font:

If you wish to use custom fonts, they need to be installed locally on your system.