html - online - ¿Style="color:#FFF;" se representa como#F0F0F0 o#FFFFFF?

rgba color picker

Question

Al definir colores usando "taquigrafía hexidecimal" ( style="color: #FFF;" ), ¿existe un método definido para expandir la taquigrafía? ( style="color: #F0F0F0;" o style="color: #FFFFFF;" )

¿Todos los navegadores utilizan el mismo método de expansión? ¿Es este comportamiento por especificación (si es así, dónde se define)? ¿El método de expansión quizás varíe entre CSS 1/2/3?

He observado que "la mayoría de los navegadores" se expanden a #FFFFFF .

¿Hay otros lugares (fuera de HTML / CSS) donde se permita esta notación abreviada, pero el método de expansión es diferente?

Siempre he evitado usar el hexadecimal de taquigrafía, porque nunca he sabido las respuestas a estas preguntas ...

Answer 1

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

La notación RGB de tres dígitos (#rgb) se convierte en una forma de seis dígitos (#rrggbb) al replicar dígitos, no agregando ceros. Por ejemplo, # fb0 se expande a # ffbb00. Esto garantiza que el blanco (#ffffff) pueda especificarse con la notación corta (#fff) y elimina cualquier dependencia de la profundidad de color de la pantalla.

Los enunciados de CSS 1 , CSS 3 son los mismos. El borrador de CSS 4 dice cosas similares.

Los documentos de Internet Explorer y Firefox establecen el mismo método.

Como ejemplo práctico, consulte este fragmento de código, que presenta 3 <div> s de estilos

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>

En Mac OS X 10.6, todos los Firefox 3.6, Opera 10.10, Safari 4 se representan #fff como #ffffff .

No veo una razón por la cual un navegador o el estándar quiera desviarse de esta expansión en el futuro, ya que el color #ffffff es mucho más común que #f0f0f0 .

Answer 2

La sección de especificaciones CSS2 4.3.6 Colores:

El modelo de color RGB se utiliza en las especificaciones numéricas de color. Todos estos ejemplos especifican el mismo color:

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

El formato de un valor RGB en notación hexadecimal es un ''#'' seguido inmediatamente por tres o seis caracteres hexadecimales. La notación RGB de tres dígitos (#rgb) se convierte en una forma de seis dígitos (#rrggbb) al replicar dígitos, no agregando ceros. Por ejemplo, # fb0 se expande a # ffbb00. Esto garantiza que el blanco (#ffffff) pueda especificarse con la notación corta (#fff) y elimina cualquier dependencia de la profundidad de color de la pantalla.

Dado que todos los navegadores modernos son compatibles con CSS, puede asumir que funcionará de esta manera en sus sitios web y aplicaciones web.

Answer 3

No he conocido un navegador para no expandir #FFF a #FFFFFF. Me interesaría saber cuál cree que no, o quiere decir que algunos continúan mostrando #FFF?

Sin embargo, como lo entendí, el #FFF es una abreviatura válida, y # F0 también se expandirá (válidamente) a # F0F0F0.

Esto podría ser de interés http://www.websiteoptimization.com/speed/tweak/hex/

Answer 4

Probando en IE8, Firefox 3.6 y Google Chrome 5.0 beta, los tres navegadores repiten el dígito hexadecimal:

• 000 produce 000000
• FFF produce FFFFFF
• 876 produce 887766

...Etcétera.

Answer 5

Siento que debería animar a la gente a no hacer esto, ya que es equivalente a decirle a alguien que quieres 15 de algo y luego esperar que aparezca con 255. Que manera más asquerosa y extraña de abreviar 0xFFFFFF. Este es el "ru there" del diseño web para mí.