7

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.

inserir a descrição da imagem aqui

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>

2
  • 1
    Especificação da W3C: drafts.csswg.org/css-color/#rgb-functions
    – Woss
    Commented 9/02/2021 às 18:18
  • 2
    @Woss cara muito foda essa documentação! Pelo que vi, e testei tb, poderia escrever tudo em % :D, tipo rgb(100% 0% 0% / 50%); haha. Outro detalhe que vi é que o rgb modernizou, e "aboliu" o a, então rgb(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().
    – hugocsl
    Commented 9/02/2021 às 18:30

3 Respostas 3

2

Existem várias sintaxes para o RGB/RGBA como mostra documentação sobre color value:

* Hexadecimal syntax */
#3a30                    /*   0% opaque green */ 
#3A3F                    /* full opaque green */ 
#33aa3300                /*   0% opaque green */ 
#33AA3380                /*  50% opaque green */ 

/* Functional syntax */
rgba(51, 170, 51, .1)    /*  10% opaque green */ 
rgba(51, 170, 51, .4)    /*  40% opaque green */ 
rgba(51, 170, 51, .7)    /*  70% opaque green */ 
rgba(51, 170, 51,  1)    /* full opaque green */ 

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */ 
rgba(51 170 51 / 40%)    /*  40% opaque green */ 

/* Functional syntax with floats value */
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%)

Essa sintaxe é "Whitespace", ou seja, separa os valores por espaço, e o último parâmetro é a opacidade:

div {
  border: solid 1px #000;
  display: inline-block;
  height: 100px;
  width: 100%;
  margin: 10px 0
}

.div1 {
  background-color: rgb(51 170 51 / 20%)    /*  20% opacidade */ 
}

.div2 {
  background-color: rgb(51 170 51 / 50%)    /*  50% opacidade */ 
}

.div3 {
  background-color: rgb(51 170 51 / 80%)    /*  80% opacidade */ 
}
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

É como as multiplas unidades de medida (px, pt, em, etc) ou por exemplo a sintaxe do estilo margin:

margin: 0 20px;
margin: 0 12px 3em -2pt;
margin: 0 auto;
etc...
2

Complementando a resposta do @RicardoPontual ...

Essa é uma forma de simplificar o uso de rgb ou rgba e deixar o código de uma maneira mais simples. Além do rgb, tem suporte para o hsl, color, e alguns que nunca nem usei.

Isso:

rgb(0, 128, 255)

rgba(0, 128, 255, 0.5)

hsl(198, 38% 50%)

hsla(198, 28%, 50%, 0.5)

Pode ser escrito como:

rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

lab(56.29% -10.93 16.58 / 50%)

lch(56.29% 19.86 236.62 / 50%)

color(sRGB 0 0.50 1 / 50%)

.hsl {
 background-color: hsl(298deg 28% 50% / 50%);
}
<div class="hsl">BG: usando hsl</div>

Em relação ao suporte e outros assuntos:

  • O suporte do navegador é bom, menos para o IE 11.

  • Se precisar de suporte para o IE 11, você pode:

    • pré-processá-lo usando SASS ou PostCSS;

    • ou não usá-lo.

  • Prettier, para limpar e formatar seu código, poderia intervir e converter a sintaxe. No momento tem essa issue a respeito. Verifique se sua versão atualizada corrige este comportamento.

-3

Essa sintaxe relativamente nova, eu achei um artigo https://css-tricks.com/no-comma-color-functions-in-css/, aonde menciona que as novas funções (e.g, lab, lch, and color), vão funcionar com a nova sintaxe, porém, abandonar a velha função seria necessario um update tem bilhões de sites provavelmente, então nenhum browser abandonaria o velho formato.

Então eles atualizaram a função antiga para funcionar com o novo formato para melhor padronizar seu codigo, e possivelmente declarar cores como variaveis e usar em multiplas funções de maneira mais facil

2
  • 1
    Embora este link possa responder à pergunta, é melhor incluir as partes essenciais da resposta aqui e fornecer o link para referência. As respostas apenas por link podem ser invalidadas se a página com o link for alterada. - Da Revisão
    – Kayo Bruno
    Commented 10/02/2021 às 0:28
  • Sim, porém o essensial foi mesmo o que eu comentei, que é um sintax nova, feita para ser compativel e as novas funções que usam esse estilo, o problema de abandonar a sintax antiga, não tem nada além disso mesmo
    – zero
    Commented 10/02/2021 às 2:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .