Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
The ever evolving state of CSS and the web
0 Plays2 seconds ago
Starting with a dive into an article about the light-dark() function and theming in CSS, I ramble my way through topics of browser support of new features, browsers fixing issues with existing features, and some talk about the spec and how we can all help out in improving the current state of things.
✅ Should the CSS light-dark() function support more than light and dark values: https://css-tricks.com/should-the-css-light-dark-function-support-more-than-light-and-dark-values/
✅ The game I mentioned: https://css-questions.com
✅ Frontend Masters workshop: https://frontendmasters.com/teachers/kevin-powell/?utm_source=powell&utm_medium=social&utm_campaign=pro-css&code=powell (affiliate link)
✅ The New CSS Toolkit - Online workshop with Smashing Conference: https://smashingconf.com/online-workshops/workshops/css-toolkit-kevin-powell/
✅ Smashing Conf Amsterdam (and in person workshop): https://smashingconf.com/amsterdam-2026
✅ Interop Proposers Guide: https://github.com/web-platform-tests/interop/blob/main/proposal_guide.md
Recommended
Transcript
Introduction to 'General Musings' Podcast
00:00:00
Speaker
Hello, my friend and friends, and welcome to my podcast, General Musings. My name is Kevin, and here my podcast, I talk about whatever is front of mind for me in any given week, usually in some way that's related to front-end development.
00:00:10
Speaker
And this week, we're definitely staying on theme. And I always say front-end development. It's usually going to be about CSS, right? if If we're staying on topic, it's usually about CSS, not always on topic.
Discussion on CSS Light/Dark Functions
00:00:19
Speaker
ah But this week, I want to be talking about a really good article. I'll make sure it's linked in the description, show notes, whatever we want to call them.
00:00:26
Speaker
uh it's called should the css light dark function support more than light and dark values and the articles by sun canmy fafora sorry if i said your name wrong who's also the one who did the css game css questions.com so it's css hyphen questions.com it's like a quiz multiple choice quiz site uh that's similar actually to something i had an idea about so it's cool someone else did it so i don't have to now ah which I did that game on the live stream that I did this week, which I'll link in the description.
Milestone Celebrations and Subscriber Goals
00:01:00
Speaker
And that live stream is actually kind of a special moment because it was my 1000th video on my main channel, which is a lot of videos. It's kind of crazy that I've hit 1000 and I guess like 990 of those are probably on CSS, I'm guessing 980 maybe.
00:01:17
Speaker
um so yeah, a big milestone there, I think. ah The other milestone that I'm waiting to hit is the 1 million subscribers that, oh my goodness, it's
Announcements: Upcoming Workshops
00:01:26
Speaker
taking a long time. So if you're watching this and you haven't subscribed over there, I would ah appreciate it. My kids have been bugging me.
00:01:31
Speaker
I've been looking at it. ah During the live stream, I looked at it and I actually lost subscribers. during the live stream and I'm like oh we're going the wrong way here everybody um but maybe one day I'll actually hit it or we'll just stay tantalizing tantalizingly close uh and just never get there that's always a possibility too which it doesn't really matter it's a vanity stat but we're so close it would be kind of cool And just really fast before we get into the the main topic, which is that article that I've mentioned, I just want to let you know that I am doing, i have a few workshops that are coming up.
00:02:05
Speaker
So have one with Frontend Masters that's coming in October. So it's coming up pretty soon. And then I have one with Smashing Magazine Online that's also coming up as well as an in-person one and doing some conferences
Exploring CSS Color Schemes
00:02:18
Speaker
and other stuff. But for the workshops, if you're interested in anything like that,
00:02:21
Speaker
ah there's There's links in the description. The front-end masters one is sort of a modern CSS fundamentals one that's going to be more focused on... if you were, you know, you're starting to learn CSS now, you've you've played with it, you've done some stuff with it, but you're you're really wanting to like get comfortable with it now and learn all the important things you need to know to grow on and set that really good foundation.
00:02:44
Speaker
ah So that one is with Frontend Masters. And then the one with Smashing Magazine is called the New CSS Toolkit, which my pitch for is if the CSS that you write today looks the same as it did five years ago, then this workshop is for you.
00:02:57
Speaker
It's very much focused on things that you could... change today that would have an impact without worrying about browser support that we will look at some newer features and other things as well some of them as progressive enhancements and some of them is just teasers but the big focus of it is things you can use today in your workflow that just make life a million times easier So with that, let's let's jump into the main content, which is the the light dark thing. And it's a really good article. I'm going to let you read through it if you want to.
Future of CSS Color Schemes on GitHub
00:03:24
Speaker
ah But it's one and it focuses on that idea of light dark is cool, but wouldn't it be really nice if it could do more than just light and dark? Uh, and cause that's a big thing, right? A lot of times we have more than two themes.
00:03:38
Speaker
And the main thing that comes out of the article is the whole purpose of light dark was to be able to attach, like have a way to theme that's attached to the color scheme of our website.
00:03:50
Speaker
And that's specifically talking when I say color scheme about the color scheme property. So we have color scheme, light dark. Uh, and cause with that follows like the media or not the media query, sorry.
00:04:03
Speaker
We have the color scheme light dark, where you can specify light or dark or light dark. And if you put both keywords space separated, then the browser will just pick based on the system preferences.
00:04:15
Speaker
And this is similar to how you can use the media query to detect the user preferences for light or dark. the late The color scheme light dark along with the light dark color function is a lot better, in my opinion, than relying on the media query. There's just a few things that makes a lot easier, especially because then you can lock in color schemes on specific elements. So if you have something that you don't want to switch, it's super easy to do because you just set the color scheme on that individual component or element or whatever it is that you should never change, and then that one's locked in regardless of what happens.
00:04:50
Speaker
Uh, the only time that could become a little weird is if you're switching themes in a sense, like through a toggle or something, but even then it doesn't impact it. If you're using the light dark function, uh, cause you're locking in a specific thing there.
00:05:04
Speaker
Anyway, it' it's good. I should probably make a long video on it that explores why it's useful in those ways, but the I think my my biggest thing in the article actually is just how much you can learn about what's happening with CSS if you actually read some of the tickets and other things that are going on or and and issues on GitHub that are following some of these
CSS Properties for High Contrast Modes
00:05:28
Speaker
things. Because a big part of the post talks about some of the discussions that are happening and how we're actually probably going to get more than just the light dark stuff.
00:05:37
Speaker
And then we probably have a color scheme, ah custom like color scheme type property. So it'd be or instead of light dark, would be schemed value is I think what's... I think it's only at like the proposal stage ah right now. I've been poking around after reading through the post at the the issues on GitHub and reading a bit of the discussion. But it's...
00:06:00
Speaker
where we could have like a custom theme instead of just locking in with the available ones. But for me, the really big takeaway of all of this was ah an example that is in the article from the GitHub issue where Tab Atkins gave an example with an at color scheme.
00:06:20
Speaker
where you could come in with your own color scheme and you're setting the base scheme, a canvas color, text color, accent color. And I was like, oh this this is cool. ah A lot of people don't even know about kansas canvas color and canvas text and accent color.
00:06:36
Speaker
These are the colors that are part of, like if you do a, they're just like default colors essentially. But if you do, if you say color is canvas color, it's going to take the background color of like what the default is, right? So normally that would be white.
00:06:54
Speaker
But if you have a color scheme dark, then it would be the dark one. And you can do the same with canvas text. There's accent color. there's There's a whole bunch of these sort of lower level colors that are available to us.
00:07:08
Speaker
There's sort of this whole bunch of lower level colors that are available that we never generally use for much. ah They mostly become useful if you're creating a color scheme or you're trying to style things up for a high contrast color modes or the forced contrast, I think it is, where you can't really control
Beyond Light/Dark: Multiple Color Schemes
00:07:27
Speaker
the colors. The only thing you can do is actually use those default ones.
00:07:31
Speaker
So you can say that my link is going to be... you know an accent color instead of the link color um if that's a thing i don't remember all of the the ones we have but yeah it was really interesting that we'd be able to define our own sort of base scheme stuff which uh is really really neat and then obviously go into more then then you could have your multiple color schemes essentially would work the way that light dark works but instead of just being a light and dark you could have as many themes in there as you want which I think most people don't really need. I think light dark covers most use cases because most websites out there will have a light and a dark at most. We still have tons that only have one color scheme.
00:08:13
Speaker
ah But yeah, I think the idea of having more is very useful. I would love to have more than just one option and be able to have like a light and dark and other things going on just because it's cool when we're web developers to muck around
Browser Support and Progressive Enhancement
00:08:26
Speaker
with them. with having multiple schemes sometimes. And especially with all the different ways we can manipulate colors these days with all the new color functions, it's always been one of those things where I'm like, I wish this was a little bit easier. And it sounds like eventually it will be.
00:08:40
Speaker
ah Which also leads to another thing that I wanted to talk a bit about, which is the... progress of browser support, I guess, with you still get a lot of people complaining about things. I had a comment on one of my videos recently that was saying ah something like this guy's channel is all about seeing features that we can't use for three years type of thing. And I was like, oh,
00:09:06
Speaker
that's a shit it was a bit of a shame that they thought that because i really do try and show features that sometimes sometimes they are things that are newer and we can't use them yet uh but i try and show things either like anchor positioning that has a solid ah polyfill or other things that can be used as progressive enhancements like a scroll driven animation most of the time can be a progressive enhancement right and then a view transitions are a fantastic example of does it really need to have the transition or could this just be a progressive enhancement? and I think 90% of the time it probably can be a progressive enhancement with Firefox is now has an intent to ship level one of view transitions as
New CSS Heading Pseudo-Class in Firefox
00:09:45
Speaker
well. So that's really good though. I think level two is what we need. Level one is good. Level two is better. And I'd have to look into it, but I'm pretty sure there's a few features that are in at least Chrome and maybe Safari that are at level two, which just make certain things a bit easier.
00:10:00
Speaker
but at least we're getting it. We're seeing that progress coming. And it seems like Firefox is maybe doing a few things, ah they re putting more money into the browser, perhaps. and This is just speculation on my part, by the way.
00:10:12
Speaker
But it did seem like things were slowing down there a little bit. They were behind on... some features, but they recently hired Jake Archibald to be their, what's the DevRel type position, right? Letting us know about things.
00:10:25
Speaker
there We have the view transitions that i is coming. There was another one that Jake posted about that's coming. ah There's the heading pseudo class that's been added, and Firefox is the first one to actually add that, which is a feature I've been looking forward to for a really long time.
00:10:42
Speaker
which if you haven't heard about it, it's just like colon heading. And that would select all of your headings. And this might seem like a little bit of a, you know, do we really need that? But this can be super useful because you could do like card heading first child.
00:10:56
Speaker
And then you're not worried about having to come in with like a class name on the heading because your card, the first, if you have a card and you need it to be able to be used in different places. So sometimes it might need an H2 in it. Other times it might need an H3. Other times it might need an H4, et cetera, et cetera.
00:11:11
Speaker
But you always want that title to have the same style on it because it's sort of a component and it should look the same regardless of where it's being used. And so I think it'd be it just makes it a lot easier than having to come in with a class title or card title class on it.
00:11:27
Speaker
Not that that's the end of the world, but I just i like when I can... Throw a component in there, just write some HTML, put the class on the outside, put all the content inside, and it just does what it's supposed to do. And I realize if you were working with components, it becomes less important because you just are putting like a prop for the heading or whatever, like the text or however you're doing it or using slots. I mean, there's so many different ways we can do things, but...
00:11:52
Speaker
Yeah, I think that the heading is something I've really been looking forward to. Interestingly, there's also a heading function, so pseudo class function. So you have the little parentheses where you can sort of treat it like an nth child style.
00:12:07
Speaker
that one I need to play with, but you can do like a odd and it's going to select your H1, your H3 and your H5. And then you can do an even and it would select your H2, H4, H6. I'm not sure about that one.
00:12:20
Speaker
I think you can also list out like specific ones. you could only select your one, two, three type of thing to make that easier as well, which is fine. But I was like, oh, even an odd, I'm curious how I could use that in any meaningful way.
00:12:31
Speaker
Cause I'm not too sure, but Uh, I mean, I'd rather have the feature and never use it than not have the feature and have that one time that I wish I could have it. So I'm not going to complain that it's there and I'm sure we'll see some good use cases of it. Yeah. I'm sort of rambling a little bit now onto things I wasn't planning
Engaging in CSS Spec Discussions
00:12:48
Speaker
to talk about, to but to circle it back to like the colors thing and just these new features that are coming.
00:12:53
Speaker
I think one thing that happens that like when we get something like light, dark, and then people complain that it's not doing enough is, uh, was highlighted in the article. It wasn't intended to do everything. It had a specific thing it was intended to do and they'd planned for another step to come afterward. And I think that's sometimes what happens is we get this new feature and we might feel like it's not what we wanted or it's limited in certain ways.
00:13:18
Speaker
So if you're somebody... who's in that boat where new things are coming and you think they either work weird or they do strange things or whatever it is like you can get more involved in the discussions this is something i'm trying to do i'll put a link also i had the previous post or post a previous episode a little while back now uh with miriam suzanne where we talked about this type of thing and being more involved in the spec for everybody not just for like not writing a spec we did talk about how ah she got involved in in writing specs but other ways people can get involved and part of it might be following issues and commenting and sharing your thoughts on things so if if you're the type of person who is interested in that or you're seeing things come out you don't like what you're seeing and you don't like some of the new features that reminds me of another thing we'll ramble about in a second but
00:14:07
Speaker
um Yeah, it's easy to get involved in these things. It's something I'm trying to do more. I'm right now following a ton of issues. I haven't had any any comments, but I do try and if I have specific thoughts, I'm definitely going to share them. i'm I'm waiting a little bit, but I'm definitely going to be commenting on the new name for whatever masonry becomes. I'm just seeing sort of where things go there. But I do want to I have thoughts that maybe we can do an episode around at one point.
00:14:33
Speaker
um Which actually brings me to another new feature, which wasn't the the next thing I'm going to ramble on, but it does bring me to another new feature, or coming feature, which is the if.
00:14:43
Speaker
ah Just because the post lower down in the post on light dark, ah there's an example of how we can do custom using if you can just recreate the the whole idea of color schemes as well, which...
00:14:54
Speaker
maybe just makes it so we don't need a new feature and color the light dark function was a nice little intermediary. And I think maybe still could somehow be used, but if might just allow us not to worry about it and just create our own, sorry, I'm saying if, but we can have a custom function along with if to be able to recreate exactly what people are after.
00:15:15
Speaker
And i think custom functions might enable, you know, Suddenly it's going to open a lot of doors on things once the support for them starts increasing. And it's kind of a cool thing to have. And in going on those couple of tangents, I know I had another thing that I said I wanted to ramble about that. I forget what it is. Yes. I remember now it was, ah for, I've seen a lot of complaints from people recently about browsers implementing new features when they should, the time and effort should be going into fixing existing issues within the browsers.
00:15:49
Speaker
And I do agree i to a certain extent, but I think there's two things to realize when it comes to that. And I know there's people involved with the browsers work in the CSS working group and are involved in these new specs that are happening.
00:16:02
Speaker
so ah But there's not a lot of full-time like people just working on the spec that are also with a browser company. i So it's important to know that it's sort of two different things
Interop Initiative and Browser Compatibility
00:16:14
Speaker
that are going on where the spec is going to continue to evolve and new things are going to continue to add there.
00:16:22
Speaker
And the browsers will want to keep up with that. Whereas... While they still also do need to go back through and fix older things. And it is a bit of, you know, where do they spend their budgets for very big companies, at least with Safari and Chrome, ah that you would expect to have massive budgets. They don't put as much into the browser as you might think. And also the cost of maintaining the browsers is probably a lot higher than we realize.
00:16:50
Speaker
I don't have any insider information on any of that, but and i I bet you it's quite a bit more expensive to maintain the browsers than we can imagine, which is why things like Lady Bird trying to start a new engine, a fully new engine and everything else, like I think is a...
00:17:07
Speaker
massive undertaking that's cool that someone's trying uh but we'll see where it goes with that but uh yeah i think if i do think older things need to be fixed there are initiatives to try and help with that like the interop initiative to make sure we have interoperability across all these features that are old and new ones being added and i believe as of the time of posting, they're about to open up the next round of interop for 2026, like submissions for interop 2026. So if there's features that are currently in browsers right now that you think are, should have, yeah there's bugs in them.
00:17:43
Speaker
ah Maybe only one browser has a really big issue, or maybe all the browsers have issues. if all the browsers are doing the same thing, there's a chance it's not an issue. But ah if if there's issues with certain features or they're all, you know, it's buggy implementation in different ways across browsers, anything like that, ah the interop is how we, is one of the ways that this gets fixed because they pick a bunch of issues, not just CSS related, web related in general,
00:18:11
Speaker
uh, on features and that can be older features to make sure that they're all on par and or they're all working the way as expected. And they're on par between all the different browser engines.
Role of Surveys in Shaping CSS Features
00:18:22
Speaker
And so the browse, the pick like, what is it? 10 to 20 features. And the browsers agree to work on those and try and make sure they're good. And they write a whole bunch of tests and all the browsers have to pass those tests.
00:18:34
Speaker
Um, and I mean, it doesn't get them to a hundred percent, but it does make huge improvements and fix a lot of things. So, and people like to complain about Safari and issues with Safari on existing things instead of seeing them implement some of the new things like I was just talking about. So, if that's the case and there's certain things that are driving you nuts, you could definitely submit for the interop. I'll put links down below.
00:18:56
Speaker
i don't it As far as I know, it's not opened yet, but it's opening very, very soon, um the submissions for that. So, if you're set in another way we can get involved in in not necessarily the spec, but making sure that it is properly...
00:19:08
Speaker
there is by voicing our opinions on these things. Uh, the same as doing all those surveys and stuff that I know sometimes people are a little bit annoyed by. There's always another survey coming out, but the browser vendors do look at those and people get annoyed with those too, because the audiences for those surveys are biased a little bit. Like you, if you look at it, I say a little bit, quite a lot.
00:19:28
Speaker
Uh, but it's a very, it's generally a lot of people doing it, whether it's biased or not. And There's not a lot of ways, other ways people voice their opinions other than like these isolated, and maybe someone writes a blog post and those blog posts, if they gain traction, the browsers do see those as well.
00:19:47
Speaker
Um, from,
00:19:50
Speaker
From what I've been told, my videos have had an influence on things just because I'll talk about it and say, I wish, you know, and and talk about it enough. And then it it's had an influence because that gets other people involved in it. It pushes them forward because then other people say, yeah, I'd like that too, or whatever it is. It could be a feature. It could be fixing something, or it could just often, often for me, it's been a feature ah that we wish was in all browsers.
00:20:14
Speaker
when only one or two of them had it. And so it's cool that I have a platform where I'm able to do that. So you can always complain to me until I make a video on something if you want. But I think things like interop and other or just being involved in the spec, whether it is, whatever it is,
00:20:29
Speaker
ah can can actually go a long way, even if you're you feel like maybe you're a small voice or no one's going to listen to you. There's a very small group of people that actually talk and are vocal about all of this. If you look at all the issues, it's always the same people that are involved. So the more voices that are there, the better and all of that.
00:20:46
Speaker
So sort of a complete, well, we're talking about new features and we ended up talking about making sure CSS stays amazing and awesome. So yeah, I hope you enjoyed this episode with a slight tangent from where I was planning to bring it in the end. But ah again, i'll links to all of that stuff will be in the show notes if you're interested in any of that.
00:21:03
Speaker
And until next time, don't forget to make your corner of the internet just a little bit more awesome.