web-dev-qa-db-fra.com

Est-ce que style = "color: #FFF;" rendre comme # F0F0F0 ou #FFFFFF?

Lors de la définition des couleurs à l'aide de "raccourci hexidécimal" (style="color: #FFF;"), existe-t-il une méthode définie pour étendre la sténographie? (style="color: #F0F0F0;" ou style="color: #FFFFFF;")

Tous les navigateurs utilisent-ils la même méthode d'extension? Ce comportement est-il par spécification (si oui, où est-il défini)? La méthode d'expansion varie-t-elle peut-être entre CSS 1/2/3?

J'ai remarqué que "la plupart des navigateurs" s'étendent à #FFFFFF.

Y a-t-il d'autres endroits (en dehors de HTML/CSS) où cette notation abrégée est autorisée, mais la méthode d'expansion est différente?

J'ai toujours évité d'utiliser des raccourcis hexagonaux, car je n'ai jamais connu les réponses à ces questions ...

htmlcsscolorshex
60
Dolph

CSS 2.1 ( http://www.w3.org/TR/CSS2/syndata.html#value-def-color ):

La notation RVB à trois chiffres (#rgb) est convertie en une forme à six chiffres (#rrggbb) en répliquant des chiffres, pas en ajoutant des zéros. Par exemple, # fb0 se développe en # ffbb00. Cela garantit que le blanc (#ffffff) peut être spécifié avec la notation courte (#fff) et supprime toutes les dépendances sur la profondeur de couleur de l'affichage.

Les libellés de CSS 1 , CSS sont les mêmes. Les CSS 4 draft disent des choses similaires.

Les documents Internet Explorer et Firefox indiquent la même méthode.

À titre d'exemple pratique, consultez cet extrait de code, qui contient 3 <div>s de styles

div { width: 100px; height: 100px;  }
<div style="background-color:#f0f0f0;">#f0f0f0</div>
<div style="background-color:#fff;">#fff</div>
<div style="background-color:#ffffff;">#ffffff</div>

Sur Mac OS X 10.6, tous Firefox 3.6, Opera 10.10, Safari 4 rendu #fff comme #ffffff.

Behavior in different browsers

Je ne vois aucune raison pour laquelle un navigateur ou la norme voudrait s'écarter de cette expansion à l'avenir, car la couleur #ffffff est beaucoup plus courant que #f0f0f0.

75
kennytm

spécification CSS2 section 4.3.6 Couleurs:

Le modèle de couleurs RVB est utilisé dans les spécifications de couleurs numériques. Ces exemples spécifient tous la même couleur:

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      
em { color: rgb(100%, 0%, 0%) }

Le format d'une valeur RVB en notation hexadécimale est un "#" immédiatement suivi de trois ou six caractères hexadécimaux. La notation RVB à trois chiffres (#rgb) est convertie en une forme à six chiffres (#rrggbb) en répliquant des chiffres, pas en ajoutant des zéros. Par exemple, # fb0 se développe en # ffbb00. Cela garantit que le blanc (#ffffff) peut être spécifié avec la notation courte (#fff) et supprime toutes les dépendances sur la profondeur de couleur de l'affichage.

Étant donné que tous les navigateurs modernes prennent en charge CSS, vous pouvez supposer que cela fonctionnera de cette façon dans vos sites Web et applications Web.

17
Brian R. Bondy

Test sur IE8, Firefox 3.6 et Google Chrome 5.0 beta, les trois navigateurs répètent le chiffre hexadécimal:

  • 000 produit 000000
  • FFF produit FFFFFF
  • 876 produit 887766

...et ainsi de suite.

6
Kevin Ivarsen

Je n'ai pas connu de navigateur pour ne pas étendre #FFF à #FFFFFF. Je serais intéressé de savoir ce que vous pensez ne pas - ou voulez-vous dire que certains continuent de montrer #FFF?

Cependant, si j'ai bien compris, le #FFF est un raccourci valide, et # F0 se développerait également (valablement) en # F0F0F0.

Cela pourrait être intéressant http://www.websiteoptimization.com/speed/Tweak/hex/

1
grimorde

Je pense que je devrais encourager les gens à ne pas faire cela, car cela équivaut à dire à quelqu'un que vous voulez 15 de quelque chose, puis à vous attendre à ce qu'ils apparaissent avec 255. Quelle façon grossière et étrange de raccourcir 0xFFFFFF. C'est le "r u there" de la conception web pour moi.

1
Jaryn