[Robin]: Happy new year, folks! Chris wrote his annual thank you and end of year wrap-up which breaks down everything that’s happened on CSS-Tricks this year. I love starting the year reading these things, digging into the analytics, and learning about how the site is doing (considering that data often is hidden or never available on other similar websites).
Chris writes:
Thanks for stopping by and reading this site. If you didn’t, I’d be out of a job around here, and I quite like this job so I owe it all to you. Like a family holiday card, allow me to share how the year went from our perspective, both with numbers and feelings, and then do a review of our goals.
🎨 Upcoming color features in CSS
I keep hearing about all the new and upcoming cool things we’ll be able to do with colors in CSS soon but I haven’t dug into it yet. Let me just take a look at the spec, please hold…
Ah, I see… Huh. Interesting…very interesting. Of course!
Okay, so: there’s a lot of color values in CSS: RGB, HEX, HSL, etc. And, if you’re like me and work on big codebases then you likely use a combination of them. Sometimes you reach for HEX or RGBA or whatever depending on the situation even in the same codebase. Now, the problem is that if we have a HEX value we can’t take that value and change it into a HSL color (with CSS alone at least). There are a few reasons why we might want to do this, perhaps the main one being that you probably have your colors stored in variables like this:
:root {
--color-background: #fff;
--color-text: #333;
}You can use those properties like this…
.card {
background: var(--color-background);
}…but now what happens if we want to add opacity to that HEX value we’re using above? With CSS we just…can’t convert it RGBA or HSLA today. The best thing to do is probably convert those variables to a different format. But that kinda sucks and isn’t always possible.
This is one of many problems that the CSS Color Module 5 hopes to resolve, as Mattia Astorino mentioned a while back:
With the new #css Color module 5 we can define relative colors starting from a var, and manipulate the values. In this example, we take the HSL values from black, we return h s l channels untouched, and we change the transparency to be 80%.
html {
--bg-color: black;
}
.overlay {
background: hsl(from var(--bg-color) h s l / 80%;
}That second to last line is pretty strange to me! But that’s called the relative color syntax and it’s how we convert one color value to another or do wild manipulation on that same color (it’s only now dawning on me just how much manipulation is possible with these new superpowers). Note that you can manipulate/replace those h, s, and l values with calc() and such.
Jim Nielsen wrote about relative colors a while ago and I read his post then and said “haha! yes!” but I didn’t really understand what was happening. But now after looking at the spec, it’s all coming together.
Here, look at this future CSS:
:root {
--color: #ff0000;
}
.selector {
color: hsl(from var(--color) h calc(s - 10%) l);
}We start by defining a variable that’s a HEX color. Then we set up a class name called .selector, use the hsl() function to create a hsl color, then we take that hex value in the variable, until finally we decrease the saturation of that new color by 10%. That’s…magic! I sort of can’t quite comprehend how much this reconstruction of colors unlocks.
So can we use them yet? Well, no. Relative colors are only supported in Safari Technology Preview for now but my hunch is that this stuff will ship in other browsers soon.
👀 Other things that caught my eye this week
- The
contentattribute will soon be animatable across all browsers. Thanks to Safari Technology Preview 136 adding support, this means you can animate text with CSS alone. Here’s a cool demo. - This great post about empathetic animation caught me off guard because Cassie Evans mentions how bad animations make folks feel as if a website has poor performance. And that makes a ton of sense to me!
- Rereading this post by Ahmad Shadeed called Defensive CSS reminded me that I’ve never used
overflow-behavior: containbefore. It’s super useful!
Sponsor
Jetpack Backups: Now Always Real-time
Until now, Jetpack has offered daily backups as an option for site owners. And while this is a great step to protect your site, Jetpack’s real-time backups are the best way to get complete peace of mind. They save a copy of your site each and every time a change is made — a page is updated, a post is added, a setting is tweaked, or a product is purchased — all behind the scenes without requiring you to lift a finger. That way, you know that you’ll never lose a second of your hard work or a single customer order.
That’s why Jetpack is now including real-time backups in each of our Backup and Security plans.
[Chris]: I saw this thing called Spout the other day. It’s like a video conference call thing, only the layout of what everyone see’s is this collaborative canvas rather than just rectangles in a grid or whatever.
That kinda reminded me of mmhmm where the app gives you this virtual canvas you construct and it pipes out a virtual camera of that canvas. So your camera can be a combination of your face, screensharing, other images and video, etc.
And sharing not just yourself but an arranged screen reminds me of Loom, that highly encourages that kind of video creation and sharing.
Sprout also kinda reminded me of Gather, where it’s ultimately about talking to people virtually, but it’s not just rectangles of faces. In Gather, you have an avatar and walk around and talk to people that are close by.
When in turns reminds me of Skittish, which looks similar, even down to the fun aspect, except more 3D.
It’s no surprise, with the pandemic, that video “conferencing” stuff is evolving pretty quickly. Zoom is ubiquitous, surely because it’s so damn reliable, but it’s maybe starting to feel a bit old school or at least far from the only option. Around made a decent splash this year, making the actual faces of the people you are talking with smaller, rounder, move of an “overlay”, and highly filterable.
And getting even more metaverse-y (ugh), there is Virtway Events which allows for meeting in VR, because of course that exists.
If you were to ask me where I think all this is headed (literally nobody has asked me that), I’d say… uhm… phone calls? I’d say we’re sick of looking at each other through fuzzy webcams, and making ourselves into avatars or giving us fancier/better webcams isn’t any better. I think audio-only (except for screen-sharing) will be the near-future of work-related conferencing, and that will solidify even more once the pandemic fades and more people go back to work.