rgba() and hsla() are legacy functions and aliases in modern browsers
- Published at
- Updated at
- Reading time
I still define my CSS colors in hex values. 💪
hsla() are valuable CSS functions, but it's so cumbersome to convert hex values (
#34aa44) to numbers or percentages. That's why I never adopted the color functions.
My rare usage is why I missed that the CSS Color Module Level 4 spec made
The specification introduced two changes:
hsl()accept alpha values.
- Color functions accept space-separared values.
hsl() accepting transparency values,
rgba() became legacy functions and are now aliases for
The second edition is a new space-separated syntax, that improves readability:
/* evolution of the rgb function with transparency */ rgba(255, 255, 255, 50%) rgba(255 255 255 / 50%) rgb(255 255 255 / 50%) /* evolution of the hsl function with transparency */ hsla(235, 100%, 50%, 50%) hsla(235 100% 50% / 100%) hsl(235 100% 50% / 100%)
These two new features made color handling easier! You don't have to worry about color functions that do or don't support transparency, and the space/slash syntax highlights seperates values and makes it easier to read. I love it when CSS becomes more precise!