rgba() and hsla() are legacy functions and aliases in modern browsers (#tilPost)

I still define my CSS colors in hex values. ? rgb(), rgba(), hsl() and 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 functio…

I still define my CSS colors in hex values. ? rgb(), rgba(), hsl() and 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 rgba() and hsla() redundant.

The specification introduced two changes:

  • rgb()/hsl() accept alpha values.
  • Color functions accept space-separared values.

With rgb()/hsl() accepting transparency values, hsla() and rgba() became legacy functions and are now aliases for rgb()/hsl().

(If you worry about browser support, check MDN. rgb()/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!



Reply to Stefan


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2024-03-28T15:25:18+00:00) » rgba() and hsla() are legacy functions and aliases in modern browsers (#tilPost). Retrieved from https://www.scien.cx/2021/09/18/rgba-and-hsla-are-legacy-functions-and-aliases-in-modern-browsers-tilpost/.
MLA
" » rgba() and hsla() are legacy functions and aliases in modern browsers (#tilPost)." Stefan Judis | Sciencx - Saturday September 18, 2021, https://www.scien.cx/2021/09/18/rgba-and-hsla-are-legacy-functions-and-aliases-in-modern-browsers-tilpost/
HARVARD
Stefan Judis | Sciencx Saturday September 18, 2021 » rgba() and hsla() are legacy functions and aliases in modern browsers (#tilPost)., viewed 2024-03-28T15:25:18+00:00,<https://www.scien.cx/2021/09/18/rgba-and-hsla-are-legacy-functions-and-aliases-in-modern-browsers-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » rgba() and hsla() are legacy functions and aliases in modern browsers (#tilPost). [Internet]. [Accessed 2024-03-28T15:25:18+00:00]. Available from: https://www.scien.cx/2021/09/18/rgba-and-hsla-are-legacy-functions-and-aliases-in-modern-browsers-tilpost/
CHICAGO
" » rgba() and hsla() are legacy functions and aliases in modern browsers (#tilPost)." Stefan Judis | Sciencx - Accessed 2024-03-28T15:25:18+00:00. https://www.scien.cx/2021/09/18/rgba-and-hsla-are-legacy-functions-and-aliases-in-modern-browsers-tilpost/
IEEE
" » rgba() and hsla() are legacy functions and aliases in modern browsers (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2021/09/18/rgba-and-hsla-are-legacy-functions-and-aliases-in-modern-browsers-tilpost/. [Accessed: 2024-03-28T15:25:18+00:00]
rf:citation
» rgba() and hsla() are legacy functions and aliases in modern browsers (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2021/09/18/rgba-and-hsla-are-legacy-functions-and-aliases-in-modern-browsers-tilpost/ | 2024-03-28T15:25:18+00:00
https://github.com/addpipe/simple-recorderjs-demo