O CSS Color Module Level 4 provavelmente suportará a notação RGBA hexadecimal de 4 e 8 dígitos!
Há três semanas (18 de dezembro de 2014), o rascunho do editor do CSS Color Module Nível 4 foi enviado ao CSS W3C Working Group. Embora em um estado que é muito suscetível a mudança, a versão atual do documento implica que, no pouco futuro próximo CSS irá apoiar tanto a notação hexadecimal RGBA 4 e 8 dígitos.
Nota: a citação a seguir tem partes irrelevantes cortadas e a fonte pode ter sido fortemente modificada no momento em que você a leu (como mencionado acima, é um rascunho do editor e não um documento finalizado).
Se as coisas mudaram bastante, deixe um comentário para que eu possa atualizar esta resposta!
§ 4.2 As notações hexadecimais RGB: #RRGGBB
A sintaxe de a <hex-color>
é um <hash-token>
token cujo valor consiste em 3, 4, 6 ou 8 dígitos hexadecimais . Em outras palavras, uma cor hexadecimal é escrita como um caractere de hash, "#", seguido por um número de dígitos 0-9
ou letras a-f
(o caso das letras não importa - #00ff00
é idêntico a #00FF00
).
8 dígitos
Os 6 primeiros dígitos são interpretados de forma idêntica à notação de 6 dígitos. O último par de dígitos, interpretado como um número hexadecimal, especifica o canal alfa da cor, onde 00
representa uma cor totalmente transparente e ff
representa uma cor totalmente opaca.
Exemplo 3
Em outras palavras, #0000ffcc
representa a mesma cor que rgba(0, 0, 100%, 80%)
(um azul levemente transparente).
4 dígitos
Essa é uma variante mais curta da notação de 8 dígitos, "expandida" da mesma maneira que a notação de 3 dígitos. O primeiro dígito, interpretado como um número hexadecimal, especifica o canal vermelho da cor, onde 0
representa o valor mínimo e f
o máximo. Os próximos três dígitos representam os canais verde, azul e alfa, respectivamente.
O que isso significa para o futuro das cores CSS?
Isso significa que, supondo que isso não seja completamente removido do documento do nível 4, em breve poderemos definir nossas cores RGBA (ou cores HSLA, se você é um desses caras) em formato hexadecimal nos navegadores compatíveis com o Color Sintaxe do módulo nível 4.
Exemplo
elem {
background: rgb(0, 0, 0); /* RGB notation (no alpha). */
background: #000; /* 3-digit hexadecimal notation (no alpha). */
background: #000000; /* 6-digit hexadecimal notation (no alpha). */
background: rgba(0, 0, 0, 1.0); /* RGBA notation. */
/* The new 4 and 8-digit hexadecimal notation. */
background: #0000; /* 4-digit hexadecimal notation. */
background: #00000000; /* 8-digit hexadecimal notation. */
}
Quando poderei usar isso em meus produtos voltados para o cliente?
Todas as piadas de lado: atualmente, é apenas o início de 2015, portanto elas ainda não serão suportadas em nenhum navegador por um bom tempo - mesmo que seu produto seja projetado apenas para funcionar nos navegadores mais atualizados que você provavelmente isso não acontecerá em um navegador de produção tão cedo.
Exibir o suporte atual do navegador para a notação de cores #RRGGBBAA
No entanto, dito isso, o modo como o CSS funciona significa que podemos realmente começar a usá-los hoje! Se você realmente deseja começar a usá-los agora, contanto que adicione um retorno, qualquer navegador não compatível simplesmente ignorará as novas propriedades até que sejam consideradas válidas:
figure {
margin: 0;
padding: 4px;
/* Fall back (...to browsers which don't support alpha transparency). */
background: #FEFE7F;
color: #3F3FFE;
/* Current 'modern' browser support. */
background: rgba(255, 255, 0, 0.5);
color: rgba(0, 0, 255, 0.75);
/* Fall... foward? */
background: #ffff007F; /* Or, less accurately, #ff08 */
color: #0000ffbe; /* Or #00fc */
}
<figure>Hello, world!</figure>
Contanto que você esteja vendo esta resposta em um navegador que suporte as propriedades background
e color
em CSS, o <figure>
elemento resultante do snippet acima será muito parecido com este:
Usando a versão mais recente do Chrome no Windows (v39.0.2171) para inspecionar nosso <figure>
elemento, veremos o seguinte:
O retorno hexadecimal de 6 dígitos é substituído pelos rgba()
valores, e nossos valores hexadecimais de 8 dígitos são ignorados, pois atualmente são considerados inválidos pelo analisador de CSS do Chrome. Assim que nosso navegador suportar esses valores de 8 dígitos, eles substituirão rgba()
os valores.
ATUALIZAÇÃO 2018-07-04: Firefox, Chrome e Safari agora são compatíveis com essa notação, o Edge ainda está ausente, mas provavelmente seguirá ( https://caniuse.com/#feat=css-rrggbbaa ).
rgb(0xff,\x80,#44)
surpreendentemente representação octal parece york um poucorgb(0100, 0200,0300)
é#4080C0