28114 sujets

CSS et mise en forme, CSS3

[Résolu] Variables CSS : les valeurs ne s'appliquent pas

Bonjour,

Voulant tester des changements de couleurs j'ai mis en place des variables CSS.

Dans un premier temps je crée mes variables :

:root
{
--bleu-lien: #406D86;
}

a {color: var(--bleu-lien)}

Ensuite je change la valeur de ma variable :

:root
{
--bleu-lien: #175269;
}


Il ne se passe rien...
Les couleurs restent les mêmes alors que la valeur a changé.

Je précise que j'utilise deux feuilles de style au cas où cela aurait son importance :

<link rel="stylesheet" type="text/css" href="cs/cf.css">
<link rel="stylesheet" type="text/css" href="cs/a.css">


Une idée ?

Merci d'avance.
Modifié par boteha_2 (21 Nov 2023 - 19:04)
Bonjour parsimonhi,

Merci de ton suivi.

Le code est ultra-rodé et ces variables sont mon seul changement.

J'ai nettoyé le cache récent du navigateur, faut-il nettoyer plus ?

Les variables sont déclarées dans la première feuille (cf.css), les couleurs figurent dans les deux feuilles.

En fait il y a quand même une ou deux couleurs qui sont bien appliquées, mais même pas sur tous les éléments où elles devraient l'être.

J'ai essayé sur Firefox et Chrome.

Trop bizarre...
Modérateur
Bonjour,

Fais un exemple simple extrait de ton site (tu réduis l'extrait jusqu'à ce que ça marche). Ça devrait te permettre de trouver ce qui cloche.

Amicalement,
Vois-tu un problème dans ce code, un mot interdit ?

:root
{
--blanc: #FFFFFF;
--noir: #001C2F;
--gris-fonce: #697A85;
--gris-clair: #7B95A6;
--rouge: #E29B46;
--vert: #25884F;
--bleu-lien-discret: #7B95A6;
--bleu-lien: #175269;
--bleu-favicon: #175269;
--jaune-bouton: #E29B46;
--jaune-bouton-survol: #EFD797;
--gris-bouton: #697A85;
--gris-clair-bouton: #F1F1E7;
--gris-supprime-survol: #F0FBFE;
}
Modérateur
Bonjour,

Aucune raison que ce code-ci ne marche pas.

Tu dois montrer un exemple complet (css+html) qui ne marche pas, et avec rien d'autre dans la page.

Amicalement,
Bonjour,

Je n'ai pas trouvé d'erreurs dans le code CSS.

Que connaissez-vous comme bon testeur des fichiers CSS ?

En fait je pense que cela marche, mais las changements de couleurs sont assez minimes.
Avec une carte graphique moyenne je ne vois pas trop la différence.

J'ai testé des changements radicaux, par exemple changé NOIR en ROUGE et là cela se voit...

J'ai aussi vidé le cache..

Bon, j'attends un peu avant de cocher Résolu....
Hello,

Ton problème est bien étrange... Selon ton éditeur de code, c'est lui qui devrait valider la bonne syntaxe de ton code et t'indiquer les erreurs. Par exemple, VS Code, dispose d'un linter intégré et je trouve que ça fonctionne très bien. Il y a comme alternative des linters en ligne comme celui-ci ou encore le validateur CSS du W3C. En lui donnant tout ton code CSS, cela devrait t'aider.

a écrit :
En fait je pense que cela marche, mais las changements de couleurs sont assez minimes.

Tu peux utiliser l'inspecteur d'éléments de ton navigateur et pointer les éléments concernés. Tu verras ainsi si les éléments ont la bonne couleur et t'en assurer Smiley smile
Vérifie peut-être aussi les déclarations CSS ambigües avec l'inspecteur ; deux règles CSS pourraient par exemple pointer sur le même élément et interférer avec une autre règle.
Je n'ai pas d'autres idées ^^
Bonjour,

Après analyse il n'y avait pas de bug CSS, ce sont juste les couleurs qui étaient proches et la différence pas facilement visible avec une carte graphique de base...

Je coche Résolu.

Encore merci pour l'aide et les liens.
Prévenir un modérateur
Répondre au sujet
Aller à