Manual:CSS/fr
- "CSS" redirige ici. Pour l'extension, voir 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 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 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, entrez 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 texte vert peut être obtenu 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 $wgAllowUserCss est activé sur votre wiki, les utilisateurs individuels peuvent créer des feuilles de style personnalisées pour eux-mêmes sur 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 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 ← 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, la 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).
Si nécessaire, les feuilles de style personnalisées peuvent être temporairement désactivées en utilisant le paramètre d'URL safemode=1.
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 devez pas les utiliser lors du test du code lié à MediaWiki.
jsfiddle possède une fonctionnalité d'importation de CSS. Si vous effectuez un test avec l'habillage Vector de la Wikipedia anglophone, les premières règles doivent ê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.
Utiliser la fonction url()
Pour des raisons de confidentialité, les sites Wikimedia sont configurés pour rejeter le chargement de ressources à partir de serveurs externes en utilisant la fonction CSS url(). Cela inclut les ressources encodées dans les URLs de données.
Cependant, vous pouvez charger les ressources hébergées sur les serveurs Wikimedia. Par exemple, vous pouvez charger une image de Wikimedia Commons et l'utiliser comme image d'arrière-plan via CSS :
.my-class {
background: url("https://upload.wikimedia.org/wikipedia/commons/1/1a/some_image.svg");
}
Vous pouvez également utiliser une famille de polices personnalisées fournie par l'extension du sélecteur de langue universel de Wikimedia (voir la liste des polices disponibles sur les wikis Wikimedia).
Exemple de CSS pour charger la police 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.
