Hoje inspecionando um elemento pelo Google Chrome reparei que ele tem uma sintaxe bem peculiar para a cor, repare que é um RGB
, mas mesmo assim tem um / 20%
que me parece funcionar como um canal alfa de transparência para a cor. Outro detalhe é que não tem vírgulas ,
separando os caracteres.
O "normal" seria
rgba(0, 0, 0, 0.2)
Mas eles usam
rgb(0 0 0 / 20%)
Que padrão é esse de escrever cor com transparência? Alguém tem mais informações, não achei nada a respeito... Ou isso é uma coisa particular do browser Chrome e como seria o suporte dos outros browsers para essa sintaxe?
div {
border: 1px solid #000;
width: 200px;
height: 70px;
padding: 5px;
}
.rgba {
background: rgba(255, 0, 0, 0.5);
}
.rgb {
background: rgb(255 0 0 / 50%);
}
<div class="rgba">BG: rgba(255, 0, 0, 0.5)</div>
<div class="rgb">BG: rgb(255 0 0 / 50%)</div>
%
:D, tiporgb(100% 0% 0% / 50%);
haha. Outro detalhe que vi é que o rgb modernizou, e "aboliu" oa
, entãorgb(255, 0, 0, 0.5)
tb funciona normalmente... Veja: Also for legacy reasons, an rgba() function also exists, with an identical grammar and behavior to rgb().