Aide:CSS et JS avancés

Vous avez des questions ? Posez-les sur le forum de la communauté.

Vous concevez du code personnalisé pour votre communauté ou pour vous-même ? Cette page contient des informations détaillées pour vous aider dans les deux cas.

Pour un aperçu plus simple, consultez Aide:Personnalisation du CSS et JS.

Note : Le JavaScript de la communauté est activé à la demande en contactant le support de Fandom. Consultez Aide:Processus de vérification du JavaScript pour plus d'informations.

Aide-mémoire CSS et JS

Les tableaux ci-dessous résument la plupart des pages de personnalisation du CSS et du JS. Les choix les plus usuels sont surlignés en vert.

CSS
Feuille de style	Emplacement	Wikis concernées	Utilisateurs concernés	Apparences concernées
MediaWiki:Wikia.css	ce wiki	ce wiki	tous les utilisateurs	Défaut
MediaWiki:Common.css	ce wiki	ce wiki	tous les utilisateurs	dépend
MediaWiki:Monobook.css	ce wiki	ce wiki	tous les utilisateurs	Monobook
Spécial:MaPage/common.css	ce wiki	ce wiki	vous uniquement	toutes
Spécial:MaPage/wikia.css	ce wiki	ce wiki	vous uniquement	Défaut
Spécial:MaPage/monobook.css	ce wiki	ce wiki	vous uniquement	Monobook
w:Special:MyPage/global.css	Community Central	tous les wikis	vous uniquement	toutes

JavaScript
Fichier de script	Emplacement	Wikis concernés	Utilisateurs concernés	Apparences concernées
MediaWiki:Common.js	ce wiki	ce wiki	tous les utilisateurs	toutes
MediaWiki:Wikia.js	ce wiki	ce wiki	tous les utilisateurs	Défaut
MediaWiki:Monobook.js	ce wiki	ce wiki	tous les utilisateurs	Monobook
Spécial:MaPage/common.js	ce wiki	ce wiki	vous uniquement	toutes
Spécial:MaPage/wikia.js	ce wiki	ce wiki	vous uniquement	Défaut
Spécial:MaPage/monobook.js	ce wiki	ce wiki	vous uniquement	Monobook
w:Special:MyPage/global.js	Community Central	tous les wikis	vous uniquement	toutes

Vérification des erreurs de CSS et JS dans l'éditeur

Lorsque l'éditeur de texte de Fandom est utilisé pour modifier le CSS ou le JS, sont activées la vérification des erreurs ("linting") et la coloration syntaxique :

Au fur et à mesure que vous saisissez du code, la page vous indiquera toute erreur de syntaxe trouvée
Veuillez noter que tout problème doit être résolu - la technologie du CSS (et même du JS) est en constante évolution et tous les navigateurs ne se comportent pas de la même façon : certains messages peuvent ne pas nécessiter d'action.

Problèmes courants

CSS issues
Problème	Expllication
`@import prevent parallel downloads, use <link> instead`	Les balises Link sont normalement utilisées pour importer du CSS. Toutefois, MediaWiki ne prend pas charge l'ajout de balises Link personnelles sans l'utilisation de JS, cetter erreur peut donc être ignorée.
`Expected X but found Y`	Cela signifie que vous avez saisi une valeur incorrecte pour une propriété. Par exemple, dans '`color: truc;`' truc est une valeur non valide pour la propriété color parce ce n'est pas un nom de couleur.
`Use of !important`	`!important` doit être évité au maximum dans le CSS car cela rend la maintenance plus difficile et il est aussi plus difficile pour les utilisateurs de surcharger les paramètres dans leur CSS personel. La plupart du temps, utiliser le bon sélecteur vous permettra d'éviter d'utiliser `!important`.
`Unknown property 'codename'`	Ben que l'outil ne reconnaisse pas tout le code CSS (comme le CSS en lui-même est une plateforme mise à jour en permanence), certains codes CSS peuvent toujours être lus quand ils sont implémentés pour un objet spécifique sur une page de Fandom (par exemple, `mix-blend-mode: color-dodge;`).

Notes

Appliquer du CSS à une page en particulier

En utilisant les classes CSS, vous pouvez appliquer du CSS à une page en particulier. L'élément HTML <body> des articles de Fandom inclut un identifiant unique basé sur le nom de la page. Par exemple, sur cette page d'aide, la classe est :

page-Aide_CSS_et_JS_avancés

Le format général est 'page-[nom article]' et les espaces et les deux-points sont remplacés par des tirets bas.

Il y a d'autres classes appliquées à la balise body qui vous permettent d'appliquer le code par espace de noms, et plus - la fonctionnalité du navigateur « inspecter » ou « afficher la source » vous permettra de voir ce qui est disponible.

Ordre de chargement: En général, l'ordre de chargement sur Fandom est : code du noyau, puis code la communauté locale, puis code personnel. Pour chaque niveau, l'ordre de chargement est le code 'common', puis le code spécifique à l'apparence.

!important dans le CSS: En raison de l'ordre de chargement du CSS, vous pouvez parfois avoir besoin d'utiliser la propriété !important pour être sûr que la règle CSS est bien appliquée.

Problèmes de cache: Chaque fichier que vous téléchargez sur Internet est mis en cache. Normalement, c'est très bien, car cela réduit le trafic à la fois pour votre propre appareil et pour les serveurs de Fandom, mais cela devient un problème lorsqu'il s'agit de tester des modifications de l'apparence. Cela peut prendre quelques heures avant que les modifications prennent effet, à moins d'utiliser les astuces suivantes :

Note : Après publication, il peut être nécessaire de purger le cache pour voir les modifications.

Chrome - Windows : Maintenez la touche Ctrl enfoncée et appuyez sur la touche F5 ; OS X : Maintenez les touches Cmd (⌘) et Shift (⇧) enfoncées et appuyez sur la touche R.
Safari - Maintenez la touche Shift (⇧) enfoncée et cliquez sur le bouton « Recharger » de la barre d'outils.
Firefox - Windows : Maintenez la touche Ctrl enfoncée et appuyez sur la touche F5 ; OS X : Maintenez les touches Cmd (⌘) et Shift (⇧) enfoncées et appuyez sur la touche R.
Internet Explorer : Maintenez la touche Ctrl enfoncée et appuyez sur la touche F5 (ou cliquez sur le bouton « Actualiser »).

Il se peut que vous ayez à actualiser chaque page que vous avez ouverte récemment pour y voir les modifications.

Bouts de code JavaScript populaires: Pour avoir une idée de scripts écrits par les autres que vous pourriez trouver utiles ou que vous voudriez essayer, consultez la liste des améliorations JS sur Developers Wiki.

JavaScript en double: Beaucoup de scripts peuvent rencontrer des problèmes s'ils sont lancés plusieurs fois sur la même page. Assurez-vous que vous ne mettiez qu'un bout de code spécifique dans un seul de ces fichiers. Ne collez pas le même code sur plusieurs fichiers car il y a des risques de conflits et cela pourra entraîner des erreurs pour vous ou les autres visiteurs.

Voir aussi

Plus d'aide

Parcourez et recherchez d'autres pages d'aide sur Aide:Contenu
Visitez le Centre des communautés pour plus d'aide
Consultez Aide:Contacter Fandom pour savoir comment signaler des erreurs ou des points à éclaircir sur cet article
Apprenez à utiliser Fandom avec l'Université Fandom : de courtes vidéos explicatives pour tous les niveaux

Fandom