Manuel:CSS
- "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 MediaWiki:Common.css . 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. La page se compose initialement d'un simple commentaire d'une ligne. Pour le trouver, tapez MediaWiki:Common.css dans la boîte de recherche sur la page principale 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 la permission 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 texte vert peut être fait avec <span style="color:green">texte vert</span>.
Si vous voulez rendre tout le texte du wiki plus grand, vous pouvez ajouter le code body { font-size: larger; } à 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/<skin_name>.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 ← 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.
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 safemode=1 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 MediaWiki:Common.css.
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 margins à 0 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) :
- Code CSS commun intégré au noyau (tous les habillages qui utilisent CSS)
- CSS Général et Vector intégrés au noyau
- Site CSS (espace de noms MediaWiki)
- MediaWiki.org contrôle les CSS du site avec l'extension Gadgets, donc MediaWiki:Gadget-site.css est utilisé à la place de MediaWiki:Common.css. Ceci résulte en une URL de chargement un peu différente.
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 $wgAllowSiteCSSOnRestrictedPages 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 url() 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:
.my-class {
background: url("https://upload.wikimedia.org/wikipedia/commons/1/1a/some_image.svg");
}
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:
@font-face {
font-family: 'GochiHand';
src: local("Gochi Hand"),
url(https://xyz.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff2);
}
Si vous souhaitez utiliser des polices personnalisées, elles doivent être installées localement sur votre système.