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…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate Updates
APA

Stefan Judis | Sciencx (2021-09-18T22:00:00+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 ,<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 ]. 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 . 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: ]
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/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.