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 é muito bombom, 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).:
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.