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.
The spec even includes a section explaining how to convert RGB to HSL and vice versa.
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
If you worry about browser support, check MDN.
hsl() transparency values are well supported!
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!
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 8 days ago.