Est-ce que style="color : #FFF ;" est rendu par #F0F0F0 ou #FFFFFF ?

Question

Lorsque vous définissez les couleurs à l'aide de la méthode "shorthand hexidecimal" ( style="color: #FFF;" ), existe-t-il une méthode définie pour développer la sténographie ( style="color: #F0F0F0;" o style="color: #FFFFFF;" )

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

J'ai observé que "la plupart des navigateurs" s'étendent pour #FFFFFF .

Existe-t-il d'autres endroits (en dehors de HTML/CSS) où cette notation abrégée est autorisée, mais où 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...

Answer 1

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 les chiffres, et non en ajoutant des zéros. Par exemple, #fb0 se transforme en #ffbb00. Cela garantit que le blanc (#ffffff) peut être spécifié avec la notation courte (#fff) et supprime toute dépendance vis-à-vis de la profondeur de couleur de l'affichage.

Formulations de CSS 1 , CSS 3 sont les mêmes. Le site Projet de CSS 4 disent des choses similaires.

El Internet Explorer y Firefox Les documents de l'UE indiquent la même méthode.

À titre d'exemple concret, veuillez consulter cet extrait, qui comporte 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 les rendus de Firefox 3.6, Opera 10.10, Safari 4 #fff como #ffffff .

Je ne vois pas de raison pour qu'un navigateur ou la norme veuille s'écarter de cette expansion à l'avenir, puisque la couleur #ffffff est beaucoup plus courante que #f0f0f0 .

Answer 2

El Spécification CSS2 section 4.3.6 Couleurs :

Le modèle de couleur RVB est utilisé dans spécifications numériques des couleurs. Ces exemples 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 hexadécimale est un '#', suivi immédiatement de trois immédiatement suivi de trois ou de six caractères hexadécimaux. Le site notation RVB à trois chiffres (#rgb) est convertie en une forme à six chiffres (#rrggbb) en répliquant les chiffres, et non en en ajoutant des zéros. Par exemple, #fb0 se transforme en #ffbb00. Cela permet de garantir que blanc (#ffffff) peut être spécifié avec avec la notation courte (#fff) et supprime toute toute dépendance à l'égard de la profondeur de couleur de l'écran.

Étant donné que tous les navigateurs modernes prennent en charge les CSS, vous pouvez supposer qu'ils fonctionneront de la même manière dans vos sites et applications Web.

Answer 3

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

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

...et ainsi de suite.

Answer 4

Je pense que je dois encourager les gens à ne pas faire cela, car cela équivaut à dire à quelqu'un que vous voulez 15 de quelque chose et à attendre qu'il vienne avec 255. Quelle manière grossière et étrange d'abréger 0xFFFFFF. Pour moi, c'est le "r u there" de la conception web.

Answer 5

Je n'ai jamais connu un navigateur qui ne développe pas #FFF en #FFFFFF. J'aimerais savoir lequel ne le fait pas - ou voulez-vous dire que certains continuent à afficher #FFF ?

Cependant, d'après ce que j'ai compris, le #FFF est un raccourci valide, et #F0 s'étendrait aussi (valablement) à #F0F0F0.

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