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 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 de votre serveur, ni savoir qu'il n'est pas initialement lié à votre page d'accueil ou à toute autre page. La page se compose initialement d'un simple commentaire sur une ligne. Pour le trouver, tapez MediaWiki:Common.css dans la boîte de recherche sur la page d'accueil de votre wiki. Il apparaîtra comme un fichier avec une adresse similaire à https://www.myserver.org/mywiki/index.php?title=MediaWiki:Common.css. (Nécessite le droit suivant pour modifier: « administrateur d'interface »)

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 obtenu 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 sur 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 tous les habillages.

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

Wikipedia donne un bon aperçu de 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 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.

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. Étant donné qu'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 lié à MediaWiki.

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. En les important, vous pouvez avoir une meilleure idée de la façon dont votre CSS interagit avec le CSS sur les wikis WMF.



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:

Si vous souhaitez utiliser des polices personnalisées, elles doivent être installées localement sur votre système.

