 We'll get into this in a minute, but my name is Bryn, today I am going to be talking to you about CSS and all the fun things we can do with it now. So hopefully, you'll learn something and if not, we'll just probably have a good time. And if that's not also the case, you can speak to me after and we can talk about something more fun. So the first thing I'm going to get you to do is I'm going to get as many people feel comfortable scanning this QR code. There is not a virus or something waiting for you. But fun. Pretty much, bar maybe 3% of things is everything is CSS or browser APIs. I'll have that caveat, except that that's JavaScript. CSS is not that fun. So when we see some stuff we like, just spam the button and it will make me feel like I'm doing a good job. Or you can also do the inverse by not pressing the button and make me feel like I'm doing a bad job. So cool. I'm Bryn, I work for a Canberra-based business called Pragma Partners. I'm just a person that likes the internet. I don't really want to be a name. But yeah, I love CSS. And yeah, that's about it. I'm not really that interesting. OK, cool. So I'm about to do some scrolling. It'll look like it's not scrolling because you're not doing it, obviously. And it might be a bit fast because my fingers are a bit weird. But I'm going to scroll. You can see my little scroll bar on the side. But all of these animations are all done in CSS with some new CSS stuff when I get down. Don't worry about what it says. We're going to just zoom past here. We'll explain it later. But it's just like a showcase of what's to come kind of thing, except this one, because this is true. Everyone should love CSS. If you don't, you're not in the right talk. Cool, keep going down. We're going to get to some cool side-scrolling business. Well, right-clicking. Ignore that. That's the past. That's old CSS things, how we got here. No one really cares. We're kind of in the future now. Get down to my little button. Oh, no, my page's loading. Each page is an actual, yeah, cool. This is my very cool slide. That's very CSS heavy. Ah. Yeah, but these are things I'm hopefully going to talk to you about today. And if we don't get across them all, it's because I got caught up in my brain. Cool. Oh, bro. Yay, View Transitions API. Yeah. Oh, yeah. I'm going to have to go back, aren't I? There was a QR code before. You could have scanned and had some fun, but that's all right. I'm not going to go back because it might break again. We're going to talk about trigonometric functions inside of CSS and what that might mean for people that didn't like Maths in high school. So this is the classic tan, cosine, sign, Pythagoras guy with a beard. Yeah, basically, we're going to use that little wavy thing. All users trigonometry. And our magic source is that one. And no one really needs to know what that means. It gives you a number between 0 and 1. That's the gist of it. And we're just translating up and down with an animation delay. And it looks pretty, but it's not that interesting, I guess. But the main thing is that we don't have to have any magic numbers anymore. Well, for the most part, we can use trigonometry to give us predictable numbers all the time, so no more like 57.5 pixels for some random reason. And to show that this is using actual trigonometry, we can run this ball around the edge. And that's just updating a CSS custom property. That's using JavaScript, don't you? But that's just updating values. And we're doing a fun thing. Stop that. Cool. And then we made this cool thing with trig. Yay, fun things. Yeah, I probably should have had some sort of warning if you don't like bright colors and moving bits. But yeah, we're just using trig to offset all of the diamonds from a circle, and then just rotating them. So really not that impressive, but it looks cool. All right, now we're going to talk about CSS nesting, which anyone that's used CSS and enjoyed it probably has seen something like that before, but it was not with native CSS. Your browser, Fingers crossed, now supports this kind of syntax. And we get some cool things out of the box with that. So we can nest like we do in like SAS or SCSS kind of things. I'm going to go through some stuff here. So we may have had something like this in the past. We can now have stuff like this, which will now be even better with our isSudo selector for all the cool kids in the house. We can now write our CSS to be a lot more like lean, much more readable. And it's just, I don't know, anyone that's tried to write vanilla CSS in the last five years probably knows the pain. Yeah, you might need to ignore my transitions when they do those weird things, but it looks cool. We can nest media queries inside of our elements just like SAS now. So we don't need to have a preprocessor or a post processor if we don't want to. I found helping other people, this is really good if we want to provide like a bit of CSS in like our Drupal module. That's been super handy, actually. I don't have to write crazy files with lots of long selectors. And a one gotcha that kind of stumped me a little bit was the ampersand behaves differently in like native CSS nesting because your browser has actual knowledge of the object from the DOM. So I'm not quite sure if that actually would have produced anything meaningful in like SAS or whatever. But if we were to do this, it goes and references the card element or the card selector and then just appends all of these. So the ampersand's actually referencing this. So we can make like a sort of half parent selector with it. It's kind of wild. You can do some cool things. Yeah, so in SAS we may have done like card ampersand dash dash header, very BEM-esque. But that does not output card dash dash header in our like compiled file. So when we go to using this, just know that you probably can't just copy and paste your regular CSS or SAS files. All right, everyone's new favorite thing, or at least mine. I've used this bad boy like nothing else that has selector. In most cases, this is a parent selector, which CSS hasn't had before. But it lets us do some crazy cool things. I have some examples in here in the last one I didn't because I don't really know how to give an example of something that doesn't output much. But we can see here that we might have a card. And if it has an image inside, I want to update the padding. That's a pretty basic example. And that will give us something. Hopefully when I click this button, oh, yeah. Yeah, so that took some testing. I've rebuilt Google Slides in Astro. Let me suggest don't do it. But it works. Basically, if this has a caption, I want the border. If it doesn't have the caption, all that button's doing is removing the caption from the DOM, and the border goes away. So at a pretty low level, you can get a lot of value just by having a few has selectors. Yeah, bro. Let's go. That's fire. All right. So this is not a demo I've come up with, but someone with a way giga brain than me. But it works. So in this demo, we're going to have a perfect grid using has. And it's going to check if our layout adjusts. So if we go tall or wide and we add some boxes, we're always going to have the perfect grid. That's not going to be a good perfect grid, is it? This one will be, though. If we go tall, wide, we can use has to make sure we're always having the right amount of, if it's landscape with a container query, we'll get to those. We can check how many items there are, and we can just position them all in the right spot with CSS Grid. So has is pretty awesome. My suggestion is as most people should start using this now. The add button triggers a view transition and adds a DOM element, but that's it. So I mean, it's mostly, like I said, yeah, there's magic. Is it ported by my music? No. So. I'm leaving. Please do. I've tried on most of these pages to have the little icons at the top. If they're green, you Gucci in latest browsers, pretty much. If they're yellow, there's a flag. If they're red, cool. All right, so container queries are also, like, probably in that realm of has. It's pretty groundbreaking. We all know what a media query is, and we kind of hate them because our whole website has to adjust to the size of our window. Everything is based on it. With a container query, we can tell our CSS which contain, like we can create a container and tell CSS, I want you to not worry about my window, but worry about this element. And we can now just build our components in more of a vacuum than before, because it's not based on the window anymore. It's based on the size of the container that we define. This will all make sense in a minute when I actually show a demo. But basically, we get access to this container type. And there's, like, two properties for that, inline size and size. For the most part, you probably want inline size. Be careful adding these things, because containers have their own stacking context, which I found out, which is, yeah, can break things. You can also name containers as well. I'm pretty sure that's on the next slide. But we have access to this query, container query now. And we can basically say, if our container is bigger than 700, I want my cards to be a bigger size title. Yeah, cool. I did do it. Cool, container name is also a new property that we get. And we can say, a container sidebar, which is just the name of this. Basically, if we've got a container named sidebar, please just listen to that one instead. Cool. All right, so here's, like, this small demo. Basically, if we make them big, it'll tell you they're big. And this is using container queries. So literally, this is all CSS, and just using the content, like the property on the pseudo element to put in the text and stuff. But all the container queries are, like, changing the colors, making sure that their sizes are correct, and just using grid to make sure that there's actually not just one size all the time. And then we have this cool demo, where we might have a house that just gets bigger and bigger. And this is all CSS, no JavaScript, no magic this time. Just lots of typing, really. All right, view transitions. These are based in Chromium browsers at the moment. But I think we could get a lot of wins in Drip with these, actually. Basically, my whole talk, the whole presentation, is using view transitions between every slide is a new page, essentially. But these are browser-level APIs. And when you turn them on, you basically get lots of pseudo elements. Basically, what your browser does is takes a screenshot of the current state and the future state, and then based on what CSS properties you apply to those things, it figures out all the things in between. So you don't really need a spa app to have cool transitions. Like, the really typical one is you've got a card with a picture on it, and you click it, and then the image slides into the header. I didn't do that. I did this one instead. I'm going to use my keyboard for a second, because it's a bit smoother. So each one of these is just like a checkbox, a bit of hack with pictures. But as I go down, it's using view transitions to transition between state. So it's not actually pages, but states. So all the animation between all of the items is a view transition. So you can get some pretty quick wins on some pages to make them look a bit more lively. Yep. Cool, scroll-driven animations. At the start, I went a bit crazy because I was skipping over it because I knew that this was coming up. Surprise, surprise. Basically, there's this animation timeline, and then the scroll property. And we can attach the root to it. So that's basically saying, when I scroll on my page, and this thing is in view, can you please run this animation based? And instead of saying like one second, it's the timeline of the actual scroll, which I'll show you in a second. I didn't really think about this, but scrolling demos aren't the greatest for these kinds of things, but you just have to believe me that I'm scrolling up and down. So basically all this does is the animation just shifts them up and down. And the animation timeline is the thing that's like controlling their duration. So no more GSAP maybe, I don't know. That's probably a lie. But we can do a lot of cool things with this, that's for sure. Cool, now time for some more bonus fun things that are not as fleshed out as some of these other ones, but I thought that would be cool to talk about. Has anyone ever wanted what they thought was a radial gradient, but not? We can now do conic gradients. So our radial gradient goes from the center out and goes like that. Our conic gradient just draws a line all the way around. So some cool things we might be able to do with that is a cool animated border with some sort of backdrops. Yeah, wow, cool. Wow, it's real. Yep, no JavaScript for that one. You could probably go to Array. Cool. And then this is where it gets a bit dicey with the demo, but believe me, it works. We're going to talk about style queries, which is an extension of container queries. But I also just wanted to have some styles and stuff in my talk, so I put this slide in. Going to talk about style queries. I also wanted to use this demo as well, so we could have just done this with classic hover, but we're going to use each of these hovers here. Just sets a CSS custom property value. So it's probably better in code to show, but I just wanted to show more scrolling things. But basically, when we hover over these, we're using a style query. This is not a great demo because we can do this with hover. But basically, it updates a CSS custom property to just another value, and we're using CSS to check for that, which if I just, yeah, cool. I am going to get into the code for a second. Cool. Well, those are the changes I made right before we started. There was this spinny grid zoom in. So you can see here we have this like app container query, and it has this style on it. And all that's doing is checking for when hover changes to one, and then running that stuff underneath. Some really cool things that you can do with that is we can measure heights and things. That's wild, actually, being able to change our cards. Cards is a super easy example. But be able to change elements based on the styles within them. We can check for background colors. We can check for any property that lives in here. So even if this filter was grayscale, we could literally change it back to not. But we can get a lot of cool accessibility wins out of the box with style queries. We're not quite supported yet. But hopefully in the next year or so, we'll be cooking. But yeah, there's about 10 minutes left, nine minutes. If anyone has any questions or anything, or you had a CSS problem, I can probably help you. Like IT support. Or if I went over something too quickly. Or we can have an early mark. Oh, yeah, I use Wear all the time. It's really good because it nukes your specificity. So it's really good for resets and stuff. I use Ears a lot. Has, obviously, out of the three of them is arguably the most powerful one, and the one that most people will find value with. But I think they're all good in their own use case. Yeah, CSS in general didn't really have a way to be able to select a parent based on the children within it. But now we've got one. So we can all rejoice for that. Yeah. In a current project, I have a few modules that update the Drupal admin. And they just use native CSS nesting because I don't want to have post-css have to go and check in my module folders. It's pretty good. Yeah, that's a problem. But yeah, I guess you could just have it as a progressive enhancement. Yep, I was going to say you just look at it and it's broken. But yeah, Firefox will tell you. And your Chrome Dev tools are also pretty good. I prefer the Firefox tools. They've got better grid inspectors in my opinion. But for the most part, I did just look, Jank. Stylin. Yeah, I guess you could probably configure Stylin. Yes, I will also open source the half baked Astro dex for anyone that wants to go down that path. I don't know. Yeah, don't recommend. Yep, absolutely. All the places. Make all the transitions. It's a free win on cards, right? Most cards, if they have an image, the same image appears on the next page. It's a free win to just give people some richness in the user experience, I guess. Other things might be you've got a timeline on your page. Now you don't have to scroll for a lifetime. You can just use the transitions to transition between states in a timeline, I guess. Of course I can. Yeah, woohoo. CSS only, yeah. That's my jam, that's all my code pens are. CSS only, something or other.