Cores hexadecimais de 8 dígitos

Um dos recursos mais solicitados em meus primeiros dias de desenvolvimento web era a capacidade de definir a opacidade em elementos e até mesmo em imagens PNG sem a necessidade de CSS específico do navegador ou hacks. Por fim, obtivemos suporte nativo à opacidade e até mesmo desfrutamos de rgba(), a capacidade de citar um nível de opacidade com uma cor.

Embora eu tenha adorado a capacidade de fornecer uma opacidade com cores usando o rgba(), o uso de cores hexadecimais sempre esteve enraizado em mim, o que tornou irritante a necessidade repentina de conversões de rgba. Felizmente, hoje em dia temos valores hexadecimais de 8 dígitos que nos permitem citar um nível de opacidade como os dois últimos caracteres do valor hexadecimal!

O CSS

O hexadecimal implica “seis”, mas os dois últimos dígitos do valor hexadecimal de 8 caracteres são o valor da opacidade:

.myElement {
    /* { red/50% opacity } */
    /* pink of white background */
    background: #ff000080;
}

Adoro o fato de podermos usar cores hexidecimais com o valor adicional de opacidade; a necessidade de converter para rgba para aproveitar a opacidade era uma frustração desnecessária. Devo algo ao criador dessa API!