Pourquoi ma feuille de style est-elle ignorée?

Astuce par (Lyon, France)
Créé le , mis à jour le (24366 lectures)
Tags : css, validation, erreur, fichiers

Plusieurs erreurs peuvent empêcher une feuille de styles CSS d'être prise en compte par un navigateur.

Erreur dans le chemin ou les droits d'accès

L'erreur la plus simple et la plus courante est de se tromper dans le chemin d'accès à la feuille de styles (valeur de l'attribut href).

Pour vérifier qu'il ne s'agit pas de cela, consultez le code HTML de votre page, récupérez le chemin d'accès à la feuille de styles, et vérifiez qu'il est correct en entrant ce chemin dans la barre d'adresse.

Si vous obtenez une erreur 404, le chemin est mauvais. Si vous obtenez une erreur 403, alors le chemin est sans doute correct mais vous n'avez pas accès au fichier à cause d'un problème de permissions sur les fichiers.

Mauvais type MIME (pas text/css)

Autre cas d'erreur fréquent: en mode de rendu strict, Firefox et les autres navigateurs utilisant le moteur de rendu Gecko ignorent les feuilles de styles qui ne sont pas associées par le serveur au type MIME requis, c'est à dire text/css.

Utilisez par exemple http://web-sniffer.net/ pour vérifier le type MIME associé au fichier CSS, et, si besoin, modifiez la configuration du serveur pour envoyer l'en-tête HTTP Content-Type: text/css.

Attribut title utilisé à mauvais escient

Lors de l'ajout d'une feuille de style d'impression, l'erreur fréquente est la mauvaise utilisation de l'attribut title des liens vers les fichiers CSS.

Exemple:

<link rel="stylesheet" media="screen" title="Ecran" href="screen.css" />
<link rel="stylesheet" media="print" title="Impression" href="print.css" />

L'attribut title de l'élément link sert à différencier des jeux de feuilles de styles alternatifs, et non à ajouter une information. Le navigateur n'appliquera simultanément que les feuilles de styles portant le même title que la feuille de style screen par défaut, quelque-soit leur media. En l'absence de styles alternatifs, cet attribut ne doit pas être utilisé.

Il faut donc écrire :

<link rel="stylesheet" media="screen" href="screen.css" />
<link rel="stylesheet" media="print" href="print.css" />

Pour en savoir plus sur ce point, voir À quoi sert l’attribut title dans la liaison d’une feuille de style CSS?.

La feuille de styles contient une erreur de syntaxe

Si votre feuille de styles n'est pas valide et notamment si elle contient une erreur de syntaxe importante (même un simple «}» oublié!), le navigateur peut arrêter l'interprétation du code CSS au moment où il rencontre l'erreur.

Pensez à utiliser le validateur CSS.