Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell 💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join --- 🧑‍💻 My editor: VS Code - https://code.visualstudio.com/ 🌈 My theme: One Dark Pro Var Night 🔤 My font: Cascadia Code --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel: Bluesky: https://bsky.app/profile/kevinpowell.co Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!" --- The State of CSS 2025 Survey  ## Metadata - Author: [[Kevin Powell]] - Full Title: The State of CSS 2025 Survey - Category: #articles - Document Note: --- tags: - #css - #webdevelopment - #opensource Author: Kevin Powell Source: YouTube / The State of CSS 2025 survey Reference: https://www.youtube.com/watch?v=r7m3Ka2LmPM date created: 2025-06-13 12:28 --- # Title: The State of CSS 2025 Survey – Deep Dive & Community Reflections ## Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📖 References](#-references) - [🗣️ Paraphrase](#-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-diversity-equity-inclusion-and-belonging-assessment) - [✅ Logical Validity](#-logical-validity) - [🔍 DARVO Analysis](#-darvo-analysis) - [🔍 SEO Evaluation](#-seo-evaluation) - [🎯 Conclusion](#-conclusion) --- ## 📝 Summary The State of CSS 2025 survey, as presented by Kevin Powell, is a comprehensive exploration of the latest CSS features, browser support, and the evolving needs of the web development community. The video not only walks through the survey itself but also provides live demos, community Q&A, and candid reflections on the pace of CSS innovation, accessibility, and the importance of consolidating new features for broader adoption. The session is rich with practical advice, personal anecdotes, and a strong emphasis on community-driven progress in the open web ecosystem. --- ## 📖 Main Content Kevin Powell’s walkthrough of the State of CSS 2025 survey is more than a technical review—it’s a living conversation with the web community. He highlights the rapid evolution of CSS, the challenges of browser inconsistencies, and the need for both innovation and stability. The video is peppered with live coding demos, real-time feedback from viewers, and honest takes on what’s working (and what’s not) in modern CSS. Kevin’s approach is inclusive, educational, and deeply rooted in the ethos of open source: sharing knowledge, crediting contributors, and advocating for sustainable, accessible web technologies. --- ## 🗒 Notes - [🎵 Intro & Community Setup](https://www.youtube.com/watch?v=r7m3Ka2LmPM&t=318) - Kevin welcomes viewers, sets up the stream, and introduces the State of CSS survey. - Community members like Sasha (survey creator) and Amit join the chat. - Discussion about music preferences and stream logistics. - [🆕 New CSS Features: Hexagon Shapes & Corner Shape](https://www.youtube.com/watch?v=r7m3Ka2LmPM&t=531) - Chrome Canary ships experimental hexagon shapes and new `corner-shape` options. - Live demo of bevel, scoop, notch, square, and squirkle corners. - Superellipse and infinity values explored. - [🎨 Gap Decorations in CSS](https://www.youtube.com/watch?v=r7m3Ka2LmPM&t=819) - Demo of gap decorations in grids/flex layouts. - Customizable offsets, paint order, and decoration styles. - Discussion of browser support and Chrome’s early adoption. - [🖼️ Figcaption Sizing & Container Queries](https://www.youtube.com/watch?v=r7m3Ka2LmPM&t=1015) - Community-sourced solution for syncing figcaption width to image size. - Use of `contain: inline-size` and `inline-size: fit-content`. - Credit given to contributors for innovative solutions. - [📋 Piccalilli 2025 Survey](https://www.youtube.com/watch?v=r7m3Ka2LmPM&t=1291) - Kevin reviews another community survey focused on education and content preferences. - Honest feedback on newsletter frequency, advertising, and merch. - Reflections on open working projects and job board ideas. - [📊 State of CSS 2025 Survey Walkthrough](https://www.youtube.com/watch?v=r7m3Ka2LmPM&t=1907) - Kevin begins the official survey, sharing his experiences with new CSS features. - Emphasis on the need for a slower pace and browser consistency. - Live demos and explanations for subgrid, logical properties, aspect-ratio, anchor positioning, container/style queries, and more. - [🧩 CSS Features Deep Dive](https://www.youtube.com/watch?v=r7m3Ka2LmPM&t=2075) - In-depth exploration of advanced CSS: blend modes, isolation, backdrop-filter, color-mix, LCH/OKLCH, scroll-driven animations, discrete property animations, and more. - Honest takes on browser support, accessibility, and real-world use cases. - [🛠️ Tools, Frameworks, and Testing](https://www.youtube.com/watch?v=r7m3Ka2LmPM&t=9722) - Discussion of CSS frameworks, preprocessors, and utilities (Sass, Prettier, Stylelint, etc.). - Reflections on browser testing, accessibility tools, and device coverage. - [🌱 Community, Education, and Open Source](https://www.youtube.com/watch?v=r7m3Ka2LmPM&t=10059) - Kevin’s commitment to education, onboarding, and sustainable open source. - Encouragement for community participation in surveys and feedback loops. - Final thoughts on the importance of transparency, inclusivity, and continuous learning. --- ## 📖 References - [The State of CSS 2025 Survey](https://survey.devographics.com/en-US/survey/state-of-css/2025?source=kevin_powell) - [Piccalilli 2025 Survey](https://piccalil.li/blog/wed-love-to-know-your-thoughts-with-the-piccalilli-2025-survey/) - [Kevin Powell’s Newsletter](https://www.kevinpowell.co/newsletter) - [CSS Demystified](https://cssdemystified.com) - [Beyond CSS](https://www.beyondcss.dev) - [MDN Web Docs](https://developer.mozilla.org/) - [Can I Use](https://caniuse.com/) --- ## 🗣️ Paraphrase 1. **On the Need for a Slower Pace in CSS Innovation** *"After years of rapid innovation, now feels like the right time for browser vendors to take a beat, consolidate, fix inconsistencies, and let the rest of us catch up. We might have heard about subgrid, scroll-driven animations, and all the other recent CSS improvements, but how many of us have actually used or mastered them?"* **Paraphrased:** The web has seen a whirlwind of CSS advancements, but perhaps it’s time for browser makers to pause, iron out inconsistencies, and give developers a chance to truly absorb and apply these new tools. While many are aware of features like subgrid and scroll-driven animations, few have had the opportunity to fully integrate them into their workflows. 2. **On Community-Driven Progress** *"This year's survey will be so interesting. It'll be a chance to see which of the past few years' new CSS additions have already been adopted by the community and which ones are still on our to-do list."* **Paraphrased:** The upcoming survey offers valuable insight into which recent CSS features have gained traction among developers and which remain largely unexplored, highlighting the community’s evolving priorities and adoption patterns. --- ## 📰 Newsletter **CSS 2025: The Future’s Here—Are You Ready?** Hey web creators! The State of CSS 2025 survey is live, and it’s a goldmine for anyone passionate about modern web development. From hexagon shapes and gap decorations to container queries and scroll-driven animations, CSS is evolving at breakneck speed. But with great power comes great browser inconsistency—so let’s talk about what’s working, what’s not, and how we can shape the future together. Recent updates include Chrome’s experimental features (hello, squirkles!), new educational surveys from Piccalilli, and a growing focus on accessibility and sustainable open source. The community is buzzing about everything from logical properties to the quirks of line-clamp and the promise of custom functions in CSS. Want to stay ahead? Dive into the survey, share your feedback, and don’t forget to check out Kevin Powell’s latest demos and newsletter. Whether you’re a seasoned dev or just starting out, your voice matters in making the web more awesome (and less frustrating) for everyone. **Links:** - [Take the State of CSS 2025 Survey](https://survey.devographics.com/en-US/survey/state-of-css/2025?source=kevin_powell) - [Piccalilli 2025 Survey](https://piccalil.li/blog/wed-love-to-know-your-thoughts-with-the-piccalilli-2 - Summary: 👉 https://survey.devographics.com/en-US/survey/state-of-css/2025?source=kevin_powell 👉 https://piccalil.li/blog/wed-love-to-know-your-thoughts-with-the-piccalilli-2025-survey/ #css ✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter 💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK ⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co 🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/) 🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/ --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell 💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join --- 🧑‍💻 My editor: VS Code - https://code.visualstudio.com/ 🌈 My theme: One Dark Pro Var Night 🔤 My font: Cascadia Code --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel: Bluesky: https://bsky.app/profile/kevinpowell.co Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome! - URL: https://www.youtube.com/watch?v=r7m3Ka2LmPM Heat. Heat. [Music] Hey, hey, Hey. Hey. Hey. [Music] [Music] [Music] [Music] I'm [Music] glow. [Music] I'm down. [Music] Feel [Music] [Music] down. [Music] Down. [Music] Let me show you. I feel [Music] [Music] Heat. Heat. [Music] [Music] Hello, my friend and friends. Thank you for coming and hanging out with me today. Let me turn down the music. Do we want music? Do we want to mute the music? Let me know. Um what you think and let me know how the the audio is and everything. Thank you. Oh, I just knocked my mic there. Sorry about that. I'm not trolling anyone with any bootstrap. Oh, no. We are going to be doing the state of CSS survey, but we're going to be doing a few other things today as well too, just because I've gotten uh distracted with some other stuff. Um before we before we get into the state of CSS, I want to do a few other things. And for the state of CSS even, I think we're going to have some fun because just going through it is one thing, but if there's fun features along the way, I'm going to pause and do quick code pen demos and other stuff. So, we can dive into what some of the some of the features are and how some of these things work. Um, I think the music is subtle. It's really loud for me, actually. I'm going to turn it down on my end and then we'll we'll try and get it at a a good level for everyone who's listening as well. Um, except my audio controls have vanished. There it is. And then I think something like that. Some people saying no music. We'll see. The people there there's definitely we're just chilling right now. So there's nothing like super important going on. I know music can be distracting, but um Amit's here. Awesome. Thank you for joining us, Amit. Sasha's here as well. So Sasha is the one who who does the state of CSS survey. So thank you for coming and hanging out. Uh I think it'd be a prefers no music. Okay. Um, both Sasha and Amit and potentially other people that are here were part of the or were at CSS day. Um, and did stuff with CSS day and I'm really jealous. Uh, though at least nobody's talking about it anymore on Blue Sky, so I don't feel like I'm missing out. Uh, and I'm probably going to be there next year so I'm looking forward uh to being back at that and not having major FOMO the entire time it's going on. Um, but yeah, thank thank you everybody for being here. I'm on both Twitch and YouTube, so whichever one you prefer, you can go on. Though, I will say we're getting close to a million subs on YouTube, but it's really slowed down. So, if you're watching and you haven't subscribed yet, you could always consider subscribing to sort of push us the way there. I figure my kids, it's it's for my kids, right? Think of the children. They want to brag to their friends that their dad has a million subs, so it's all for them. Um, we will have the combo chat will be on screen. I fixed it up. I might as well we'll jump right into things. Um, actually, you know what I'm going to do. Ah, I can't do both. It's okay. I'm not going to do it then. Uh, we're going to jump over to here. Look at that. I fixed up the stream since especially we're going to be doing less code anyway. Uh, we can have the combo chat on screen and it's for people watching the replay. It's probably good, too. Uh Sasha, you said to CSS to invite me for next year. Thank you. I appreciate that. Um yeah, after having been there once, I'm it I definitely uh want to go back. Uh all right. So, yeah, I said I got distracted by a few things. So, the first thing I got, this was this morning. Uh this was posted in my discord that CSS that CSS that Chrome is shipping this feature the future of hex this is hexagon shapes. So this is specifically this is on csstip.com/hexagon which I will put in the chat if anyone wants to play with it. You do need to be on a chromium browser that I think it's 139. Um, so this is I'm in Canary right now, so we're really like cutting edge on everything and I have it uh enabled and we're going to that's the blog post that got me into this. But this is hexagon shapes. But what the big thing here is the the corner shape is shipping. So I'm actually going to take off this weird border radius and we're just going to put like 40 pixels or something. Uh just so we get an interesting shape. And this is the the middle one. So the hexagon in the middle. We'll we'll turn off the alt one. Uh just cuz I want to look at this. This is cool. And live streams are a fun time to We have to hit run. Tammani enjoys having there's some people that like having these on where you have to hit run. So like check this out. You put 40 degrees, but you put bevel and it just makes like a bevel edge, but there's more options here. Uh I don't remember any of them. So I have the spec opened here, which is not ready for implementation. Um but uh what are the different options? We have round. Round is the default. We have scoop. Scoop is something people are going to be probably the most excited by. Uh cuz scoop does this scoop. And we have to hit run. Uh, and then we get the scoopy things like that. Just it just works. And the bigger your radius, the bigger they are. So, if I make that like 60, we can see that we get a bigger scoop. And it's it's pretty cool that it just works. Uh, this is doing it on all four sides. Obviously, you could do one side to get one corner cut out, which is pretty awesome. Uh, what were some of the other ones? We have bevel. We saw notch. Notch is I don't remember. Notch. What's a notch? probably like the the the weird other square. Yeah, there we go. So, we can notch into the corners. Uh, which is neat. And like all these things once this is normal. Like that's going to be so nice for a lot of stuff. Square. I don't know why we'd want to use it. If anyone knows, let me know. It just makes a regular square. Uh, and then we have squirle. Squir. Squir. Yeah, squirle. Right. I don't Is that how you say it? I've never said it out loud until today. squirle which is similar to round it but it keeps a bit more of the square shape so it's a squirle shape uh and you get something like that just to compare it again the default is round here and so this is coming I don't know where we're going to be at in terms like that's the default that you normally get and then the squirle gives you more of a bit more squared off but you still have round edges uh and then you have all of these are actually built using the super ellipse so super ellipse is sort of what the new thing is, but all of those are just shortcuts to specific values within the super ellipse. So, I think infinity, I can't remember. Infinity, which is a unit in CSS. Uh, I don't remember which one that is. I think that would work. Oh, we have to hit run. I keep forgetting. Uh, infinity gives us something. That gives us the regular one. And then the negative infinity gives us something else, too. I don't remember. Uh, that's probably a square. Is that square or is this just broken now? Maybe I just broke it with the infinite. Is it infinite or infinity? I don't remember. It doesn't matter. I'm going to do a negative one instead. And we'll hopefully get a value. There we go. So negative 1 works, but you can do like a negative.5 and get something. I don't even know. I haven't played with this yet. It seems a little broken on that first one. So there you go. You can play with like how negative it is and get different values and other stuff. And I haven't been looking at the chat at all. I'm curious what people think of this. Um, but yeah, it's kind of neat. You can go positive as well. All the way up to one. So, like a 75, I guess. Let's see what that gives us. I don't even know. So, it's squirly, but less squir I don't know. Anyway, um, yeah, just to show you. Uh, I think this is this would be nice as something uh in the future to have. Let's go catch up on the chat. Um, hexagons are the best. They are. I should have worn my shirt. I have a hexagons are the best shirt. Um, what's going on? Not too much. Yeah, a lot of people Yeah, I'm curious what people will think about. Finally a way to make ticket looking designs. Definitely. Squirles have smooth curvature where round doesn't. Yeah. CSS tricks. Anyway, yeah. So, that's that's a just a quick fun thing that's right there that I want to look at. Another one that's coming that I'm really excited about. This one's more coming, I think, than the one I just looked at, though. This is shipping now in Chrome. Um, again, this is in Canary right now, but I think it's intent to ship is with uh 139. I don't know what version we're currently at. Um, but 139 has intent to ship in Chrome, but I don't think anyone else I don't know if it's on the radar for anyone else. This one, this is a demo, and I'll put this in the chat as well. This is a demo by the Edge team, and it will work in all Chromium browsers. This is also 139. Look at that. Uh, for some reason I think they're saying, "Oh, you have to have experimental web features on for this one to work as well." Um, but I think this one's closer to shipping and it's our gap decorations, which is so cool. And this playground's really nice. Uh, so you have like you can set your gap like you would with a grid or flexbox or multi call. So, whatever. Your gap is the normal thing, but then you can set the decorations in there. Uh, and there's offsets. So, you can see how like this one here is moving a little bit. It's better with the column offsets. You that's the width. You can see like you can offset the column rules which is really really interesting. Uh you can choose how it's breaking. So going down the columns. Let's change this one. Going down the columns. Oh, here this one. This one's like hitting something. So I can actually say that it's uh spanning no span. So it goes like underneath everything. You can say that it stops at every intersection. So it doesn't go where the gaps intersect. Or you can only have it stop if there's other items and it would intersect another item. So it's pretty cool. Uh and you can choose the paint order. So you can put are the columns going on top of the rows. Let's make this one dotted or dashed just for fun and make it a little bigger. Um so yeah, you can see like right now the orange is on top of the blue and I could switch that and make it go the other way. Um, is there anything else? That's just the size. That's the offsets. Anyway, I think it's pretty awesome and I'm happy we're getting this. Uh, you don't need weird pseudo elements or borders on stuff. It's going to be really, really nice. Uh, Ragnar. Yeah, the not ready to ship and then Chrome shipping it is definitely a thing. Um, Chrome is in my opinion jumping the gun on shipping things a little bit. Um, but it is what it is. Um, somebody asking what website this is. So, you can get I put this one in there. It has a bunch of demos and then this link here is the playground I was just on. So, it is that should be in the chat. If it's if my stuff's not showing up in the chat, let me know. Um, oh yeah, I've seen people do that too. Uh, using extra rows or columns just to put like empty elements essentially to decorate them. Uh, so yeah, it'd be super nice that this is coming. Um, another thing, last thing before we start getting into surveys, and we're not going to start with the state of CSS. Sasha, I'm sorry if you're if you can't stay long, but I wanted to talk about this because this is really cool. Uh this was something this was asked on blue sky by someone and I don't have the original thread open. So if whoever asked it I do apologize I don't have your name. Um but it's this idea they asked let me just turn off do we need anything here? I'm going to turn off all the CSS but this is let's see if I can. I don't know if I can properly. I can't because of the comments in here. Okay. Uh let's just delete all the comments that are in here. This is a pen a code pen by Stephanie Eckles. Um, but we had a few contributors to this. So, I'm going to turn off everything to start with where say you have a figure. So, here we have a figure with a fig caption in it. And the person was asking about having the width of the text in the fig the the fig caption be determined by the size of the image. So, like the image is setting the size of the figure instead of the fig caption. And how can we do that? And I came up with one suggestion that was like so so uh and I'm not going to say it because it's really not the greatest. And assuming like usually we want to have the max width of 100% on there. And let's go on our figure and just give this a back a border border of 10 pixels solid so we can see it. And we'll move that outside the comment. Uh so we can see like it's the fig cap. Well, it's just it's a block level element so it's getting as big as it needs to be. And if we have the text in there, it's always wants to be as big as it wants. And that's where it was. I think it was Tammani uh that suggested Tammani Aif who suggested using an inline size. No, this the contain inline size on the fig caption. And this is so good cuz what this does is it basically means that the fig caption isn't Why isn't that updating? Oh, cuz I also need to change the size of this. So, we're also going to say that the figure has an inline size of fit content. Um, he said the original one was to do a display of inline here cuz that would also uh inline block I should say, I think was the correct solution. Yeah, inline block worked. Uh, and that was awesome. So, now it's the image is actually dictating the size cuz a contain inline size means the content of this isn't determining the size. it's a container and with it being a container, it has to throw that out the window. It can't let the content decide how big it is anymore, which is really cool. Uh, and he did the display inline block and then Stephanie Eckles stepped that up to do an inline size of fit content cuz then you can still use margin auto if you want to to center something. Uh, and I just thought that was like such a cool thing because when I was trying to think of a solution, I was like, well, how can we say that this without doing a position absolute on something, how can we say that this element should live here but not contribute to the size and by doing a contain inline size, that's exactly what happens. And I just couldn't think of that at the time. So, uh, and I do want to make sure I'm crediting the right person here. So, let's refresh this. Uh, was it? Yeah, it was Tammani who suggested that first, um, the first part of the solution. And I just think really really cool. I can figure caption. It's a good use case, but there's other I think other ones as well. I'll put this code pen in the chat as well. You could probably do it with anchoring as well, but I think this is just I don't see why we'd need to. I think this works really really well. Um, so yeah, super happy and I I this is one of those things that I'm so happy I know now cuz I think there'll be other situations where I'll definitely run into situations where I could use that. Awesome. max inline size value work uh for so the max you could set a max size on the fig caption but if you want the image to decide how big things are and you don't want to actually set an a width on your image you know setting a max size here could work but the part of it was like width images of varying sizes so the image is really what should be deciding on uh what we Um, oh, one second. Veil, I think I missed part of what you said. So, excited to excite. Oh, to see what I think of their plans for their survey. Yeah, we're jumping there now. Okay. And yeah, your article was really good, by the way. Um, awesome. Let's jump into Piccolilly survey. So, we're starting here. The link for this is in the description. I know we're going to get to the state of CSS. Um, but this just came up this morning. I saw that Andy had posted it and I want to dive into it cuz they're doing a survey as well, more geared towards education than features. And I want everyone here to do it. And it says 2 to 10 minutes. Uh, so I if there's lots of opinions, I'm not going to do everything because I anything that's opinionated, I don't want to do live because I don't mind sharing my opinions, but I don't want people to influence this. I don't want to influence people's responses. Talking is hard. Uh, I just also realized I forgot to get myself a glass of water before we started. Um, so here is, let's jump into this. Zoom in a little bit so we can actually see what we're doing. Piccoly 2025 survey. We always want to improve how we do things at Piccoly. So, here's a short survey to get your allimp important opinions on how we're doing. What sort of content what sort of content that we post on Picilly do you like? Uh, so yeah, I I don't mind answering these. These are my own opinions and I think other I won't influence anyone. I reality check is like my favorite series they do. So, I'll definitely check that. Um, open working projects is really really awesome as well. Detailed guides, I mean everything is good, right? I specific techni I don't for me I don't need this just because I you know I feel like I I mean it's good but select as many as you like techniques such as progressive enhancement. Yeah, there hasn't been a challenges club post in a while. I'm just checking everything. I'm sorry, Andy, that's not very useful. What sort of content do we post you dislike? Well, I can't. I I said I liked everything, so I guess nothing there. What courses do you wish we would publish? Ooh, that's a good one. Author recommendations. No. Um, I have I have my own courses, so um I'm going to have to think about that one. I'll come back to that. Uh, complete CSS is a good one. I'm I'd like I'm looking forward to the JavaScript course that they have coming out, too. Uh, and they have a design one, too. Uh, but the JavaScript one I'm more excited for. An awkward question when you didn't know the site. Ragnar, you're behind if you don't know about Piccoly. Piccolule is a fantastic resource for front of the front end stuff. Uh, if we explored short focused cheaper course, would you be interested? Maybe. Um, I'm going to skip that one for now as well. I have to think about it. In your opinion, the index newsletter is I forget how often it goes out. It's multiple times, right? Twice a week. Okay. Um I like weekly. I'm going to say too frequent just because I like weekly, but there is like a fair amount. If you don't know about it, subscribe as well. Um if we go is they are short. Like can we see one of them? There's an Oh, browse the archive. There we go. So like they are short where it's just like a recap of stuff which I like for me because of why I use it. I'd prefer once a week just so I could get it all at once. But that yeah that's my opinion. So we're getting too frequent. Uh is subtle cuz I haven't really noticed it too much to be honest. So, uh, if Piccolo were explore more tasteful advertising options, that would be by tasteful advertising, we mean the odd in article banner for internal stuff like courses, open collective, and possibly merch. Fine if it's minimal. That doesn't bother me. Uh, I noticed that in Hayden put out a thing on accessible Rick Rolling and there was a thing for his font in the post. I I find if you're advertising your own things, it's much less intrusive than just like the iframe banner ads and other stuff that are inserted into posts. Should pull explore more merchandise? We're thinking t-shirt stickers. I mean, I like stickers, so I'm going to say yes. I will say that if it's any of my own from my own experience, um it might not be a very prop profitable venture, but I will we will plug if you if you want something. I I do have merch. There should be links down below. You can support Grid. I know people want a Flexbox shirt, too, so eventually we'll get one. Um, but uh there's three shirts, there's a hat, maybe there's there's sweaters and everything else. But yeah, go go go and buy some merch so that I can afford to make a flexbox shirt. Um, but I do like merch, so I'll say that they should they should have it. But if Andy's watching this, you might want to just think about it a little bit. Though, like if you look at like the syntax people, they're just basically like a dev style. What's it called? I can't think of the right word now, but like I'm sure they make pretty good money off their merch. Uh, what are your thoughts on our new open working project efforts? So, if you don't know about this, they're sharing like actual work they're doing step by step in public basically as they go through it. So, I think it's pretty cool. Uh, I like um Yeah, I think it's cool. We've been considering working on a Piccolo job board. Does that sound good? Um, I'm going to put other cuz it doesn't if I don't actually I'm going to not answer and see what happens. Uh, I have to go back up to finish some things here. But for me, it doesn't really change anything for me. So, um, I have been reading it since I don't know. I years, but I don't know. I probably wasn't in 2018. Has it been around since 2018? One, two, three, four, five, six, seven, eight. Did Andy start Piccoly the same time I started my YouTube channel? I When did I start? It must have been 2018. I have to check now. I think it was 2018 when I started, which is crazy. Um, I don't know when I started reading. I'm just going to say 2021, but I that's like a random guess. What best describes your job role [Music] chat? What's my job role? Veil. Short courses would be interesting. I do. There's a benefit to short courses and I think they can be really good, but I'm also like I'm always torn just cuz like I maybe I'm also thinking myself is like whenever I'm thinking I did think about doing lots of smaller courses at one point instead of a bigger one. Um, but it's one of those things where like I could I'm just like I could do like one one hour video and maybe cover a lot of what would be in the course. So, I'm never sure. I see somebody saying all of the above. I'm definitely not all of the above. I do some of this stuff though, but I definitely don't do all of it because backend is not me. Um, there's no there's no teacher in here. Everyone's saying teacher. There's no teacher. Um, what is content designer? I don't even know what that role is. Matias is here. Nice. Thank you for coming and joining. Other comments. Okay, we'll come back. If anybody has opinions on what I could put here for my job. I I hate answering anything. Professional enthusiast. Yeah, that's basically what I am who just people started listening to his YouTube videos. Um, I need to I What's my job from this list? I design content. I guess I don't know what what is a What is a content designer? Content designer is a creative professional who focuses on user experience. Isn't that a UX designer? By crafting clear, concise, and engaging content across I guess that's me. and updating content at the very every stage of the users's journey ensuring user friendly um writing design research helping users achieve the I guess it's not quite I think what I do I'm you know I'm content creator more than designer this is more for like that type of stuff but for like userf facing things and not teaching or or content YouTube content I think maybe Yeah. When does a cardicle or video become a course? It is a super tricky question. Um, all right. I'm going to come back to finish this and actually hit submit. What camera am I using to stream? It is a Sony something. It's I I'll let you know from all my experience of having a couple of DSLR cameras for streaming purposes. The lens is a thousand times more important than the camera itself. Um, I would I would advocate if anybody's interested in having a high-end camera to do streaming or video or anything cheap and you have to decide like you have a fixed budget, put as much of the budget as you can towards the lens. Um, just cuz that has such a huge impact there. You know, don't go too cheap on the camera, but um, it has a huge impact on things. All right. Yeah, I think my lens is double the price of the camera and it wasn't Neither one was cheap. I don't remember anymore, though. I also don't know what lens I have, so printed developer is probably the closest. You're right. Def. I mean, I would definitely say that. It says as many as you want. I I mean, technically, I market stuff. I do project owner manager. I don't know. I might just leave front end developer. We'll see. I'll come back and and finish the ones I didn't answer in there, but we're going to come into the state of CSS, which is what we're we're here for today. Um, I'm hoping last time I did it, I think I knew every feature that was in it, and I'm hoping I know all of them this time, too. All right, let's jump in. There was only one item on my CSS wish list for 2025, a slower pace. Oh, that that resonates even for me who only does CSS all the time. Uh, speaking of squirles and what is it? Uh, the the the squirles and our gaps, which every time I see one of these things, I'm like, "Yes, another CSS feature." And then even for me, I'm like, "Okay, there's a lot happening right now. Maybe we do need to slow it down a bit." Um but um after years of rapid innovation, now feels like the right time for browser vendors to take a beat to consolidate fix browser inconsistency inconsistent in inconsistencies and let the rest of us catch up. After all, we might uh we might have heard about subgrid has scroll driven animations and all the other recent CSS improvements, but how many of us can say that we've actually used all of these features, let alone let alone mastered them? Uh, this is why this Okay. Ah, did I close it? So, scroll driven animations are pretty cool. There is a draft right now that I was looking at. Um, it was posted in the frontend horse discord for mouse position animation, mouse position driven animations. Uh this is there's no implementations or anything. I think it's like super super like even in the spec for it. It again it's a draft like there's no examples and like there's all it needs a lot of work still. But yeah that not having to just do that thing in JavaScript or you're getting the X and Y with the offsets and everything. You just in the spec it says like you pick your element and then you pick like what you want to the rel what element the position is relative to and that will work sort of like a scroll driven animation. That would be pretty awesome. Anyway, sorry for the talking about new features coming. Uh this is why this year's survey will be so interesting. It'll be a chance to see which of the past few years new CSS additions have already been adopted by the community and which ones are still on our to-do list. So once again, please join me for this year's state of CSS. Look at that. Just by starting, we're at 2% complete. We've done something. Uh, welcome to the survey. This first part is about sharing your experience with various CSS features. Never heard of it. It's your first time seeing it. Or if you've or you've heard about it, but you have no idea what it does. You've heard about it, but you haven't used it, or you've used it at least once, even if it was just to play around. I'm hoping most things in this I I get to that on it. Uh, by the way, if you want to tell us more about any of our choices, you can hit the comment icon. Subgrid, I've used it with a mostly positive experience. Um, what does So, yeah, this is one thing I did want to mention. The reading lists. The reading list is awesome because if you add something to your reading list, uh, at the end of the survey, it gives you a list of all the things you added. And if it's like previous years, it also has links to resources on that so you can actually learn about that thing. Um, sub grid I know enough about. I've did a whole month of Subrid videos. So, um, I will say I've used it and it was a mostly positive experience. There's Subrid with Rose is kind of annoying, but yeah, it works. Writing modes. I've used it. I don't think we need demos for any of these. If there if I'm going through these and there's anything you're like, I haven't heard of it or I've heard it but I don't know why I'd care about that or you've never heard of it and you want to see what it is. Just say in the chat like let's let's explore that cuz I do want to do demos for some of these logical properties. So I've used it positive experience. The one thing I will say it's a little bit annoying is when you start doing like border inline start left. Is that even correct? I think it is right. Like if you want a border on like one corner uh or one side or a border radius on one side of the logical property, it's very verbose. And margins, okay, width, height, I'm now used to block size and line size. Margins, padding, borders. I'm used to doing it with those. Uh borders, I'm not margins, padding. I am borders. I still find my default goes to left, right, top, bottom. I'm trying to think if there's any others. border radius. I definitely use just the top, bottom, left, right or whatever you I I just use the short hand anyway for the border. Um, and actually there is should we find it? It wouldn't be with border radius anyway. It's always the problem with the short hands. We need a way with the short hands to make the shortand work in a logical way. That's the issue with them. Aspect ratio, we've used it. How do I know this CSS work in what level? Uh the easiest way to know about browser support of anything. So let's say you want to you've used subgrid, you want to use it, you go to can I use.com and you write in the feature subrid and then you'll see where it's at. So we're at 90% support and it's baseline newly available which means it's in every browser engine but it's been less than 30 months question. Is it 30? Uh let's just get a quick update on baseline. Yeah, 30 months. There we go. Uh so when something has been available for 30 months in every browser engine, then it will change from newly available to widely available. Um yeah, that's a good general thing just so you if you look at 90% and you feel like, oh, that's really low. If you look up flex, it's at 97, like 96 and a half. So like you look up float I think is even lower just because the way can I use works like float 94.7 it's higher than that clearly right oh that's not even the right one here float 95.6 six um for the CSS property. So if you do look something up, make sure you find what you're actually looking for. Um but yeah, just anything above like 92% I feel is pretty safe these days. And if you're if just cuz nothing it can't hit 100% with the way can I use works. So yeah, it's a good question though. Uh logical properties we did aspect ratio definitely have used it. Positive experience it's fantastic. There are a few annoying times where it doesn't work. Um, I don't remember them off the top of my head right now, but when you Yeah, I don't remember them off the top of my head, but when you Whatever. I'm not going to get into it cuz I can't think of them. Guess this is a This just hit baseline. Actually, speaking of that, um, I'm going to have to open it on my phone to get it. There's now RSS feeds for uh baseline for both newly available and widely supported. And I think it was today or yesterday in the RSS feed for widely available the these all these different viewport units of um they need a mostly posit like it's I'm going to put a comment on this one. Leave a comment. Uh, the dynamic dynamic ones aren't as useful as I thought they would be since it's since it only recalculates once scrolling has stopped and can cause page content jumps. other otherwise otherwise I'm happy we have these. There we go. Media query range context is the greatest thing in the world. So definitely a positive experience. Um though when I try and use it like this I just get confused. So this is if the width is larger than 400 but smaller than a th00and it makes sense but every time I try and write this I just can never get it to work. But if you just do with greater than or less than or greater and equal to or greater than and equal to or less than whatever um it works out really well. Anna, you're not Anna, thank you for joining. You're not a fan of logical properties. They're very illogical to use and they don't really solve the problem they claim to solve. Changing layout may mean changing transforms. Yeah, that is true. And I do know we have to be a little bit careful doing it as like a blanket statement cuz like I was doing something that was a split thing, right? So like my layout was completely split down the middle and then I had the content sort of grouped together. And I think it was the padding I was setting just had to be a padding, right? because if I did it as a logical property, you would lose the padding on the wrong side when the writing direction changed. And so it's one of those things like if you are using logical properties, make sure to test it uh to make sure it's everywhere cuz there are times where you'll still want the regular one. Um I will say a lot I I know a lot of people who have you do multilingual and are happy with them. So but if there are other complaints for them, I'd like to know what they are. Um, anchor positioning. I've used it again. This is anchor positioning is fantastic. Does grid count as a logical prop? The track direction changes with the reading direction, too. I don't think it counts. It just happens that it works. Um, with anchor positioning, it's one of those things that the basic things, it just makes life so much easier. But I've definitely heard complaints of people that sort of are doing a bit more advanced stuff with it, and I haven't got to those yet. So, I haven't run into those issues, but they've been explained to me, and I'm like, "Oh, yeah, I get that." And I could see how that's a bit annoying. Um, and Safari just shipped anchor positioning, I believe, and the only there was a feature missing in what they shipped, which makes it more useful. So, it sucks though, um, that it's not fully there. The other problem with anchor positioning was Chrome talking about them releasing features too early. Uh they shipped anchor positioning and then the naming of everything changed after. So that was fun cuz I was following demos to get things to work. Uh and it, you know, I was on the Google Chrome developer blog to find out why what I was doing wasn't working. And then the blog post everything I was like, okay, I'm doing it correctly. And then I found something else is and I'm like, wait, why is that called that? And then I tried it and it worked and I'm like, "Oh, they changed the naming of everything. Fantastic." Um, yeah, I've run into issues with position try, but I've managed to fix everything I was doing, but again, I haven't run into any complicated things. Veil, yeah, thanks for for jumping in. Um, definitely I'll be streaming next week as well on Thursday. Probably around the same time though. I do apologize if it's late at night. This time just works really well for me. Uh, but I think next Thursday I'm going to be streaming again doing just playing with modern CSS stuff. Uh, cuz I like doing that. So, I'm probably actually just going to be playing a lot with this and building something that uses it. Oh, my dog's going to go bark. Give me one second. I'm going to go get her. Uh oh. Maybe we're okay. Oh, I hear someone saying they haven't heard of anchor name before. So, we're going to make a demo. It's demo time. We finally found something uh to build. Cool. This is I don't know if I should build um Sorry, I'm just trying to find the state of. So, let's do pen new. If you don't know about penne, it's the best UR the my URL that I use the most. Uh let's do an HTML color scheme of dark. So we're not having a bright thing there. And let's say we have do we do it with like a modal or do we just we might um No, we'll do it with something that doesn't disappear. So if the page refreshes we're okay. Um but normally you would do this with something else than what I'm going to do here. We're just going to do a paragraph with some Lauram in here. And in the middle of the Lauram we're going to put a span here. Again, this is like very silly demo. Please don't use Well, maybe you could find a use case like this. But I don't think this is the intended uh the intended use case at all. Uh font size, font size, line height, line height, phone points. I wish there was like a def I could do a new blank code pen that had a my own reset applied to it automatically. I know you can import URLs to use things but like just having this uh line height and let's just say font family system UI uh so the span let's make our span have a color of red so we can see it and let's just come and make another element down here uh we'll do a what type of element should we put down here I don't want to put a let's give this a class then we'll call this one anchor just to make it a bit more clear that it's an anchor dot anchor. I'm going to call it color red. And we're also going to do a border five pixels dashed around it as well. Like that. So we can see it really well. Uh I think we're all we'll do yellow. Just going to make something really ugly here. Okay. Um then we're going to Yeah, I need another element. So we're going to do a span here of um a thing. So we have something a thing. No, that's just a span. We need a class on there. Class equals example. So example, we'll get a background. Oh, we'll do another fun CSS thing not enough people know about. We'll do a background of canvas text and we'll do a color of canvas. Look at that. So canvas is the default background color from your browser. and canvas text is the default text color coming from the browser. Technically, they're camelc case and like this uh if you really want to use them. We also we could we could use that. Whereas instead of yellow and red, I think it's link text maybe. Oh, it is link text. And we get the blue there. And there's other ones too. I don't remember any of the other ones though. So, we're just going to leave those ones like that. Uh so, on our anchor here, we can't read the text, but we can see it with our yellow border. So, it's all good. I'm going to say this has an anchor name ofam. Uh, let's just do test. And it's something we're naming oursel. So, it gets the double hyphen in front of it. Cuz now in CSS, anything you name yourself gets a double hyphen. It's not a custom property. It is an anchor name. And then here I can say position anchor is my test. And it knows if I use positioning, we probably want it to be there. So we can do a position of absolute and then I can say that the top is my anchor bottom and it will go to the bottom of the anchor even though this is not in they're not siblings or related to each other in any way. Uh and it just works and then we can say that the left side is my anchor right and it will go to the right of the right the left of it is to the right there. And even better than this is the one I can never remember. Position area. I don't know. See, I don't use it often enough. Is it position area? Center bottom. Is it position area? It is. Look at that. It's just centered to that like that. And it it just works. And then let's do let's do right center instead because we'll see a problem that can come up where it's on the right side. But that does mean we can sort of like run out of room and cause overflows. So we can then do a position is it try fallbacks fall back or fall backs. We'll try fall back of flip inline. I'm guessing right now it's not flip in line because that would work. Uh position try position try. Just give me an example. Dashed in. I just want an example. Position. We We've done all this. Oh yeah, you can also do the align self stuff. Anchor center. That would also work. Um, position area position. Oh, it is fall backs. They're doing that with the named ones, but you don't need the named ones. The named ones are more annoying to work with, but they do work. Uh, fall backs, which makes sense cuz you can have multiple fallbacks. There is a way to flip it on like specific axes. You can provide fallbacks as well. If anyone knows what I'm doing wrong, let me know. Um, I have Yeah, Matias, I have um some, but the problem with the the the templates in CodePen, not that there's one, but you have to go like go to code pen, then go to here, then go to templates, and then you choose one of your templates. Where's my Oh, I'm not I'm logged in. bookmarked. I don't have it personal. There we go. So, I like I have a bunch of templates. Um but like I just like pen new and making a code pen. There's so many steps to get to the template, right? It's really lazy of me, but um position try fallbacks flip inline. Is it a single word? Oh, it is. There we go. So, you can see it actually it's flipping on the inline axis when it So, here it's on this side. And then when we get to here, like there's room, so it's going here. And then if we run out of room, oh, there we go. As soon as it would cause overflow instead of causing overflow, it's jumping to the other side. And you can add margins and stuff and everything works. Um, so yeah, I don't know why it's flipping when we're here. So this is where it's maybe not, you know, I'm also doing a really strange example right now. Um, but this is just so nice that it works. I love it. So yeah, it it solves such a painoint that I'm very happy that we have it. So positive experience. Container size queries. I've definitely used them and had a positive experience. The only annoying thing with them, if anybody has used them, is that we can't query an element itself. You have to query the container. So sometimes you have like an extra layer to to create around something to create containers. But I find the more I'm using them, the more I'm not running into that. Or maybe I'm just used to it. But now that I've also found better ways of using container queries, um, it's working better, too. Can we animate the values for flipping stuff? I don't think we can animate them. We could find out, but I don't think any of this is animatable. Uh where's the I guess because I'm zoomed in I I don't have uh animatable anchor position animatable properties. No, I don't want that. I wanted the animatable properties in here. Animatable. They have like the whole not the specification. They always have the table. Maybe they don't have it here. They usually have a table. which I don't see. Oh, position try maybe is what I wanted instead of the position try fallbacks. But if I go specifically to position this Reddit ad on MDM, I get why MDM has ads. Whatever. That doesn't bother me. The the the Reddit one drives me nuts cuz I always feel like there's an error or something going on. Um but let's see if we have it here. Here is the different things I was trying. It is just hyphenated. You can do all sorts of different stuff. It's really really cool. Um, but can I don't think it'd be animatable. I'll be very Here it is. Uh, yeah, it's a discrete animation, which means you can't animate it basically. Well, we have a No. Yeah, you can't uh sadly, but I can I understand why that is. Uh, back to the survey. Yeah. So, container queries, super happy we have them. Style queries are amazing. Super happy that we have style queries. So very happy about that. Um, does anyone not know what style queries are by the way? Oh, view transitions. Would view transitions work? I don't think so. in this case and I don't think the view transition API would be able to work for something like that. I could be wrong, but I don't think so. The has style query thing I haven't found a use case for. Um, style queries apply styles conditionally. Oh, sort of. Yeah, some people don't know. Okay, we'll do a quick demo for this one, too. Uh, actually I'm going to use Let's go to my code pen. Let's just go to code pen because I think I did something recently. Ah, I was recording. I have a video coming out on them. So, I just they're very recent. Um, this is probably the better. This is the best example. So, we're going to use this one preview of my video coming out. I've actually used this in a talk. So, you can watch the full talk. This was my smashing talk. Uh, and I also used it in another video at one point. Um, it's a bit too complicated actually. We'll use this one. That other one will be a preview of things to come. So, basically, if I could do I I've created these things which are just like sc overflow scrollers. Um, but what you want is when you're at like you don't want them to be overflowing here. You only want them to overflow at smaller sizes. So, I can conditionally do that with a container. And then you do a style. And the style can only look for custom properties. The spec says it should look for anything, but no browser's implemented that yet. Uh, and I'm actually doing two things where I'm combining my style query with a viewport query. Um, but it just means like this one's always scrolling whereas this one's then at smaller sizes. It's doing this. Um, and you just, you know, I can just turn on or off this. But where it gets really there, it feels when you first start using them, it feels like you just use modifier classes instead of using the style query. Um, but where it becomes more powerful is when you start modifying things. I'll I'll show this example, but I'm not going to deep dive it. But I'm saying when my container size becomes a certain size. So a regular at container size query which is like a media query. Uh I can change the custom properties that I'm looking for in there. Cuz right now this here it's the same idea. I have a sidescroller and a sidescroller. They're the exact same thing in both both of them. But when we get to larger screen sizes, when this goes vertical, not only is it going vertical, but now my scrolling has changed this way. And this one, the scrolling has just turned off because we have enough space. And I've also changed the layout of my cards when I came to here. So this is what's changing the direction of the overflow. And this is changing that. So you can basically like having modifier classes that you can change e in other situations um based on available space or other things that could be happening. It's really really cool. There's other use cases too, but I find this is the type of use case I'm finding the most useful that I've been playing with them. Um, container queries on both size and checking for layout, portrait, landscape are very useful for landscape mode on phones that's extremely short and be covered by regular inline size. Yeah, Ragnar, does this show why it's useful with custom props? And this is what I would say too is I don't the custom props I'm doing style queries for like where's my style queries? uh here where I'm like changing the direction this style like I'm not looking for a custom property I'm using somewhere else like I'm not looking for what my background color is and you could definitely do that and there's good use cases for that too potentially but for me the real power of it is like the only way I'm using this custom property is for the style query and I'm not using it for other things as well it's also useful for theming actually uh did I make this is another demo let's go back. Um, do I have it here? Where is it? Is it cuz it's a Oh, it's this one maybe. I think so. Um, just being able to do this. This is another video I have coming up. Um, just with your color theming and stuff. If you were doing it with your prefers color scheme and you want to do it through something else, it used to be that you had to duplicate all the custom properties. Now I'm not duplicating the custom properties. I'm doing something like this instead where they're getting set here and I'm just switching the theme through those other ones. So that makes it a little bit easier. Um so yeah, the theme's getting controlled by this instead of having to have classes that are controlling everything. Well, okay, let's go back. Ragnar saying he doesn't know why we'd want a layer of abstraction, but how else? One second. Let's go back to this example. How else would I make that switch? Like you just want to throw the component in there and have it work, right? Like to me, that's the beauty of this is like I'm going on I don't find there's a layer of abstraction going on. Like I'm saying in this situation, my overflow grid direction is switching to row. I don't know. I I find this super useful. And then I have my one component that just wherever I'm putting it, it works. And if I need to toggle or switch things, those things just work as well. Uh, I really like it. Anna, you've used style queries to set different pseudo content values depending on a computed modulo value. Sounds like something you would do. Yeah, that that is the one thing with it again though is you are having to have something set on the parent that's coming into the child. Um, which we're not at yet obviously. loop. You wish you could get your golden play buttons. I could get my I appreciate that. Thank you. If anyone hasn't yet subscribed, please do subscribe. We'll get there faster, right? Um but yeah, I I have three style query videos coming out. We'll go much more in depth. Maybe those videos will convince you. Um Ragnar size, yes, amazing. Uh calc size I absolutely love. I have I have something here. So, I'm not going to calcize calc size is a little bit less useful than what I thought it was going to be. But basic Oh, that's my starting example three. Is this one finished? There we go. So, like something like this where we're animating the size of it. Does this open? No. The JavaScript's doing nothing. Okay. Um, let's go find it. So, my calc size is Oh, no. That's not my calc Where's the calc size? Did I not do one? Here it is. It looks weird cuz you have to include a size here. Um, but grow the size of by the amount of the icon. So, I have the size of the icon is set as a custom property just to make my life easier. And then I'm saying I want to look at the default size, the auto size of my element. So, it's the size. So, auto is what we're computing based off of. So, this size keyword is looking at auto because you can actually have this based on like min content, max content, fit content. Uh maybe not fit content, I'm not sure. Um but auto. So the size is looking at that and we're just doing plus the size of my icon offset and it becomes animatable. So you can animate things to and from size auto. Uh not the best. I actually I kind of like this example um for for things like this. And my icon is just using position absolute. So it's positioned out there and then we're doing it. You could also probably do it the other way around where the auto size includes the button and then you shrink by the right amount as well. that would also work. Um, but yeah, animating with size auto, which is great. Uh, state of CSS survey. So, yeah, that one's fantastic. I'm surprised here it doesn't mention the other one. Um, oh, what are your top CSS pain points related to layout? Uh, I am going to I don't want to put too many opinionated things in here, but I am going to put um would would really like and in this week's podcast I talked about this. If you didn't know, I have a podcast. It's not linked down below, but just look up general musings by Kevin Powell and you'll find it. It's my second YouTube channel. Uh I talk about at custom media or custom env custom environment variables for uh named break points. I would really like that a lot. Um the one the one thing with just jumping back. Oh, I closed it. The one thing with the calc size uh a lot of the time you don't calcize is only only use calc size to do animations if you want to do a calculation based on auto intrinsic sizes. That's the word I was looking for. So if you have like an and it doesn't have to be animated even you could just say like I need the side like the width of this to be my uh my auto size plus 2m for some reason like it just if you need a cal like you want to use calc but you want to use an intrinsic size like min content max content or fit content I guess fit content let's check I don't know if fit content works pen new span hello world um span width. Uh let's give it a background so we can see it. Background I should use a div or we'll just do a paragraph. Uh just so we can add padding to it and margins. Background is going to be steel blue color white and then so like width fit content if you don't know about fit content it will match that. Let's do padding to rem just to make it bigger. Uh, so it'll match the element, but it allows for word wrap to happen. So let's just see. Can we do a calc based on that? I'm not sure. Um, whoops. Calc size fit content size plus 2. Does that work? Oh, it does. And it wraps, but it causes overflow in a strange way like you'd sort of expect cuz this So it's kind of weird, I guess. I don't know where you might want to use that, but it works. Um, and if we did a min content here, so min content if we take off this is as small as it can possibly get. So you can say min content plus 2 ram or whatever and then be 2 ram bigger than the minimum size or you can do a max content which is like fit content but you never have word wrapping on. So if you know hello world, how are you doing today? It will always be a full line. Um, yeah, you get that. So, where this could potentially be useful, I think, is actually on heights more cuz you might want a height of calc size um min content cuz that's or we can even do auto. Auto works here too. So, which is basically min content I think. Uh, so then size plus I don't know 20 viewport block or something. I'm not sure if that's really the best, but um you know the height of it will be the auto height. So if you add more content BR uh more text here, BR, don't use BRs for this. Lauram 100. It's like it's always going to have that extra space under it. Oh, we have to take this off. So it always have that extra space of 20 extra viewport plus the content that was already there. And then could we do this? Um, align content center. Ah, yeah. Nice. So, you can do a line content on block level elements now. Uh, so yeah, I I could potentially see this being useful. And you could even probably put that inside a clamp. So, it would never like say we did this. I don't know if you'd want to clamp the whole thing. You could use a min or a clamp or something here too just to make sure that like it fits within a space. I don't know. We'd have to play with that more, but it can be useful. Um, does anyone else was there is there any other pain points for that's my main one, so I'm going to stick with that. I might come back after um and do more, but it's saving my progress along the way. You have a property like that called padding. Yeah. Well, the advantage Yeah. Okay. This isn't the best use case then. Thank you, Ragnar, for pointing that out. It's still kind of cool that it works, but you could just do padding with a clamp or a min and that would work as well. You're right. I'm sure there's a use case for wanting to use height. You can also do size two. Yeah, you can do anything that you could do in a calc, you can do in a calc size, but you can do it with auto keywords. Um the order of CSS attributes does not matter for anything other than no even then this the order of CSS attributes never has any impact on anything there. Okay. How's this right? Well no I was going to give an example that wouldn't be a good one either. There are times where it's useful Ragnar. Well my button example that expanded I think is a better use case probably. Um, blend modes. I have definitely used them. An isolations list. I bet you people are going to get to here and be like, "Yep, yep. What's isolation? Isolation basically is a way to create a new stacking context with no other purpose. It doesn't have any other side effects. Like if you do a position relative and then you have to add a Z index or if you lower the opacity to 0.99, like all of those have side effects. So, isolation doesn't have a side effect. The reason isolation was created was to help with the blend mode things um especially mix blend mode to prevent you from blending like having too many things blending with one another. Uh so you can sort of isolate the elements as the name implies that you want to blend. But because it's something that creates a new stacking context with no other side effects, I use it all the time just to create a stacking context. Yeah, it it's fantastic. It It's such a nice property. Um I'm so happy we have it. Um all right, that one's good. Backdrop filter. Used it my video that came out yesterday. Um I've had a positive experience. I don't know any issues I've had with back. I mean, the big problem with it is I guess you can if you're animating a lot with backdrop filter, um, some CPUs start going a little crazy or fans on the computers do. Anna, blend with parent with transparent parts, but avoid blending with backdrop behind parent. Yeah. Um, it's for I don't use enough blend modes to actually use I I barely use blend modes, but people like Anna know how to use it properly. And the the actual use cases for it, they can be really really good. Um, my my main thing of using blend modes is in Photoshop where I would just sort of oh, I want to play around with these different blend modes and do something cool. Alan Alan M777. Yes, this will be uh once I'm done, I hit stop and then the replay I think is immediately available. Maybe YouTube does some processing, but um it will be available after. The linear easing function is amazing. So, we're going to say I've used it. Uh I wouldn't want to ever create one myself. So, I'll put the link to this. We uh easing wizard.com. I think I spelled that right. Fantastic. So, if ever you want uh maybe Anna knows how to do custom easing linear functions. Uh but say you want to bounce like this. This is so cool cuz you just you choose how many bounces you want. The damping on it. I want it more bouncy, less bouncy. The accuracy is like how soft the curve is. So, I tend to keep it high. Um but it does make one hell of a big linear function, but then it just works on whatever you're doing. Uh, and you know, they have like all these presets that you can then play with. There's also the spring ones. Spring is probably more useful than bounce, but maybe there's times where you want to use bounce. Um, this one's kind of strong, but like just for any animation, all of a sudden it just grounds it and makes it feel so much more real. Uh, there's the wiggle ones, too. I think all those Yeah, these all use different linear things. Uh, and it's awesome. It's really, really cool. Uh there's a nice post I did a video. Oh no, I was going to say a post by um Josh Ko, but it was a a blue sky comment that I then did a video on just looking at how we can use custom properties as a fallback or in a way to make sure you have a fallback without actually having to do it every time. Um most I think linear actually can I use I think it's pretty good now. I was surprised with how good the support was. 89. Not perfect, but it's getting up there. I would just stuff the formula in a SAS function to generate the thing. Okay, perfect. Um, let's head back on over to here. So, that's awesome. Intrinsic sizing keywords. We just talked about those. Uh, so I use these all the time. Max content I use more for demos to talk about how flexbox works than other things. Uh just because fit content I find is probably what you want most of the time. But if anybody has a use case for min or max content min content for small stuff can be useful. But then fit content would still probably work. If you have a use case for either of these, leave it in the chat. Uh just cuz I'm curious. Conic gradients. Uh conic gradients I use in very basic ways, but they're still pretty handy. I did it two weeks ago in a video. if I was using one. Um, for anyone who doesn't know, we'll do a quick one. Can I use iconic gradient? Just so you know, if if you are going to do the survey uh and you didn't know about this until you watch this video, like don't don't say you've heard of it now, just cuz I'm showing it to you now. Um, did I open a new code pen? We'll come back to here. I guess we'll give this one a background that is a conic gradient. uh red, blue, yellow. They look kind of funky when you do it like this, but if you go back to red as the first and last stop, it starts being a bit more useful. Uh and the most common demo you ever see for these are is when you have a border radius that is 100% or whatever, it doesn't matter, 50% and aspect ratio of one to make it a square. Uh, let's turn the height off. And then you actually give these color stops. So if you did like 50%, and then blue. I'm going to scrub the color stops, aren't I? Oh, no, I'm not. And then we need two here. But blue, 75%. And let's put these on new lines so we can actually see them. Uh, blue and then yellow. Whoops. 75% and then red 75% or no that doesn't yellow can go up to 100%. We'll just do that. Uh and you get a pie chart that's like right the most I guess you're more like a I don't know a 60% would probably be more useful. um which should work or is that no no it always goes to the further of the stops but yeah you get your pie chart coming in which is always whenever I see anything with conic gradients that's like the first thing they show with them uh but there's there's other very useful stuff again Anna probably knows a lot more about these than I do um but I'm finding more good use cases for them offset path is fantastic and the offset distance is nice as well I don't know if I can say that I've used it though. Um, I have. That's not true. I have used offset path, but not enough. No, I did it in a video a little while ago. I use it. Okay. I've used it. I have a positive experience. My only problem with it is I can never remember how it works exactly. So, it's when you're doing with SVGs um or I'm just completely off base, but this is for like SVGs where you have like a stroke on something, right? Correct me if I'm wrong on this. Oh yeah, Anna's saying going back to the conic gradient, if the first one is always zero, it's always going to be enough, right? Cuz it always and we don't need a percent then maybe even it always like red will go to 50%, then the blue is doing it has to be a hard stop because this is smaller than this one. So yeah, there we go. offset path is the thing for doing like animating along paths and SVGs, right? Confirm with me before I say that I've used it. Being able to click her of it is the primary reason we're all here. Uh I'm going to leave this here and if somebody says this is for something different, let me know. Uh and then I'll put that I've never heard of it. Nin are saying conic gradients can be used to make fake checkerboard patterns. Yeah, you can do really interesting patterns with um with conic gradients, but any gradient pattern stuff is I just look at it and be like, "Oh, that's cool. I need to learn how to do that so I can actually start beating people at CSS battles." Shape. Oh, no. I haven't used it. I've only heard of this one and I'm interested. Okay. Yeah, let's put this in my reading list as well. Uh I haven't used shape. I've heard of it. I did a CSS battle with the syntax guys and Scott used shape but I haven't used it myself. I've read some articles on it and I haven't touched it yet. Um pain points for shapes and graphics. One of them is coming. We looked at it earlier. This is one of my complaints cuz being able to do the uh I already forget the name, the scoop and other things like that is going to be super useful, right? Uh run. That's going to be so nice to be able to do stuff like that. And the other ones that I don't remember anymore. Uh so I'm trying to think if I have any other pain points for shapes and graphics. This is one where I I don't do enough shape related things. that I have a lot of pain points toward it because I don't like I don't use blend modes a lot. I don't use shapes a lot. I'm boring like that. Yeah, shapes not super well supported. Is it in uh Safari? Oh, it's coming out of the flag in Firefox. Look at that. Awesome. So, we're going to have decent browser support pretty soon. Not amazing. It's only at 76, but it just Chrome was added. Oh, Chrome. It just came out. Oh, March. And then Edge or Edge would be the same and Safari. It came out in March on all of them. Huh. There we go. It'll be It'll be around eventually in Firefox, too, which is nice to see. I definitely need to play with it. I've heard it's a lot easier to work with. Um, but I haven't tried it yet. How poel I'm I going to say cirky. Sorry for saying your name wrong. You're saying max content for setting all grid rows to the same height. But all grid rows are always the same height. I'd have to see something with that. Anna, max content to avoid wrapping. Yeah, that I mean that's the main thing. But then I guess if you don't mind overflow and you're dealing with it in another way um would be the other the main thing there. For everything that could be done with shape, we use SVG in some form, but often it'd be easier to have it directly in CSS. Yeah. All right. I don't I don't really have any pain points cuz I don't do enough with those. You can't mix circle and polygon in clip path. Sometimes messy. If you want create shapes that are a combination of curves and straight lines would shape fix that I don't I honestly don't know. Using gradients in borders and strokes there's work being well I mean we can sort of do it now. Masking can be good. Border image sort of unless you want round corners. Um I think there's some more work coming on that but I don't remember what it is. Offset. Okay, let's just I see someone mentioning offset path. Nobody said anything. Offset path. Is this what I thought it was? I think it's been around forever, right? Yeah. Widely available path play. Yeah, okay. It's what I thought it was. Offset paths have been around forever. I think I say forever, that's good. It's good. It's at the bottom. Uh, yeah, it's been around for a really long time. If you see like those signatures where it's on an SVG or something. What did I use it for recently? I used it for I don't remember. I did it I think the video came out. If not, there's a video coming, but I don't remember. Um, color. So, color I've used, I'm not going to say positive or negative because I haven't used it enough. Um, I've mostly used it as a demo to go along with the one I did on the linear function. Um, yeah, it just you can use bigger color gamuts for HDR screens, but you need to use a color picker, converter, whatever. Cuz obviously this means nothing to me. Accent color used it. positive experience. Works well. Um I guess like the one it would be nice if it we could use it for more than what it does maybe. Um but yeah, it's nice. It's automatically accessible or mostly cuz it will pick the the other color changes automatically with it, right? Like here the the white dot in the middle. If you used accent color to make this white on the outside, the middle would become black. Um so yeah, positive experience on that one. Color mix is awesome. Too bad HDR on the web is I my monitor supports HDR and I turned it off because it made my screen too bright. And then if I like the white was just like blinding me and then if I turn down the brightness it was like okay I don't really have a purpose for this to be HDR anymore. So I just turned it back off. Oh, stroke dash offset is the one I was thinking of. The offset path is super similar to stroke dash offset. I have to check something now. Just we're going off topic for a second from Powell's comment. I hope I'm saying your name right. I apologize. Uh let's do a grid with uh div\* 12 laurum 10 and one of these we're going to do lorum 50 to give us extra content dot grid gap one rem display grid uh grid template columns uh let's just say repeat 31F fr and then grid auto rows max content. I didn't think that would change them like cuz this the row maybe I'm misunderstanding what you're saying but like that's this is what I thought would happen and I think I did that correctly. We can even see. Oh no, my auto row uh yeah the auto rows are set to max content. So like this row is always going to match this rows height is being the height of each row is defined by the con the tallest individual cell and it always will be. So if I did max con I think that's the same as the default. I'm trying to think of that's okay that you can't think of the use case. I'm sure because each each one of these max contents will be looking at the individual row. Oh, Baldi Boss. Okay. Yeah, you're right. That is a little bit different. Um, so I'll have to go back in the survey and set that one. I I have seen that. I don't think I've used it. You're offsetting. You have the path that you can follow, but it's another element that's following the path. If you're saying, if what you're saying is what I'm understanding, in which case, yes, you're you're right. Um, yeah, color mix. Does everyone know what color mix is? Thank you. Sorry, my son just one of my sons came home. The one who won't come interrupt us. The other one will be here in an hour. Uh, you'll find the use case and get back on Discord. Perfect. I'd like to see it. Um, yeah, I think this is really straightforward. The only weird thing is you have to say what the colorer mode color space. You have to say what color space you're mixing in. Uh, but once you understand that, it's pretty straightforward how it works. You're you're mixing two colors together and you can choose how much you want to mix them by. Wide color gamut. Uh, I've used LCH. LCH I was I'm not It wasn't positive or negative. I was really hoping LCH would be more straightforward to use, but sadly it's because the chroma value has different maxes depending on the lightness and the hue that you're using. It just makes it so you have to use a color picker, which I find frustrating. Um, but it it's still good to have. So, I'm not going to say it's a negative experience. It's just not as good as I was hoping it would be. Um, relative colors are amazing. I use them all the time now. This is so nice having that. Uh, so definitely I use them all the time. Interpolation color spaces. I do use it. Not a lot, but it's handy where you can like if you find your gradient is not very nice, you can change the color space that's being used to make the gradient and all of a sudden it looks better. Uh, I have a code pen for that. Let's go back to my work. Uh I probably have rel No, that's it might be under relative actually. Close the dev tools. That's the actual That's relative relative. Do I not have one? Uh That's animated. Better gradients. Probably this one. Yeah, there we go. So here, if we look at that, I had one that had like multiple, but it doesn't matter. Uh if we just say it's 90°, it will look that's blue to purple. It looks like this. And then if I say in LCH, it becomes much more purple. Uh especially in the middle. Let's let's do red. Actually, it might it stands out a bit more. The the the middle is very bright. If I take that off, the middle becomes much more muted. Now, you might want this and that's perfect. But if you know it's the fact that we can change the color space that we're doing it in uh in okay LCH is also different. That's pro there. This is why we have OKL LCH. LCH when it was created had a specific purpose. It's supposed to be like as you go through the colors if as you go through the hues the perception of it it doesn't get brighter or darker or lighter but there was issues with the algorithm. So then they came in with a new algorithm which is okay LCH which makes it work better. So the perceived colors are actually a bit more like at the same brightness the whole way through. Um whereas here you can see it gets a lot darker in the middle and you get muddier colors in this is an sRGB and you can do like in lab we have okay lab there's all the different ones. Oo okay lab is terrible look at that. Uh but yeah you get all the different choices you can do now. Awesome. So yeah that one's good. Used this one earlier today. Use it most things I create nowadays. Light dark. Um I like light dark. I've been waiting. What's browser support for it now? It's getting there. So, this is one of those ones that like you can't really use as a progressive enhancement. So, we're just waiting. Light dark's nice because you don't have to create multiple color scheme like having the duplicate things that you're switching. You can choose like in this one. Do I have it set up? Do I have any other do I have a color scheme? So my color scheme is set to dark right now. Let's do a light dark. So it's still going to stay dark anyway. It doesn't really matter. But then let's just say my text, let's say my color is yellow, which is going to suck, but whatever. Uh we get the yellow color coming on here, which is fine. But because I'm using a light to dark color scheme, if we can't see anything here, let's put this on the bottom and go to elements and this and I can do an emulates color scheme to that. And now I can't read my text. So here what I could do is I could have a light dark of um I don't know what's another color we'd want. Steel blue. Steel blue. comma yellow. So, it's steel blue. And then if we go to our dark mode, then it goes to the yellow. So, this is if it's a light color scheme. And this is if it's your dark color scheme. Uh, so yeah, pretty cool. I like that a lot. Ragnar lab. Okay. Lab LCH and OKCH are not intuitive. If you look at the numbers correct, they are not. Those colors are they were a choice. Ragnar, why are you on both Twitch and YouTube? Okay, lab is not okay. Yeah, I mean I'll take it for the engagement numbers, I guess, but um main pain points related to CSS handling. I will say the reason they ask for these pain points here on each one of these is the browsers are looking at the results of this and I guarantee you they're getting valuable information from this. Um I can't think of anything specific. What was the issue we were having when using variables in late dark? Do you remember what I'm talking about? Yes, I remember. Um, the issue was caused by the I remember the issue. It was I don't remember what was causing it. Um, it was something with how I'd set things up to be changing. I'll if I remember, I'll I'll get into it. I have I have to think a bit about how I had originally set things up. Basically, yeah, light dark means we don't have to duplicate into preferred themes. Um, Seth saying that okay, LCH is easier than hex. Everything's easier. Anyone who anyone who writes colors in hex and knows what color they're going to get. I can get red, you know, I can get red, green, or blue. But as soon as like you start having random mixes of letters and colors. Um but some people can do it. Interactions. Yes. Scroll snapping is great. Um scroll padding is great. Uh horizont especially for like mobile stuff when you're scrolling left and right for stuff. If you're trying to make like an interface like that, they're really really good. Yeah. Amit Sheen likes adding using hex codes with opacity in them. And I just look at him every time he does it. I'm like, why are you doing it that way? Uh, overcroll behavior. Um, so yeah, overcroll behavior is nice if you're again if you have scrolling things that are smaller within like a larger page and you want to make sure that somebody who's scrolling in the smaller thing, if they get to the end of it, it doesn't start causing scrolling on the entire page. You're containing the overcroll. You wish scroll snapping allowed a no skip mode. Oh yeah, that would be I ran into an issue with um carousels when I was first playing with them and that having like a no skip would have solved it. I've eventually figured out what the problem was. I'd messed up how I'd set something up, but uh yeah, cuz depending on how you have stuff, sometimes when it jumps further than what you would be hoping it to. Um, so if you could just say like all like even if they do a big swipe just go to the next one. That would be all custom dropdowns with scroll should have an Yes, definitely. Anytime you have something that involves scrolling, I think it I almost feel like overcroll behavior of contain should be the default. But um yeah, you can prevent scroll reload as well on mobile. Scroll behavior positive. Super easy to use. Seth saying that hex codes are useful with alpha using 000000 for transparent in CSS battles for fewer characters. Yeah, that makes I have to remember that for the next time I play against the syntax guys. Uh scroll. Okay, negative experience. the HTML and CSS tip of the week. I was going to put it on this site because I was having a thing with it. Um, what page would it have been on? I don't know if I have a short enough page. If I zoom out, am I going to get a short enough page? There we go. So, I I was going to put it on this cuz I had jumping. By the way, I fixed the navigation a little bit off stream cuz I said I'd only do work on this. Um, but just a really fun thing for anchor positioning. I've anchored it to line up with this if this thing is on the page. Uh, and then if you go to a page, it just isn't off where it would normally be. I I like that. I don't know. Um, but okay. What was the page I was just on before? Uh-oh. Uh, and having this I'm just going to take it off. There we go. Uh, you won't be able to see what I'm doing because I have it off. It's not docked. But um let's go on my HTML element really fast and do a scroll bar gutter stable. This is infuriating. Uh, and yeah, uh, it's, you know, here it makes sense, but it's if you have backgrounds that are set and then you end up on a page where, and I get it, it's it's holding that space for you. What was it was my color one, right? Oh, I changed pages and I have it in my dev tools, so now it's gone. But like basically you don't want things to like snap back and forth like it's doing here where you can see the nav is moving between the two of them. But then the space that it saves for it has a bar. And I've even had it on pages where like it's just a different color from the background color of my page. And I I'm like, "Oh, I just need a background color on my body." No. Or my HTML. No, that doesn't. And I'm setting background colors everywhere. And it maybe I just don't understand how it works. But I find it doesn't do what I want it to do. It works better for items that are scrollers, like individual things. I don't find it works well for what I wanted it to do here, unless it's a simple page. I think I have it set on my actual page, um, like Kevin Powell.co. And because I don't have things that stretch the page, it doesn't matter. Um, but yeah, the stable thing, I I get the limitation. I understand it. Maybe I'm being harsh on it. I won't I get it again. Like it's positive and negative because it does solve a problem, but it I'm not hugely in love with it. I don't find it as useful as I was hoping it would be. How's that? Um, something about when values were parsed, it didn't update when flipping them the theme. Something like that. Uh something like using light dark in the variable color primary light dark still blue yellow something about when the values were parsed. It didn't update when flipping the theme. It could be that. Yeah, I think it's where I was changing the custom properties that was causing the issue. Sorry for anybody who doesn't know what we're talking about. It's even more infuriating why the new Windows 11 scroll bar or the new Mac ones. Is there a new Windows 11 scroll bar? I'm on Windows 11. Bagar. It solves the problem but badly. Yeah. I don't even know what the new glassy scroll bar one is. Speaking of disasters, I'm going to I don't know. I'm going to put negative experience for this one. I'm sorry. It doesn't I understand the limitation and why it works the way it does and I don't know if there's a better way of doing it. I just feel like it didn't it didn't quite do what I wanted it to do. I don't see the use for doing anything other than letting the browser deal with the scroll bar. It's just it basically reserves the space for the scroll bar. So even if there is no scroll bar, that space is reserved for it. So it prevents those weird jumps that you can get in content. But Firefox uses the OS scroll bar so it's overlaid. Oh, that's why they're different. Okay, that makes sense. View transitions, they're awesome. Uh it gets complicated quite quickly. It's it's so there's so much with them, but it's so awesome. Um especially the in page ones, how easy they are. If you're doing single page view transitions, it's such a treat. Um but even the the multi-page ones are so useful. Um we're not doing a demo of them today, though. Scroll driven animations, I love them. Those we could do a demo of if anybody hasn't used them. Uh just let me know in the chat. I love scroll driven animations. They are awesome. And there's some crazy stuff you can do with them. discrete property animations. This is the best. So this is I was mentioning before with the calc size. Only use calc because it enables animations to and from sizes, intrinsic sizes like auto, min content, max content, fit content. But don't use it for an animation unless you need the calc on there. If you're just doing an animation, you now just do an allow like as long as you're using allow discrete or that's for the property. No, that's not the same thing. I'm looking. I'm thinking of the other one. Transition B. What's the one you can put on the body and it just works everywhere? Or is it? No, it's not the transition allowed discreet, is it? Oh, now I'm mixing things up. What's the one you put on the body? Whatever. This is awesome, too. Um, it's not allowed discreet, though. It's allow keywords that I'm thinking that that one goes just on your HTML and inherits through the entire site. Um, allowed discreet is is it allow keywords? Oh my goodness, there's too many things new in CSS now. Um, Matias, with the new liquid glass scroll bar, you'll probably always see that space, right? That's Yeah, the the liquid glass thing has been if anyone hasn't interpolate size. Thank you, Tommy. interpolate, size, allow keywords. So, it is allow keywords. You put that one on your HTML, it goes through your entire site and now you can transition and animate to and from. I I wonder if we'll have that coming up. Um, but allow discrete is also fantastic because then you can do display and you can actually animate to and from when using your display none to a display of auto or whatever block or grid. Uh, the one thing you have to watch out for with allowed, like the reason it's called allow discreet is a transition traditionally wouldn't work at all. Like this entire transition would just be considered invalid if you were trying to transition something that allowed for discrete animations such as a display. And what a discrete animation is is something you could include in an animation. So if you had key frames, but it wouldn't actually animate between them. it would just at the 50% point flips from a display none to a display because there's no way to animate that. Uh so a discrete animation, it would work, but it wouldn't actually animate. It would just flip at one point. So this means what this basically does if you're putting this on is the display immediately gets switched and then it will do a 1second transition on these other things. And if you're going the other way and you're closing it, so you're going from display something to display none, it leaves the display at whatever you had for that second and then after 1 second has passed, it switches it to display none. That that's how it works in my head anyway. I don't know if any browser people are listening, they might be like, "No, Kevin, that's not what we're doing." But that's how I see it. Yeah, liquid glass has been a disaster. They It is a design statement. I I mentioned it to somebody on on Blue Sky. It makes me think of like somebody who's discovered a new like Photoshop effect you can do, right? Where you and then you're just like, "This is cool." And then you just push it like really far and go way over the top with it cuz you just learned this new thing. Uh and then they're like, "Yeah, we're going to roll with this. This is cool." And they didn't really like it needed to be toned down by 80% and then it probably would have been fine. Anna 50%. 50% was the if you're doing a discrete animation, it would flip at 50%. But now that we have allowed discrete, it will stay the entire time. No, because if you do allow discreet for 1 second, opacity for 1 second, it stays visible until the end of that 1 second. That's how I understand allow discreet working anyway. It's like when a newbie just discovered box shadow. Exactly. I will say though, just uh Yeah, I'll find it. Blue sky. Oh, no. I'm not logged in here and I I'm only sharing this window, so I can't show you. Somebody recreated the the glassy effect. I can find it. One second. I I have it here. I'll just pull it into this window. Um Andy Bell's live, too. Oh, no. Why is Andy live now? I didn't realize he was going live. Um, let me just look uh really fast for this because it is pretty awesome. I hope I can find it. Crap. May. Oh, I think it was in reply to this thread. Actually, it is. There we go. I got it. Check out this is by Mike Bespalav. I'll share this in the description. So, this is using Let's just do a format CSS cuz it was minified. This is using uh Oh, no, sorry. It would be in here. It's using some SVG stuff with the filters, with the gauian blur, and a displacement map. And it it works. Uh, don't go all out with this like Apple did, but it's pretty cool. And I'm looking at this, I'm like, "Oh, I guess I need to learn more about SVGs cuz yeah, that's that's pretty awesome." Uh, I'll put that in in chat. There we go. If you want to poke around at it. I just real I didn't realize when I hovered that it made a difference until now. Uh but yeah, if you want to poke around with that, you can leave. Scroll state queries. I ha I haven't played with them, but I'm interested. Look at that. I haven't used something. Uh this is pretty awesome, though. I'm happy these are coming. Uh I don't think they're Are they in I don't even know. Some of these things aren't even in can I use yet. Uh scroll state I don't think is in here yet. I think it's maybe in Canary already. I don't know what this has anybody used scroll state yet, but basically we're in a know scroll state stuff now, which is which is pretty cool. Uh everything is always based on our app container now too. Um but yeah, so you can know if scrolling has happened and the current state of of scrolling. Uh which is cool. CSS carousels, I've used them. Uh okay, so I'm putting uh I'm not It's really cool that they just work. I do think the problem that's come with the CSS carousels, they solve a huge pain point, they just work in a really cool way in terms of it being incredibly easy to do. The problem that's happened is since they've come out there's and and I mean it's mostly been Chrome's team who's worked on it and they have accessibility experts who work with them that obviously I guess gave the thumbs up with how they were doing it. The problem that's come up is there's been several people showing the accessibility issues that are center around it and the lack of control we have on certain things. And there is a part two of the like a level two for the spec that where you'd basically put all the elements in yourself and then could assign the different parts of it to the elements you've created. And I think that would solve a lot of the accessibility issues that are coming up with with this cuz it does the problem with it now is it makes a lot of assumptions and again that makes it a lot easier to do the version two. I think is going to be what should have like I almost feel like now based on the feedback I've heard is maybe the version one should have not been a version. It should have version two it it I know sometimes it's like let's ship this cuz we can and then version two can come and improve it. But I almost feel like the improvements maybe should have been what the baseline level of it was. Uh that I think will fix a lot of the issues. Again I'm I'm not 100% sure. I haven't done a deep dive on it, so I'm not 100% sure with it. But even if it does fix it, because the version one is so easy to do, it does mean that most people will probably just use it this way, the way it currently works. The only good thing I will say is even if like it is frustrating if it's not perfect, which it based on the feedback I've seen, it's not, but it does a better job than most people that are building custom ones, I would assume, cuz most there's so many disasters that come from the custom ones and it's so easy to do stuff. Um, but yeah, if anybody has any thoughts on it, my my initial playthrough of just toying around with it was good. Um, but Marco, you were at CSS State 2025. It was good, but you need to be there for me. I'm I'm planning on going next year. So, Anna saying the filters are an issue performance-wise. Yeah, that with that one I was just looking at with the the glossy effect, I'm guessing the performance wouldn't be fantastic. The thing is this is they're calling these carousels. It's not necessarily a carousel in terms of like what we think of as a traditional carousel. It opens up so much stuff. I don't know if I I don't remember the URL. Adam Argyle had all those examples that he' built with it that are super cool and it's so like there's so many of them that were like the types of use cases that we see used a lot and created a lot. Um it could even be used for like tab systems or not tabs um well yeah like tabs type things and other stuff. But again that's where it's covering a lot of bases and makes them possible. But it's possible even within that that you need different things from an accessibility point of view. But um yeah, it you know it it's not carousels in the traditional sense necessarily and the name carries a lot of baggage with it. So maybe they should have gone with something else too. If Anna wants to share that or Gabriel if you have the link to Anna's CSS carousel definitely she can share anybody can share it. I'm I'm h as long as hopefully Google doesn't block them block the links. We'll see what happens. Um I don't really have any made interactions. H I will say I I don't know. I I heard there was a lot of outside pressure. I guess my main issue with carousels actually shipping is I just feel like there's other things that I wish got attention before carousels did. Can I explain all of this? I can't explain it all cuz I barely I only played with it once. Uh oh, Anna saying you did stuff before. So it wasn't with this. You've had your custom carousels before these ones existed. Okay. Um, but yeah, having I don't know if I made a code pen of it or not. Let's go look. I I wouldn't be able to do it off my head because I haven't used it enough. Um, I don't remember if I did it as a code pen or not. Oh, that's No, I don't. Uh, grid. That was pro. Those were all fake ones. This one's probably not. No. Um, let's do CSS carousel. Am I going to find It's probably linked here. Some of the examples. Actually, I would say if you want to learn how it works to check out this um because there's tons of great examples um on how it works. I don't know. Does it link? I'll put this link in the chat anyway. Um we're zoomed in way too much on that. Uh, this one. I will put this in there as well cuz this is Oh, it's failing to send messages for me. Huh, that's annoying. One second. I just realized my chat that I was sending stuff in was set to only Twitch for some reason. It still doesn't want to send them. I was sending stuff before. Oh, there it worked on YouTube. For Twitch, I don't have Twitch open, do I? Oh, I do. I can put it here. That's annoying. Um I'm Let's see if I can like, you know, I mean this. Okay, you might not want to do that one. Um you know, like these types of things that are super common. That's using it. Uh app switcher. I don't know which one this is. sort of that type of thing. I don't remember what all of these are. Like this is more of the traditional one, right? So, you might not want that. But like all of this is just CSS only, which is crazy. Um, this is sort of a traditional one as well. But there's other examples in here, I think. Or this is sort of that classic one, too. I remember seeing other examples. Um, anyway, I'm not going to deep dive it too much now, but that's what it is. But yeah, there there's a few different parts to it, but it it's it's interesting. Um, I'll say that. Thank you, Alam, for sharing the link. Uh, yeah, it's chromium only for now. I don't know what the state is. I don't I think Chrome did it as again they they're doing things as like part proof of concept to get the other browsers behind it which I'm completely fine with to like show that it can work but then they're shipping it in like to prod it it should stay behind a flag. But anyway, this is the state of CSS. It's linked in the description unless you're on Twitch, which you are, in which case it's not linked in the description. If somebody is look up state of CSS and you'll find it. Line clamp. This is so frustrating. Okay, I've used it. It's Well, it this is in the spec, the part I've highlighted that we should be able to just do a line clamp to and it should work, but no browser has done it. And in all the browsers we have to do all of this. Um would love this to be on prefixed and basic like the it it's so frustrating because you're using webkit box. The reason it's webkit box I don't it webkit box and the box orient orient of vertical are part of the one of the old flex like early early day flexbox things. So, WebKit box was instead of flexbox, it was box at the time and then they changed it to flexbox. And then the box orient vertical was a flex direction of column. So, you're essentially doing making it into a column, saying how many lines you want to clamp, and then overflow hidden. But, it works. And it's so stupid that we have to do all of this to get it to work. I would use it and it would be so much more like just just give us this. Everybody has implemented it. So why can't we have like just update your implementation so we can have this and even if that means doing all of this behind the scenes, I really don't care. Um, so frustrating, but whatever. I've used it and I'm glad we have it as a thing. But I can even just really fast for anyone who doesn't know what it is cuz I didn't describe it very well. Uh, let's do it right on this paragraph. Uh, we'll do it on the first one. Uh, we can get rid of our selector. There we go. That should fix it. And oh, no, not the anchor. Whoops. Did it on the wrong thing. Uh, I want this to be Oh, we do want on the paragraph. I can just drop it right here on the paragraph itself. So, now the paragraph is maximum of two lines and any overflow just gets an ellipsus at the end. And if I make this three lines, we get three lines. So, it's good if you have cards where you only want to show three lines of text and then you can hide everything else. Don't have like 20 paragraphs and hide it, but it, you know, for for certain things, this can be useful. Uh, and it's super frustrating. We need to prefix it, but at least we can do it. Um, yeah, it would be a really nice one for them to be able to fix. Variable fonts, positive experience. They're a little bit annoying to like get all the pieces the way you want them to be, but whatever. It's not the end of the world. They're pretty great. Textrap balance. Works well. Line clamp works. Oh, line clamp works in Chrome. Um, can I use line clamp? This Chrome's still saying it's prefixed here. Let me try it in this one. If I take this off and those off and I just do a line clamp, it does work in Chrome. When did that happen? This is Chromium. I'm going to do it in another window really fast. Uh, save, copy, paste. Sorry, you can't see this. Uh oh. So it's working. Oh no, I lost my chat. Is is is YouTube still running? That's fine. It is. Oh, thank you for the super chat. I appreciate that, Ash. Thank you very much. That's super kind of you. I've lost my combined chat. So, I'm gonna have to pop this chat out and pull it over here. And we're going to have to run on having and we have to get my Twitch chat. And we get to have two chats at once. That's fantastic. Uh, which means the chat on screen might also not be working properly. So, I do apologize for that as well. pop out this chat and bring this over. Uh hopefully that gets fixed. But yeah, so my regular Chrome, come on. I'm having trouble aligning it. There we go. There we go. Uh my regular Chrome, this doesn't work. But in Chrome Canary, this is working. So I guess they must be working on something to on prefix it. Maybe you have the experimental flag on. So it's working. That's possible. If we can get away from having that to be prefixed, I'd be so so happy. Text wrap pretty is pretty great. So, if anything, text pretty is like better than balance cuz some people don't like balance. Uh I have heard there's performance issues with pretty though. WebKit prefix because it's Chrome. Chrome doesn't Yeah, but the WebKit prefix is for every browser. For this specific thing, this will work. Where is it? Where is it? This will work in every browser, including ones that WebKit prefixes aren't there for. So, this works in Firefox, and Firefox never used WebKit. Um, but just because this became the way to do it, like every single browser this works in. So, there there's weird things with prefixes with some stuff. Is there can we have something like a tool tip when text goes out of its assigned area we show ellipsis and we hover on it and show the whole actual text you'd have not with CSS only that I can think of Firefox uses mozz for prefix correct but if you're using this then you would if if you wanted this to work you can here let's open up this example I have it in my clipboard still oh Uh I can't share but yeah this will try this in Firefox and it will work. Uh cross browser support it works but nor most prefixes were mo that's how it worked but um for that one that's how we do it in every browser. There's another feature too. That's not the only one. There's something else that uses a webkit prefix that every browser use but I don't remember what it was. Um, yeah, you do have to be careful with clipping words. Oh, yeah. Now that I'm on the actual YouTube chat, I see the leaderboard stuff. We have a leaderboard on uh in YouTube now. So, the more you chat, the higher up the leaderboard you get. There was something else I was supposed to do. Engage with my audience. Is it here? No, that's Q&A. That's a poll. I was supposed to do something and I don't remember what it was. My my my YouTube person told me to try something on my next live stream. I don't remember what it was. Anna saying Firefox supports aliases some WebKit prefix things. Yeah, there's a few where it was just like once they stopped with the prefixing stuff, they just sort of aliased on the on the few things where we needed them all. Um, we they went down that route. I'm just cur I'm just going to We're not going anywhere. I just want to see. Yeah, that sucks. I wonder if I could uh let's just see if I can fix this chat live. I won't take long here if I can't uh if I open that platform. They're both on dashboard settings. Accounts connect [Music] you continue [Music] which hopefully [Music] will work. Okay, I'll just let that go in the background as we continue. Um because it doesn't look like it's working. Hanging punctuation. I've used this. Uh can I say negative just because nobody supports it. Safari is the only one who supports hanging punctuation. Uh so I can't even demo it. I'm pretty sure there and they've supported it forever, right? Hanging punk punctuation. Uh Safari has supported it since version 10 in 2016. That's embarrassing that no one else supports it. right? Like they've we're coming up on almost 10 years and they're the only browser to support it. Um if anybody hanging punctuation you don't even need like this is like images. It's where your punctuation is that really as big as the picture is going to get. I just wanted the Oh my god. There we go. uh where the punctuation doesn't do this, it hangs off the side and it just looks so much nicer because this makes these like weird gaps and from a typo typo typography thing like this is what you want and we have a CSS property that can do it. Uh but only Safari supports it. So, I'm actually I'm going to say wish this is a really nice progressive enhancement. And I will say we could actually include this as part of your reset or whatever you want to call it. Uh and it would just be a progressive enhancement that's there and Safari people get a little bit nicer quotation marks. Uh wish it was supported in all browsers. Uh, and I can't see any of the chats now, so I'm going to move that out of the way. Oh, and we got another super chat. Yash, again, thank you. Does container parent in container query need definite width or height? No, it doesn't. Um, though, if you are Theodore, hello. Uh, let's do a really quick thing on that then. Code, somebody super chats, then we we get interrupted to do a demo. Um, okay. Let's do a parent. Whoops. Parent. Come on. Parent. Oh my god. What's going on here? Parent. Uh, child. Okay, there we go. HTML. HTML color scheme dark. Uh, put some content here. Hello. there. The parent container type inline size is what you probably want for container queries. So if I do a container type of inline size and I say the let's just give this a border 5 pixels solid red so we can see it. Uh and I'm just going to make more text here. Loram 500. Uh so everything's fine. A container query will now know the inline size, so left to right of the element. If you just do a container type of size, then you do need a defined height. Because now when you do a container type, you're basically saying don't look at the content to figure out how big you should be. With block level elements, they don't look at the content for the width anyway. The default is to take up as much space as they can. Whereas the height wants to be as small as possible, and the content is what makes it bigger. So a container type of size means it doesn't look at the content. It shrinks to zero. If you do an inline size, then it won't shrink to zero and we're fine. Uh and you can do a container query on that. If you do need to query the height, then you need to have a defined height. Um and it becomes a little bit less useful. It's only, I guess, useful if you're doing it as a percentage or as a viewport unit. Um but yeah that's sort of the constraint we have with container queries. Theodore did I use Linux in the past? I have never used Linux or any Linux distros. Simon sticky notes. Whoops. Whoops. I lost my mouse. There it is. Sticky notes. Kevin chat leaderboards are a terrible idea as people will just post nonsense. So far we've we've been good. Uh, we haven't had any and I have slow mode on which helps. I guess it's all about the engagement. Who cares what people are saying? No. Oh, there's Anna coming in with all So, WebKit background clip, WebKit text stroke, WebKit text fill color are all supported cross browser. Nice. Uh the contain property. Yeah, contain contains a little bit can container type is a container type not quite but it relies on if I actually I think container type type size is contain layout. Are they the same or very similar? No, because that actually keeps the whole height. Uh there is something very similar. Container types rely on containment which is what you do with the contain property. Um the contain property I would say for a lot of stuff you don't need to worry about it. It can be useful for performance things occasionally if you but I wouldn't do it ahead of time. If you were having performance issues on like repaints or something with the size of something all of a sudden like changing you could potentially use the contain of layout. Um there are a couple of situations where you might want to use it but um it's not something that is super super important. Um, Ragnar, you don't understand how the leaderboard works. I don't know either. Lauram 5. Yeah, Lauram's you can choose how many words you want. Lauram and it's also the nice thing with the Lauram in um EMTT is if you do like Lauram one uh li 10 with a Lauram one each I hit the wrong thing but uh oh I did it again lurm one tab uh each word's actually different which is kind of nice. Um, container tight. Seth coming in with some nonsense for the You have to a bit more nonsense there. Seth, you're not on the leaderboard right now or you're not in the top three anyway. uh contains equals new coordinate system for fixed which can be useful. It can be but I find like even if you did that it sort of locks it in to the point where you're not really fixed anymore and you might as well use a position absolute. No. Um, sorry, I'm still in the dual chat, so I'm just trying to read both of them. I used size last week for something. I can't remember what it was. What's something I currently dislike about CSS? I haven't come up I don't have any major pain point. I've come up with a few small ones as we're going through this, but I have I don't have any like, oh, I hate this. I just wish there's features I wish we had. Oh, that's a good a good um Alan, I will do that as long as I remember at the end. Uh yeah, Lauram, everything Lauram, you can you can do this in VS Code. This is all just emit, so it's built into uh it's it is in VS Code. Yeah, anytime you use position fixed it just to me the only time it's useful is in the global context because then it's to the viewport is until you when you fix it to something other than the viewport there's not really a point in it being fixed anymore though there is a thing I think is it with anchor pos with anchor positioning I've heard that fixed is better than absolute and I don't remember why I think there's like a bug or there's something with absolute And people have been using fixed and it's better, but I maybe I'm making something up right now. Okay. Um, initial letter. It's fine. It's for doing drop caps. You can select the first letter of something. Um, isn't that one only? There's two different ones here. And I don't remember if this is the Safari one. One second. I'm glad I got to the mute button in time there. Okay. Container type size is similar to contain size. There we go. I knew there was one of those. Um I wish we had a shorter way to reference variables. Var is it's not that bad. When you're used to do I mean I came from SAS so when you're used to just using the dollar sign it was kind of annoying. Now that I'm used to it, it really doesn't bother me. Um, but yeah, initial letter three, it it works. So, it's um for drop caps and stuff, it's not perfect, but it's good enough. I don't know if I'll say positive. I'll just say that it's good enough. I don't use it enough. Uh, this one I think is worth a demo. How far are we in the survey? I can't keep doing demos. We're never going to finish this. Um, I won't do a demo, but look it up if you haven't heard of it. Textbox edge and textbox trim. You can get rid of the annoying extra space. I'm going to do a Yeah, I'm not doing a demo, but it it's it's useful. Just I wouldn't do it on paragraphs, though. Um, my testing on it with paragraphs is like it's actually a bit annoying, but on a button or on like small UI elements where the space on the top and the bottom seems off, this is what you want. Uh, super useful. I'm looking forward to margin trim as well. Um line clamp shouldn't need to be prefixed. Um ah that's good enough. Next math comparison functions positive experience trigonomic. Okay I've used them. Uh people like Anna know how they work. I I don't know like C and sign and Tan like I get the purpose but I need to I need to follow a tutorial on like oh I need to make a circle now with several elements and then I'll find someone who shows you how to do it and then I can do it. So like there's definitely I'm h okay we'll say positive experience but I just I can't do these things on my own. Even like Tammani's example here the original one or even it's here where like the aspect ratio where he's using cost like I don't even know what this is doing. I have no idea what the result of that is. Um, so like some people are getting a lot more value out of having trig in CSS than I am. Um, I know uh initial letter has limited support. Yeah. What? Textbox depends on font choice. What do you mean by that? Step to value functions again like the exact same thing. I've used it actually that's not true. Round I've come up with some good use cases for um the mod and the rem like I see people do something and I'm like, "Oh, I get what they're using it for, but I wouldn't be able to think of that or do it." Maybe I could be like, "This would be useful. I need to look at how it um using it would work. I also find that the REM is sort of annoying. We have a REM function and a REM unit, but whatever. We peaked to clear fix. We must return to the forest. Um, but yeah, the the round I don't remember what I I had a thing where the colors would adjust based on like it was for like availability where I could go from green to yellow to red, but it was all like I had one color set and then the based on the attribute it would cause the number to go up for the hue, but it would go and jumps big enough to just have those three colors and it worked really well and there's a few other things too sign related functions uh again exact same thing I actually I haven't used absolute I have used so like absolute will always uh that this is the one that always returns a positive value yes am I correct my math skills are really showing here. Uh in that case I have used that one cost is a way of going that I mean it's good to know that that's what cost is but it still doesn't make me think of like useful use cases for them. Ragnar saying yes. Okay, perfect. Yeah, so you're always getting a positive value. It was um Adam Argyle's thing is coming to mind that was like the offset because some of them would be negative. I think it was using like sibling index as well. Uh same thing here. I've used power and I think square root on something. Um whatever. I mean I've had positive experiences. They do what they're supposed to do. I'm happy we have them. Chromes doesn't support signin apps without a flag yet. So, I must have I know I played with it, but uh I I don't have any because I don't know enough. They all work well based on what people show me. Add supports. I'm a big fan. Table cell and list item is everybody supports that, I guess. Um happy we have it. My actually my biggest complaint about app property is knowing what syntax to use. Uh, I'm getting a little bit better at it, but there's so much there's so many different syntax things we can put. And I've gotten tripped up like when I was doing a degree and I didn't realize I needed degree. I thought it was just an integer or whatever and then know it had to be a degree. Um, you have length, length, percentage, and percentage. That's fun. I I figured out the difference and it's fine, but just like knowing the list that you can use for your syntax is the hardest part. But obviously super useful to be able to register our custom properties. I don't have a video that Ragnar dives into um at property. I've used them I've or used it in videos quite a lot, but I don't have a deep dive into them, which I should probably do. But again, I feel like I'm not the right person for it because I don't do enough cool stuff with it. But I I mean, just as a basic introduction, I do enough. I guess has is amazing. Has is so good. Super happy. We have has where works well. No complaints. Interesting. They have where but not is cascade layers. I'm not gonna I'm still waiting to see a really well like convincing use case for cascade layers other than if you're bringing like setting a reset sort of because there's lots of resets out there that use wear now just to make sure that the entire thing is zero specificity. So like if you just bring in the reset as the base layer that's a good use case bringing in thirdparty code. So, if you're using Bootstrap and you just have that as a layer that's below like your base layer and then everything else of yours is on top of that and you don't have to worry about specificity, fantastic. Um, a lot of people I've seen using it are using it in a way that I think is what scope is for, which it's not for. Um, so yeah, and I've seen some like simple use cases of it. It's for certain organizational things. I'm liking it. I I I have used it quite a lot. Um, I like it, but I'm just like I haven't been like, "Oh, okay. That just changes like and makes something so much better." Does boot I don't think Bootstrap still uses important, does it? Um, Chris saying has is the best thing to come to CSS since custom properties. Yeah, it probably is. It makes a lot of things possible instead of just making new things easier. Um, it just, you know, those are the ones that are awesome. Miss Hart, I wish I had the first clue about how to efficiently use some of these trig functions. I like signing cost for making circles, but don't have any idea on any trig. Yeah, I'm the same. Matias, you can calculate modular type scales with POW. I think I've seen an example of a cool example of that actually. Um, but I'd have to play around with it. There's still a lot. We haven't got to that part of the survey yet, but we'll have to see the results, but Bootstrap's still widely used just because it's so out there. Native CSS nesting. This I I like nesting. I'm not going to say no to nesting. So, uh, image set is image set supported. I I know it. I just Whoops. Can I use Huh. I didn't even realize it was so well supported. Look at that. Is it supported? And it's at like 95% support and it's very well supported. Um, I should do a video on it, I guess. I don't use it. Um, have I used it even? I have to think about. I probably should do a video on this because it is useful. I've known about it forever and I just haven't done anything with it. What is image set? Basically, you just you can bring in like different versions of an image. It's a bit like the picture element in a way. Um or source set, I guess you more like source set than the picture element specifically. Um, but yeah, you can bring in like different resolutions of an image and the browser will pick the right one. Um, I I don't think I've used it to be honest. So yeah, scope uh mostly positive experience. There's some things where every now and then I'm like, "Oh, that's different." Uh but it's or not different just like it's once you start trying to use the um what's it called like to part of it right because you like card to another selector. Do I have an example of it? I know I have a code pen on this uh scope. There we go. Uh this one's too simple. Oh no, we we are. So here, like this example, is my button going to get screwed up here? Why is my button still working? White. Uh, color white. H, the idea here I remember with this demo was that the button styling would break this styling. But it's not doing. What if I just did nav here? I have to play around with it. Let's go to the other one then. See, this is already where I have this one. Uh, not that one. That would work too as an example, though. This is the one I think I'm thinking of because this looks broken. Uh, except I don't have anything set up. Anyway, scope's cool. That one's not the right one. Anyway, so like your two you have like your light class, your dark class. Uh it just like here this issue where I have links here that are white at the bottom and we can't see them because the links are white. Uh which is I think where you can start using Oh, this one's not using scope. That's why. But here anyway, the colors are broken and you can fix issues by using scope. Uh I don't feel like getting into it, but you can all this part's easy. This the scope part's easy, but it's when you do two and then you have something else like two button or whatever. It just means it won't enter into the button. So like the styles of this are all there but not further in. And then it's super useful in things I've done like that, but I find it complicates things also. So it can be a little bit strange. Um I like to move it, move it. I like to move it. I like to move it, move it. I like to move it, move it. I like to move it, move it. I like to move it. [Music] [Music] I wish it's not even summer break. They're just home from school. H All right. Uh let's continue. And child of S is fantastic. It fixes an issue we have. uh used it, positive experience. That one I can do a demo of on like scope where I was uh not doing a very good job of talking about it. Um none of these are very good. Do I have one of that? Uh let's just do We can do a quick demo. Let's use a template since Matias mentioned templates earlier. Um, E times 4 with some more text. Here goes the notic parenting is fun. Okay. And nth of s event of nth whatever it is. If I do uh te uh test, what am I thinking of? We'll do Okay, we're going to do two classes of test. Test nth of type two color is red. Uh you would think it would select the second of type, but it doesn't. it selects this one which is the first one with that class because nth of type doesn't look at the class name. It will look at the class name to set the style. I haven't looked at chat since he came in. I'm just and we're powering through here. Uh it doesn't it doesn't look at the class here. It looks at what the element is. So the element is a paragraph. This is the second of its type of element because of type this would be better if it was like nth of element is what it's doing. uh whereas now we can do an nth child to of test and it will actually select the second test. Uh I find it kind of weird this is using the nth child instead of nth of type of something but whatever it works and we can do it. So it's super handy. Asper the ghost. Yeah. Oh yeah, it's definitely a good thing. I'm glad that he he has a I if I hadn't told him I was doing a live stream. Um when he left I was like, I'm doing a live stream just so you know when you get home. And so of course then that means he knows he wants to put on a show. I probably shouldn't have let him know, but it's okay. Um field sizing could power. I want to be done in half an hour. We're not going to be done in half an hour, but I'm stopping in half an hour and I'll finish it on my own, I guess, after that. Uh, Aaron, so repeating the selector is annoying. So, the test, this could be like paragraph nth child two of test and it would still work. Um, which is essentially the same thing as I was doing because this is a paragraph. Uh or it could it might be like uh you know I wouldn't do it with my body selector but it could be like you're selecting the nth child of a specific class in as a descendant of something. So you don't have to repeat the selector in both cases. That's a good point to bring up. Uh field sizing is kind of cool. It will just if you have a select or an input or a text area whatever field sizing content I like it for selects but for other things it can be useful where it it will match the width of the current selected item I have inputs it's a bit weird that the input grows and shrinks as someone's typing in it but um for for selects I find it's useful target text uh I know it I've never used it I've seen it used Google uses this on search results where it like highlights something doesn't I think that's what that uses to do it where when you have search results but it like highlights the part from the thing. Uh I'm pretty sure they're using that. I haven't used it but um this I'm ex did I did I I'm going to say I used it. It's a we did it on the last live stream or two two live streams ago. I think I got one working. Uh so I barely used it. I just played with it for like 10 minutes, but custom functions are coming to CSS. Uh, just they're not do not try for production. We're not going to do a demo now because I mucked around with it so much last time. But basically, function, put in values, do stuff, give it a result, and then you can use that. It's if you're used to SAS or SAS functions, we now have CSS functions, very similar. Um, display contents is the it has been cursed for a really long time. It's gotten much better. I think there are still certain concerns. So, if you're going to use it, be very careful, but I think from what I understand, it's much better. Don't quote me on that. Ask an accessibility person first. Um, but basically, like you can have an element ignore At one before we had sub grid, people would use display contents to sort of mimic subgrid until they realized it was stripping the semantics away from the elements. So the idea of display contents is it doesn't strip the semantics away but the from the CSS perspective that element doesn't exist. So like the children are still there but then from a CSS perspective like that's the content. There's no element there anyway. I'm not going to dive into it now because I can't think of a good example to build. Um, and again, be careful if you're using it, but there's definitely use cases where it can be good. The advanced ATR, I've talked about it. Uh, I love it. It's fantastic. It it works. I guess the annoying thing is having to declare the type, but I think this is very important in actually having it work. Uh, and one of the constraints we need to make it performant. So, or or maybe even work at all. I'm not sure. Uh, if you haven't seen, okay, we can look at a quick example. It's going to change how we write CSS. This is going to be now Twitch logged me out from chat. Um, this is going to be one of those really gamechanging things though of just how CSS is written once this comes in. Uh, let me just authorize that. So, we have both chats again on screen. And I do for the chat that I'm Oh, actually, I'm not looking at the dual chat now. I still have it split. Uh, another code pen tab advanced ATR. Did I call it that? I did. Um, so here we're so three columns at the top. I want four columns. I want two columns. And this is all working because I'm using grid template columns. And then it's taking that number and putting it as the repeat part right here. Uh, a bit of a simple use case in this case, but like that could be so useful when you know you want two or three or four or one or whatever it is and then it just plugs in. And then I'm wondering if we could actually use if else because now we have if coming to CSS. So you might even be able to do ifs to change the break points of where things are potentially here too, which could be kind of interesting um, depending on how you're setting things up. But yeah, I like every and you don't need the data in here either. It works with any it works with custom attributes as well, but you always have to be careful with custom attributes. Um, but yeah, I think like Tailwind's just going to be a whole bunch of attributes now instead of classes uh eventually. But just the there's a lot that we can do. Just the fact that we can pull an attribute in and use that value within the CSS means like modifier classes for a lot of things might not like we won't need them to the same level we have them now. Yeah, it's going to it's going to change CSS completely, I think. Oh, talking about if uh I'm gonna say I've used it. I'm not going to say positive or negative. It took me so long to actually get it working when I did it on the live stream last time. Um but yeah, sibling index is amazing. I have used it. We can do a really fast one here. Uh we'll do it even on this. Let's just say where's my background sibling uh background HSL the H is going to be a calc of sibling index times 10 oh sorry uh saturation we have 50% or no 100% saturation 50% lightness and there we Oh, super cool. Uh, love it. I have an error. Oh, cuz we already had that and that. It was working here. There we go. Uh, times five might look a bit nicer. Oh, maybe not. 10. 10 worked. Seven. I don't know. Whatever. I've done it. You get your rainbows and stuff or 20 or whatever. It can. Um, but it gets it knows what the sibling count is. So, 1 2 3 4 etc. And there is I think a sibling count, right? Let's just try. I haven't used that one. Uh, and before content, can I do that? Sibling count. I don't know if this is going to work. No. Um, can we Is it sibling count? Let's margin top sibling. It wouldn't be sibling count though. Sibling doesn't make sense. It's not child count, is it? I we have something like that though where it's like it just gives you the total number and then for each one of these they're aware of what they are so you can do different stuff. This is like the simple example like when you do media queries of changing backgrounds you wouldn't probably want to do this though it could be useful sometimes. Um but for other stuff I think it could be quite useful um when you want to index things. Um, Gadovi, we're trying to use the source attribute from images to set a background color and couldn't get it to work. I still don't think we'll be able to do that. Uh, maybe maybe that would work because you could maybe that could work. I don't know. Sibling count. So, sibling count is it but it wouldn't go here. It would go But used on the children, not the parent, though often needed on the parent. Yeah, I guess you could do like a and has uh has uh example of 10. No, none of these. One, two, three. That's eight. Let's just see if this works. Oh, no. has. Yeah, this is a weird example. I'm not sure how I would do it. You could get you could I can't think of a good example because I could count here, right? You can just do has and child eight. And if you want to know exact like, let's say background is red. So, they're all getting it. Let's take it off one of them and let's make one of them have an extra one. Copy paste. So like this is eight. This is nine. They're both working. But you can do nth child 8 and nth last child 8. And then doesn't that work? Something like that works where if it meets this is cuz this should close out here. Then the middle one should work. There's a way of doing this. Oh no, because that's going the wrong way around. There is a way. Uh oh. And this not last child and is also last child. That would work. No, there we go. So you can just if my eighth child is my last child, the background's red. So you can count children that way. Anyway, there's reasons that sibling the sibling index is super useful. Sibling count. We'll have to figure things out. Uh sibling. So this one I've heard of. I'm interested. I don't I haven't used it and I don't know what I would use it for. Other tools. Uh see this is where I was going to stop anyway. So it's kind of perfect. What CSS frameworks do you use? Do you use positive negative? Frameworks are libraries that give you pre-made. So when it says do you use this is always where I'm like does that mean currently use? Uh because I don't use any really. Actually that's not true. I have used open props and do still use it on occasion. That would be the only one I'm interested. This is where I'd put interested in pico. I haven't used it, but I'm interested in it. Which CSS in JS libraries? Again, do you use I don't do it. I have used some, but I don't currently use any and would prefer not to. Um, I still like SAS. I still use SAS. That would be the only Oh, lightning. Um, I haven't used it in a while. This is regular. Okay, I won't put it. I've used lightning CSS, but it says regularly used. Does this say this is just says use and here they say regularly. So, I still use SAS regularly. I do not use lightning regularly. What utilities or tools do you use? Uh, purge CSS prettier. I have used style lint, but I don't use it regularly. Uh, auto prefixer. Do they have I use this, but with this auto prefixer comes with it, right? Whatever. I'll put both. Um, it's interesting here. They have lightning CSS here and they have lightning CSS here. And even like uh I have something that minifies, but I don't remember. I don't know what which one it is. Um, it comes bundled and I don't Anyway, what browsers do you primarily work with in development? A question. Who uses Arc and is sad that it's dead? I saw a post the other day on like one of those big publications about like here's the best browser to use for everything. It was like 3 days after they announced that Arc was never like was dead and I was like, "Oh, that was bad timing." Um, for initial development, I tend to work in Chrome. initial development. I'll say Chrome because that's where I do work. Oh, I also use polyane. Yeah, I'll say both. Um, Ragnar all uses V. See, Vit has post CSS, which like Vit behind the scenes has post CSS and doesn't it by default use auto prefixer and there's something else that comes with it automatically? No. Um, Sean Liry, the reason I like having those at the the custom attributes though is I just feel like with the column count, again, it's not the best example in the world, but it just shows like how quickly you can do it where you don't need to have like if everything else is the same and it's just that one thing that's changing that you can do it, you can just control it there. again like separation of concerns with having it in the HTML or not, but not having to make like eight variations of the same thing as modifiers and just being able to like tweak it there I find is going to be really useful. finding the limit on where that goes um is going to be interesting because again everything could quickly you know like Tailwind's probably looking at that going we just need a one font size class now and then you can set the size through the data attribute which like to me that's scare like I wouldn't want to do that um and they could even yeah I don't know we'll see where that ends up going but there there's certain things that Um, I'm curious about All right. CSS usage. What form factors do you test on? Desktop, I don't test on feature phones or gaming consoles. Desktop with keyboard only, I do. Print, I definitely don't. PDF exports, I don't. Screen reader, I do testing, though I'm really bad at it, but I have started. Um, Sarah Suedane's course, Practical Accessibility, helped me figure out how to set up a screen reader. Um, I have a smartwatch, but I definitely don't test on it. Smartphone. Yes, I guess they have to call it a smartphone, but like, does anyone call them smartphones anymore? I don't really test on tablets. I don't have a tablet. I actually, that's not true. My kids have, but I don't tend to test on them. TV. No. Um, I do use some testing tools. Um, I have used I don't have like a specific one. Poly Pane has like a nice color blindness features in it, but I'm not going to count that as like something. Ragnar saying yell test when he's What kind of projects do you usually use CSS for? Blogs. Yes. Not really. Sort of. Nope. Thank god. No. Marketing? Yes. Mobile apps, no printed documents, thank god, no PDF, no web apps, sort of. I've built something recently, but does it say primary? Do you usually? Those would be my usually. Uh, which industry sectors do you work in? Education, entertainment, I guess. Um, social media. I don't think that's what it means though. I'll put the other two though. I don't even know. No, one second. I'm not really in the am I is am I in entertainment sector? Education. I I'll put for sure. There's no I don't work. That's true. Check all that apply. other would it be I don't work transport's not capitalized. Uh are there any existing CSS features that you have difficulty using or avoid altogether because of lack of support or the difference between browsers? Cascade layers I would have put in there but I think they're good enough now. I have avoided using them. Um scope What else? Nesting I had put off. Um, what's nesting at now? Anyway, I've started using it in a couple of things. I'm like, is this a good idea? And I probably should have checked. It's nesting's like I I have avoided nesting in some spots. I'll put nesting cuz like these are things where they're mostly for UX and lack of support just breaks things. like you can't use it as progressive enhancement. Um, is there anything else? I have avoided some of the color features like color mix. I'm going to put color mix. These are all just browser support things where like I I I've used it but I've also avoided using it because of browser support. anchor positioning I'm actually using in production because um I'm using it in a pretty simple way, but I'm using the polyfill and it's it works for all the stuff I've done. And I've also used anchor positioning as a progressive enhancement because I'm not using the polyfill on this site. Uh and if it doesn't work, it just doesn't line up here. It lines up on the outside uh instead of lining up here. So, I've used it as a progressive enhancement and I've used it thanks to the um polyfill Scroll bar stuff. Yeah. Scroll. Scroll. Scroll bar. Gutter. I've avoided just because I don't like it. Yeah, nesting is amazing. I mean, I use all of these things. I just don't use them if I'm going necessarily production. Nesting. I've I think I'm we're okay to start using it. I think for my audience. I don't know. It's probably like borderline. I'm so happy we have nesting. But quiz time. Oh, they put a quiz in. Oh, I'm not doing this now. Okay. I I've talked about this earlier, so anyone who was here like two hours ago will know the answer. I'm not doing this on the stream because you have to answer the quiz question on your own. Uh, what's missing entirely? I just talked about this. One second. Uh, what did I talk about? It's things that were coming though, right? Um, did I write in the description of this video what I talked about? I recorded yesterday. Oh, that's yes. Uh, at custom media is a big one. Custom env uh gap in block context would be nice to have. uh color contrast. Safari shipped the new I think it's called contrast color actually and I'm really disappointed with it. Um a few people Wow, is YouTube this far like that much lag? That's kind of crazy. Um but yes, entertainment. I guess entertainment would work. Okay. [Music] Um, how long do I wait to use a feature in production? I It really depends on the feature and how I'm using it. So, if I can use it as progressive enhancement, I'll use it right away. Uh, if it's something that I can if not I it depends on how broken the things would be. I've also used features where I can use like an at supports query. So again, it is sort of progressive enhancement, but you have to do a bit of work to like have a fallback. If I can have a fallback, it's one thing. It's one of the reasons I listed those other things here is like you can't have a fall back from using scope really. Um maybe you're doing something that where you're progressively enhancing it through that, but it can be hard. I put things into production. Ragnar grid autoflow area. How would that is that a thing? Oh, you don't you did and is grid autoflow grid autoflow. I I I know you talked about it on the Discord. Uh grid I don't know what it is. grid auto flow area. What would area do? It's not a thing yet. Is it a thing that's supposed to happen? How would it work? You autoflow into areas. So if you have defined areas and some of them are bigger, things would autoflow into the areas. Is that what it would be? So like you have like area 1 2 3 4 but two is like a bigger square like it's using four cells instead of one. If that's if if what I'm describing sounds right then I will add it to the list because that does sound useful. Is custom media a better way to manage different image? Um, custom media would be uh code pen. We can't do a real one right now. Uh, you can do it with post CSS preset DNV thing, but you do an at custom media small. And I don't remember the syntax of it at all. So, I don't remember how you'd define it. I don't even think it would be like that. It'd be like 6 500 pixels, let's say. I I I don't know the syntax, so that might not be what it is. Uh, and then you do an app media, and I'm doing this in the HTML. Doesn't really matter because it's not going to work. You do and then you could do a small and the custom envir, but you'd have the same thing where I don't remember how you do it either, but it's like custom env. It's not how you do it, but um you could have custom environment variables and then use them in the same way. I know then if you if it was that way it would just be env small instead. Um but yeah the reason that my understanding is the reason we can't use custom properties in like var here is because custom properties are defined like we declare them on an element. Media queries can't look at an element. They're looking before elements exist. uh right like even before your HTML element um they're looking at the viewport itself and so like it can't see the custom properties container queries could I guess be different but they still wouldn't work with that you weren't listening let's see uh let's check out this 2023 Uh grid autoflow grid template areas da da da area similar to row and column but areas are defined in the template and are used d area row start column end area row area column areas would need to be put in a one-dimensional array with areas in the order of the first appearance in the chain template major row order and any subsequent appearance not being counted. The top left cell of the area spanning more than one column or row would be the one defining the order of the areas once the area once the array of the area is defined items would be affected one by one. Any remaining ones using the implicit grid for placement. Yeah, that could be kind of cool. I think it's basically what I'd said earlier. Um, sorry about that. Secondly, it would be nice to add autoflow to match the flex direction. That's been resolved. Um, this hasn't got any traction. I'll throw that could be useful. I could see how that could be useful. Uh, I'll just put what you said. See if we can get any traction behind that. Where is the state of survey grid auto low area? That's the joy of spec is you have to have a lot of words to say something simple. Um, pain points favorite new features that I started using this year. I'm going to fill these out soon because I got to go. So, I'm going to do these off. Over the past five years, which feature has the biggest impact? Has question mark? Probably. How well are you able to keep up with it? Uh, I've learned about and tried most features because I'm lucky and that's my job. How happy are you with the general state of web technologies? Happy can always be better. So, I'm not going to say very happy. How happy are you with the general state? Actually, that one I'll put very happy. Uh, let's just look at what the next section is. I missed some questions. So, I'll go back. Programming related podcasts, program of the video creators, individuals you read, follow, etc., etc. Cool. So, yeah, I'm going to finish this. I'm going to go back to here so I can make sure I finish these ones. And I'll scroll to the top. Um, people said I should include entertainment, so I'll keep that one there. Perfect. So, thank you all for for hanging out with me. I'm getting messages now from Oh, no. That's something completely different. Which means my do not disturb is off for some reason. Uh, sorry. One second. There we go. Yeah. Thank you all for for coming and hanging out with me. It's been a lot of fun. Uh if you if there's any I I talked about most of these things or have videos on most of them. So actually no, somebody did mention and I should say was there any features in here you haven't heard of that you're excited about. Um I'd be curious to know like of the ones that we looked at today or covered if there was something like oh I need to use that now or I'm happy we have that or I wish I knew about this earlier or anything like that. Please do let me know uh in the chat and as people are coming in with answers for that we'll we'll start winding down uh on things and I'll just do a little bit of a quick uh housekeeping I guess of if you didn't know I do have a second YouTube channel where I was talking about some of these features and other things. I'll put the link to that in chat if I can find everything. Some Terry saying I hope Halifax is sunny and warm. It is. We're up to like 22 today. Yeah, it's 22 degrees out and sunny today. It's fantastic. Um, it's been really nice. Nin are saying the if feature, you somehow missed that. It is very very new. So, uh, that is one, but it' be nice once it's come in. There's more coming with if, but that's like sort of the first stage. It sort of builds on style queries in a way, but it has the advantage is it can look at that element rather than having to look at what's coming from above it. Um, which is cool. Uh, Matia saying calcize. Yeah, calc size actually was weird because I knew about calc size was coming and then when the um, interpolate size came, I they both landed at the same time and I was just like, wait, how come I hadn't heard of this one? Um, but yeah, there's so many good things going on now. It's absolutely nuts. Sunny is terrible for vampires. Uh, I'm enjoying it. We had some really bad weather. Actually, we've had really good week day weather and really bad weekend weather lately, which is never the best, but last weekend was actually nice. Um, and it's it's nice being able to go outside without a sweater on, but it's funny because it's 22, which isn't that hot, and it like I'm I'm used to the cool temperatures now, and it's been super super hot. Oh, thank you, Fun Dumbntal, for subbing. And anyone else who has subscribed, I'm just going to keep pushing subscribe to the channel so I can eventually maybe one day hit a million subscribers. Uh, I don't even know where we're at now or how much we went up by, but hopefully it went up a bit as the day went on. Oh man, I have this weird problem. There's AB testing now in in YouTube uh for thumbnails, but it does the AB testing when I do member only videos like or when I release videos early for members. And so like I just opened my studio to check the subscribers. And the last video I have, which isn't even out yet, it's completed the thumbnail test. And I'm like, but you showed it to like 40 people. Uh so um yeah, I have to redo the thumbnail test, which sucks. Anyway, doesn't matter too much. Um, that's coming out tomorrow. I have a CSS battle coming out tomorrow with uh Julia Miosen, which if you don't know her, check out her YouTube channel. Uh, I have it right here actually. So, I'll post it. Uh, it it was a humbling experience. I'll say that much. Mark saying sibling count and sibling index. Yeah. How long until the column and rule row rules are widely available prediction they're not even they're shipping in chromium probably it'll widely available will be at least three years I would say and all I think I hopefully Safari ships it relatively soon and then we have to um wait a while maybe for Firefox hopefully not maybe they'll surprise us but in every browser browser. I'd say it's going to be at least for all three browsers. I'd say within the year, I'm hoping. Seth, you did the snake game with gradients and no elements. Very nice. I have to get better at using gradients for those types of things. Also, YouTube recommends member only videos to non-members, which might hurt the click-through rate. Uh, yeah, I'm curious how that works, but it Yeah, I'm curious how that works, especially when it comes to the AB testing. That's that's an interesting thing there. Maybe I'd have to It's kind of annoying though because then I have to reset I have to remember to reset the test, but doesn't really matter too much. Renie the dev, it looks like you got here just in time for the end. I do apologize. The replay will be up for anyone who's missed the rest of it. And I still haven't found those numbers I was looking for. Um, I I don't know my way around my analytics at all. Uh, live subscribe. Oh, I think we did pretty good. Can I see like the last 24 hours? I can't even open this because I'm not logged in to YouTube on the browser that you guys can see right now. Last seven days I can look at. No, I can't even do it like short term. I don't know. Oh well, doesn't matter. Thank you for anyone who did subscribe. I do appreciate it. I don't know my score because I didn't submit because I want to answer some of the more questions. But I'll I'll let you know in Discord. Everybody's getting top 100%. Which makes sense because you Oh, no, you wouldn't be. I don't know. But it seems to be that everyone is. But I'll see what my score was and I'll let I'll let people know in the Discord. Uh Seth, you did you I did make you did make a video explaining the process. Nice. CSS naming conventions. There is BM and others and I'll have Yeah, you sort of have to find one that works for you and and stick with it. I think the with CSS naming conventions um it's so much of it is just about consistency, right? And if everybody's on the same page, that's the most important thing. The AB testing well can eventually get more views. It's frustrating because if I decide to watch something later, I remember what it is if it can be recognized by the thumbnail. Oh, yeah. I know. I've had the same thing happen to me where I'm looking and I'm like, "Oh, I don't think I've watched that video." And um or it wasn't the one because you're looking for the thumbnail. So, I I do I do realize that can be annoying. Um my on the plus side, they don't tend well, I vary them enough, but I try to make it straightforward enough to know what it is. So hopefully there is variation though because if not there's no point in doing an AB test. They are usually finished within like 24 to 48 hours most of the time though. Whoops. All right, I got to go for real. So thank you everyone for hanging out. It was a lot of fun. And next Thursday there's probably going to be another live stream where we're just going to muck around with some modern CSS stuff and have some fun. A bit more focused, not like little short demos, but build out something a little bit bigger. I think it should be pretty good. But with that I am going to say goodbye everyone., The State of CSS 2025 Survey, Kevin Powell, 01jxn1y26e96seryrbcyq42pk3.