If you want to support transparency in a CSS rgb or hsl function, there’s no need to write rgba or hsla anymore. You can simply write rgb or hsl with a / to indicate the alpha.
Adam Argyle’s tweet explains this better than I can.
rgb() ⇒ rgba() just to add transparency? 🤢hsl() ⇒ hsla() … 😭GOOD NEWS!fixed in CSS color-level-4,rgb() & hsl() accept a 4th parameter 🎉color demohttps://t.co/6uMtGvVbUYcolor level 4 docshttps://t.co/T1PSfA6boS🔥 tips- try in your fav browser!- drop comma’s! pic.twitter.com/xjc3DrPG0A
— Adam Argyle (@argyleink) January 17, 2020
Here’s the good news: This is supported across all major browsers — so you can use it in production today!
You can also use this if you’re a Sass user — Dart Sass supports this syntax too, but it converts the function into a regular rgba underneath the hood.
// What you write.selector{color: hsl(25035%30%/0.3);}// Compiled CSS.selector{color: rgba(59, 50, 103, 0.3);}
That’s it!
Previous Convertkit API: Using Forms vs Tags Next Overcoming styling frustrations caused by Astro islands and slots
Join My Newsletter
I share what I’m learning on this newsletter: code, building businesses, and living well.
Sometimes I write about technical deep-dives, product updates, musings on how to live, and sometimes my struggles and how I’m breaking through.
Regardless of the type of content, I do my best to send you an update every week.
First Name Email Subscribe
If you’re into making things and growing as a person, you’ll probably feel at home here.
“
Zell’s writing is very accessible to newcomers because he shares his learning experience. He covers current topics and helps all readers level up their web development skills. Must subscribe.
