(résolu) Utilisation de "color" afin de passer la valeur

Bonjour !

Trouver un titre pour expliquer ma problématique était assez ardu, mais j'espère pouvoir mieux expliquer ici.

Pour cela, je vais commencer par l'explication du principe:

En CSS, la propriété "color" est souvent attribué à tort uniquement à la couleur du texte. En fait, la propriété color est aussi utilisé dans le cas où une valeur de couleur n'est pas spécifié au sein d'autres propriété CSS (par exemple border).

Je vous montrer un exemple pratique, soit le code HTML et CSS suivant:

  <div id="d1">
    <div id="d2"></div>
  </div>

    #d1{
      width: 400px;
      height: 400px;
      color: red;
      border: 10px solid;
    }
    #d2{
      width: 200px;
      height: 200px;
      margin: 20px auto;
      border: 5px solid;
      background-color: blue;
    }

Dans cet exemple, la couleur de la bordure de #d1 est rouge, et la valeur de bordure de #d2 est également rouge !


Maintenant, ce que j'espérais faire, c'était de passer cette valeur de couleur à mon background. Ce qui jusqu'à date s'est révélé être un échec. Est-ce seulement impossible ou j'ai oublié quelque chose ?



(Et si je peux poser une double question, hors "border", vous voyez d'autres propriétés CSS pouvant hériter de la valeur de "color" ?)
Modifié par Vaxilart (22 Feb 2011 - 20:01)

Bonjour,

pour autant que je sache, la propriété color ne s'applique qu'aux bordures (border et outline), et au texte. Tu ne peux pas l'appliquer à background-color, car il a une valeur par défaut qui est "transparent". Cela signifie que tant que tu ne lui attribues pas une autre valeur, il restera transparent.

C'est logique et admirable, sinon imagines que tu ne spécifies qu'une fois ta couleur : le texte et son fond auraient la même...

Possible qu'en css3 d'autres propriétés récupèrent cette valeur (je pense notamment aux ombres, bien que ça me semble irrationnel), mais je n'ai pas étudié la question.

Bonne continuation!

C'est juste pas possible, pour la raison donnée par Ten (valeur par défaut de background-color: "transparent").

Ten a écrit :
pour autant que je sache, la propriété color ne s'applique qu'aux bordures (border et outline), et au texte.

En CSS 2.1 on peut rajouter au moins text-decoration (qui prend systématiquement la couleur du texte, pas possible d'en spécifier une autre).

Ten a écrit :
Possible qu'en css3 d'autres propriétés récupèrent cette valeur (je pense notamment aux ombres, bien que ça me semble irrationnel)

Pour box-shadow en CSS3, et d'après la spec, si aucune couleur n'est indiquée l'agent utilisateur (navigateur) choisit une couleur. D'après un test rapide, Firefox 4 utilise la valeur calculée (computed value) de color pour l'élément concerné.

Merci pour vos réponses,

Je ne sais pas pourquoi, mais hier je repensais à cette particularité de "color" et j'essayais de lui trouver des applications pratiques et utiles.

Et en même temps, je devais faire un menu déroulant pour un site, dont chaque élément de menu avait une couleur différente. Et puis là, les deux idées se sont entremêlés; alors qu'au fond ce que je voulais faire à prime abord frisait le comble de la simplicité

bonsoir,

en parlant de liste, il y aussi les puces qui prennent la couleur du texte.(idem pour outline)

++