Extraño, ¿verdad? Códigos hexadecimales de 4 dígitos también. Son una forma de poner la información de transparencia alfa en el formato hexadecimal de los colores. Es posible que lo vea más de repente si usa Chrome, porque cayó en 52, y DevTools parece estar predeterminado para mostrar colores alfa transparentes en este formato, incluso si lo configuró originalmente con otra cosa.
Firefox también lo admite, para que conste.
Veamos cómo funciona:
.element {
/* This is green */
background: rgb(0, 255, 0);
/* It's the same as this */
background: #00ff00;
/* We could make it 50% transparent like this */
background: rgba(0, 255, 0, 0.5);
/* Or, with an alpha hex like this */
background: #00ff0080;
}Los dos últimos dígitos representan la transparencia alfa. Pero espere … los dos últimos dígitos son “80”, no “50”. Llegaremos a eso.
Primero, ¿recuerdas cómo funcionan los hexágonos de tres dígitos?
.element {
/* This */
background: #900;
/* Is the same as this */
background: #990000;
}Es cada dígito duplicado. Es lo mismo con cuatro dígitos.
.element {
/* This */
background: #0f08;
/* Is the same as this */
background: #00ff0088;
}En ocasiones, los formatos se denominan #RRGGBBAA y #RGBA.
La parte AA es una representación hexadecimal de 0-100 es como:
0 = 00
1 = 03
2 = 05
…
9 = 17
…
10 = 1A
11 = 1C
12 = 1F
…
99 = FC
100 = FF
Es por eso que “80” era realmente “50% de transparencia” en el ejemplo de arriba.
Además, aquí hay una tabla que adapté de aquí:
Vea el Pen XjbzAW de Chris Coyier (@chriscoyier) en CodePen.
¿Deberías usarlo?
Probablemente no. Todavía no está muy bien respaldado y no tiene ninguna ventaja sobre rgba() o hsla(), aparte de, supongo, una pequeña cantidad de bytes guardados.