Bonjour,

Je viens de créer un nouveau site e-majine, mais j'ai quelques soucis d'affichage avec mon CSS. Par exemple, je change la couleur de fond de ma page dans ma feuille CSS et des fois la couleur est prise en compte et si j'actualise ma page c'est la couleur grise par défaut qui revient... Et ainsi de suite aléatoirement...

La seule solution que j'ai trouvé c'est de modifier directement la feuille de style existante (sans utiliser la nouvelle feuille que j'ai créé).

Avez-vous une idée de ce qui se passe ?
Merci
Bonne journée

j'ai le même problème... et je suis en train de tester le meilleur navigateur pour éviter cela...
je suis sous Mac avec safari, pb de cache ça ne marchait pas ... je suis passé à firefox... mais j'ai aussi quelques problèmes ( cache, mise à jour de css et remplissage de formulaire). A priori avec Chrome pour l'instant ça semble fonctionner , mais je n'ai à vrai dire ,commencé ce jour et j'ai peu travaillé mes css!Le mieux est sans doute de faire un ticket pour signaler le bug ;-)
Bon courage !

Bonjour,

Je pense que les difficultés proviennent des priorités (poids) des règles CSS.
Lorsque vous réalisez un import d'une feuille CSS dans styles.css, le navigateur traite dans un premier temps les règles de styles des feuilles importées puis les règles de styles de la feuille courante.

Prenons un exemple ou dans styles.css, vous importez la feuille de styles commun.css:

@import url(commun.css);

Votre fichier commun.css contient la règle suivant pour le body:

body {
  background-color: #FF0000;//Couleur rouge
}

Votre fichier styles.css contient aussi une règle pour le body:

body {
  background-color: #0000FF;//Couleur bleue
}

Dans ce cas, le navigateur va d'abord interprété la règle du fichier commun.css donc appliqué le rouge puis il va ensuite interprété les règles du fichier styles.css et donc se trouver avec un conflit puisqu'il doit travailler avec 2 règles définissant le même élément.

Il va donc régler le conflit en utilisant les priorités(poids) des règles CSS. Ces priorités sont calculées en fonction du nombre d'élément HTML, du nombre de classe et du nombre d'id de la règle CSS.

Voici un article intéressant expliquant simplement le mode de calcul:


Calculer le poids des règles CSS

Dans notre cas, les 2 règles CSS ont le même sélecteur, body, donc la même priorité(poids). Donc dans ce cas, le navigateur va utiliser la dernière règle qu'il a rencontré donc celle du fichier styles.css et donc c'est la couleur bleue qui l'emportera.

Pour contourner cette problématique et faire en sorte que ce soit la couleur rouge qui soit utilisée donc la règle de commun.css, vous avez 2 solutions:

Créer une règle ayant une priorité plus importante

Pour cela, il suffit d'utiliser un contexte dans le sélecteur de la règle en utilisant l'élément parent de body. La règle contiendra donc 2 éléments HTML donc elle a une priorité supérieure à la règle ne contenant qu'un seul élément HTML:

html body {
  background-color: #FF0000;//Couleur rouge
}

Utiliser la declaration !important

En savoir plus sur la déclaration !important:
http://www.zonecss.fr/style_css/feuille_css_important.html
http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#x11

body {
  background-color: #FF0000 !important;//Couleur rouge
}

Bien évidemment, ces technique sont valables pour tous les éléments HTML.

Bonne journée

Antony

Clotilde, Anthony merci pour vos réponses.

Cette réponse technique est très claire.
Au vu de cela je me demande si ce n'est pas plus facile de modifier directement les feuilles CSS existantes sans en créer une nouvelle (ce qui est contraire à ce qu'on m'a préconisé lors de la formation intégration).

En tout cas c'est agréable d'avoir un explication précise et claire qui va me permettre d'affiner ma technique.

Bonne journée.

Bonjour Hélène,

Effectivement, la couleur de fond (background) est déclarée par défaut dans styles.css, après l'appel de toutes les autres feuilles (_element, catalog, board, et éventuellement helene.css etc). Donc, cette règle vient bien "écraser" la votre, à déclaration égale.

J'ajoute qu'à chaque cas correspond une réponse à un moment donné. Certains partenaires Medialibs effacent complètement les feuilles de styles fournies par défaut, d'autres modifient les CSS existantes, d'autres encore ajoutent la leur par dessus l'existant.

Cette dernière solution présente l'avantage de moins avoir à se soucier du poids des CSS à partir du moment où "sa" feuille de style est appelée en dernier (dans la liste des @import): à déclaration égale (même spécificité car même sélecteurs css), c'est la règle "le dernier à parler prend la main" qui prévaut.

En outre, depuis début 2009, nul doute que vos connaissances CSS ont du croître et se développer sur les bases simples de la formation "intégration" passée à l'époque à la découverte du HTML et des CSS.

Aujourd'hui, avec votre bagage et votre expérience, c'est à vous de choisir la méthodologie la plus adaptée à votre façon de travailler et votre structure.

Ce qui est préconisé en formation est un guide proposé selon l'évaluation de la priorité des connaissances à transmettre en 2 jours, rien de plus.

J'ajoute pour finir concernant le poids des CSS que la plupart des logiciels CSS dédiés calculent tout cela très bien, entre autre TopStyle mon favori, et que Firebug en tient bien évidemment compte puisqu'il affiche toujours en haut à droite la règle CSS la plus spécifique (celle qui a le plus de poids) à l'élément désigné.

Bonne continuation !
Cordialement,
Yann