Mudanças no uso do RGBA: Nova utilização do RGB para cores no CSS

Olá pessoal.

Hoje publiquei um post no meu blog/diário de estudo no qual abordo uma alteração nas especificações de cores no CSS, destacando a função rgba() que se tornou obsoleta e a novidade de poder separar os valores da função rgb() por vírgulas.

Link post: https://justcodelab.wordpress.com/2023/07/17/mudancas-no-uso-rgba/

No entanto, decidi publicar aqui também para que todos possam ler.

A função rgba() tem sido uma ferramenta valiosa para definir cores usando os valores de canal RGB juntamente com um valor de transparência alfa. No entanto, com as evoluções recentes no desenvolvimento web, novas abordagens e recursos estão sendo introduzidos para oferecer uma melhor flexibilidade e desempenho.

Em rececente atualização da documentação realizada pela mdn web docs, foi destacada uma nota de que a função RGBA encontra-se legada:

Note: The legacy rgba() syntax is an alias for rgb(), accepting the same parameters and behaving in the same way.

Portanto, ao trabalhar com cores no CSS, devemos utilizar a função rgb() para aplicar os efeitos de transparência.

Outro fato relevante apontado na documentação é a possibilidade de separar os valores da função rgb() por virgulas.

Exemplos de Sintaxe

No exemplo abaixo, estamos usando a função rgb() para definir a cor de fundo sem a utilização de virgulas.

space-separated {
background-color: rgb(255 0 0 / 0.5);
}

A forma de código apresentada é uma forma alternativa de escrever os valores de canal RGB e a transparência alfa. Em vez de separar os valores por vírgulas, usamos espaços para separá-los.

Nesse caso, estamos definindo um fundo vermelho totalmente opaco (canais de vermelho, verde e azul com o valor máximo de 255) com uma transparência de 0,5 (50%).

De forma alternativa, temos bloco de código com as mesmas definições, porém com utilização de virgulas para separar os valores.

comma-separated {
background-color: rgb(255, 0, 0, 0.5);
}

Compatibilidade com browsers

Embora a função rgba() não esteja mais na vanguarda das práticas recomendadas, ela continuará funcionando e sendo suportada pelos navegadores.

Por fim, é importante estar ciente das alternativas mais recentes e considerar sua adoção para garantir a compatibilidade e otimização de nossos projetos.

Obrigado!