20 Modern CSS Features You Should Know About

Hey friends, in today's video I wanted to go through some modern CSS features. So every year Chrome releases a blog post called CSS rep that showcases all of the new CSS features. And you're going to see there are some insane features like CSS having if statements and functions. So it's becoming an actual programming language. And also let me use a preemptive strike to say that even though some of those features aren't supported in all of the browsers, most of them have a polyfill that you can use. So let's get started. All right. So let's talk about an exciting new feature called invoker commands. So previously we had to use JavaScript for things like showing and closing models. So as I say to open a dialogue modely by clicking a button you typically need a non-click handler that calls the show model method on that dialogue. So you would query the element and then we would say show model. But now instead of doing that we can actually just use commands. So we can use the JavaScript equivalent by saying this command attribute we can say show model. And then to specify which model do we mean we can use the command for attribute. So you can use this ID my dialogue which matches the dialogue ID. As you can see in this example this is just using HTML and CSS. So you can show the model and of course it also works for popovers. And if you read more we can even have custom commands if I'm right. So as I say here this matches the JavaScript API. So let me zoom in. So we can see show popover. It's equivalent to element.sh show popover, hide pop over, toggle pop over, show model, close and etc. But we can also set up custom commands to send to elements. So for example, we can create this custom command show confetti and then we can say what element do we want. So we can say some element here using command for same as before. And then later in your beautiful JavaScript, you can add an event listener for commands and then we can check for the show confetti command. And if you want, there's also a polyfill that you can use. All right, so the next cool feature is dialogue light dismiss. So this brings a nice popover API feature to dialogue. One of the nice features introduced by the popover API is the light dismiss behavior of popovers. So this lets users close a popover by clicking outside of the popover. All right. So now basically they're adding this feature to dialogue. So let me actually show you this in their example. So here we have a dialogue where we open it. So you can see right now we can't click outside of it or I'm pressing escape. I can't close it. It just focuses it. So we can only close it manually. But if you use this new feature, so for example, close by attribute close request, we can do a light dismiss. So if I press escape, it's going to close. But as you can see, it's not going to close. If I click outside of it. So if you want that, we can say close by any. So this is going to work the same as before. I'm pressing escape. And now if I click outside of this dialogue, it's also going to work. So that's really awesome. All right. So let's talk about popover hint. So these are ephemeral popovers that don't close others. So if you didn't know, hint popovers with popover skin hint are a new type of HTML popover designed for ephemeral layered UI patterns such as tool tips or link previews. So opening a hint popover does not close other open auto or manual popovers allowing layer UI elements to coexist. And hint popovers can also exist on links unlike auto and manual popovers. And honestly when you read it like this it sounds like a bunch of gibberish. What do they even mean? It's really just basic. So for example, if you want multiple popovers that don't close each other, you can use this interest invoker interest for attribute to make it much easier to build layered UI elements like tool tips, hover cards, and preview declaratively in HTML and CSS without JavaScript. And here's how you use it. So use this interest for attribute. So you can say call out one. So we can reference it by ID. And then on another element, we can just use this ID call out one. And then we can say popover hint. All right. So in this example, we have a social media post. And now let's say that we want to see more save post and etc. But we can also hover over this link where you have comments to see who commented. And now we can see they are both on the screen. And this is basically what popover hint is. All right. So this is one of the more exciting features in CSS in my opinion which is customizable select. So now we can finally finally style HTML select elements with CSS. And if you're interested I made an entire video on customizable select in CSS if you want to see it. All right. But basically it's simple like this. So we can just target the select element and then we can use the pseudo picker select and then we can set appearance base select. So now we have access to all of these options like select select picker icon options picker option check mark and we have selected content. So we can swap the content when we select the element and it's even cooler than that because now the select also enables you to include and properly render HTML elements like image and span inside the options element. So you can do whatever. You can make any type of select menu that you want. You can make a radial select menu and so on. So let's look at an example. So here we have this selected content and we can just use this custom select menu. And now we can just swap the content out. And that's really beautiful. All right. So everyone knows what a pain in the ass carousels are. So this year creating carousels and other scrolling experiences in CSS became much easier with the introduction of two new pseudo elements, scroll button and scroll marker. That's right. Now we can use CSS to create buttons and control the carousel instead of using JavaScript. And I don't actually know or can think of any other CSS feature like that. So let's actually scroll down here. So you can see this example. So now we have these buttons just using CSS, right? So the scroll button pseudo element creates a browser provided stateful and interactive scroll buttons. These buttons are generated on a scroll container and can be styled with CSS. They behave like regular button elements are focusable and are automatically disabled when scrolling is no longer possible in a given direction. And then it says you can create buttons for any scroll direction, left, right, up, down, as well as logical directions. All right. So an interesting thing to notice that when a scroll button is activated, so when you click this and advance the carousel, it's going to scroll approximately 85% of the container in the visible area. But I'm actually going to show you how you can just scroll one item at a time. And you can even set the content of the button as you can see. So you can give it a name, scroll left or whatever. Use an icon, whatever you want. Right? So here is how it looks like. And then you have the scroll marker pseudo element which represents marker for an element within a scroll container. So basically you can use CSS grid or whatever you want to style these dots here using this. You can see here are the styles and it says like scroll button, scroll markers are fully stylable with CSS. You can use images, text or even counters to create a variety of marker styles. Yes, you can even have them numbered if you use CSS counter. And you also have this target current sudo class. So you can target the active one. All right, but let's actually look at an example. I want to show this. So let's actually open this in cold pen so I can show you what I mean. So here's this example. And again, this is not using any JavaScript, which is completely crazy. As you can see, it's totally blank. No JavaScript. But as you can see, it's just going to scroll to the center card and it's going to skip a bunch of items. But of course, if the screen size is lower like this one, then it's going to advance one by one. But let's say, for example, that you just want to advance from the beginning just by one instead of having this weird thing where it just puts the carousel with the most amount of items in the center, right? So, we can actually go here. Let me actually see. All right, maybe I can increase the font size so you can see what's going on. All right, so let's do that. So, here we have scroll snap align center. So, for example, if I say start now, you're going to see this card is going to put it at the start instead of centering it here. But we actually don't care about that. Let me actually show if you only want to advance one item, then we can say scroll, snap, stop, I believe. And we can just say always if I can type. All right. So now, let me move this. And now we can see if we use these buttons, we're going to advance this card one by one. How beautiful is that, friends? No JavaScript. So, here's a more complex carousel that makes use of anchor positioning also, which is another awesome CSS feature. Holy smokes, this would take like three hours if we explained every single thing. But let's actually just open it in cold pen. So, let me just bump the font size up. As you can see here, we have this anchor element. And now, again, it behaves the same as the other carousel is going to center. So, if we advance it, it's going to center day five. So, for example, if it's 1 2 3, then the next is going to be 4 5 6. But it's actually going to center it. So it is going to be day five in the center, right? So it's going to have day four on the left, day six on the right. And this is the same thing. So now we also have other things like the active scroll snap. So you're going to see it also applies some styles based on this. So if you're interested in that, you can explore the code. I'm going to have all of the links in description. And the interesting thing for this little thingy here, let me actually just go to the bottom to find it if I can. Okay, here it is. This is the plane. And this is really clever in my opinion. So they're using this material symbols outline phone family. So they can basically just say navigation and it's going to use this icon. I actually never seen this before. So this is really cool and I even learned something new. So let me actually show you. So if you go here to settings, you can see what they loaded. So they loaded this font material symbols outline and they only selected these few icons from it. So they have arrow back forward direction car navigation train and etc. So for example, if we go back here and instead navigation, you can say travel and it's going to turn into a plane or whatever. Let's see. Yeah, it's a plane. So basically this plane or icon is just position fixed on the entire page. And then we can use position anchor. We can specify active target and then we animate the inset. So we can say anchor inside. So now we're going to see when he changes it's going to move his position. Yes. As you can see, because it's positioned absolutely on the screen, I mean, it's using fixed, so it's going to behave a bit janky. But yeah, how cool is that, right? You can do some crazy things with anchor positioning, scrolls, containers, and etc. All right, so this is one of the features I'm super excited about because recently I had to implement a scroll spy, I think is what it's called, for a table of contents. So I had to use observers to observe what heading we're at, etc. to select the active thing in the navigation. It was just really annoying and unnecessary when we can just use CSS. So basically this is what this allows us to do. So in addition to the scroll button and scroll markers to the elements, CSS carousels include another neat feature, scroll target group. This designates an element as a container for a group of navigation items like a table of contents. And it says pair scroll target group with the target current sudo class to style the anchor element whose target is currently visible. So using this API to create a scroll spy navigation, we just need two things. A list of anchor links that point to different sections of your page. the scroll target group auto property applied to the container of those links. So let's look at an example. So it's really simple as this. So here you have a table of contents with some links and sections and then they just need to match. So we can just say ref section one is going to match this ID of section one. All right. So how it looks like in CSS. So we can just say table of contents scroll target group auto. And now we can target target current. And we can just style this however we want. All right. So here's an example. So here as I'm scrolling through the page, you're going to see we have this spy scroll or whatever it name. I really don't care. So we can just scroll this like this. This is so much easier than using JavaScript and observing these elements and doing whatever, right? And it just works. All right. So a while ago CSS added this amazing new feature called container query. So now we can do something based on the element size instead of having to use media queries and have a bunch of other container queries like style queries. So we can style the element based on its styles. In this example, we have anchored container queries. So let me actually show you what problem this solves. So here we have this anchor where we're specifying or we're creating a tool tip. So we can just say anchor name my anchor and then we have this anchor tool tip fixed and this position is going to be based on its anchor my anchor. So we're going to position at the bottom and we're going to reposition it in the block direction using position try fallbacks flip block and then we can make it an anchored query container by saying container type anchored. So by default it's going to use this upside triangle which is going to be position absolute and it's going to sit on top of the tool tip. But here is where container anchored is useful. So we can say add container anchored. So when it changes we're going to check the fallback. If it's block then we're going to swap this triangle. So the top fallback was used. So flip the arrow and we can move the arrow below the tool tip. So let me actually show you this in an example because you're not going to understand this otherwise. So let's open this code pen. All right. So let me bump the phone size up so you can see what's going on. So now when we go here to the styles first I'm going to remove the container so we can see what happens by default. All right. So now you can see we have this by default. And of course this triangle doesn't know where it's supposed to be. So now when we change this we're going to see it actually works like this. But of course we want this triangle to point down. So we can do this using this container query because we know what the fallback is. So we can just change the triangle. So you can see now it works as expected. And how cool is this? zero JavaScript. Interacting with user interfaces on the web is challenging because you have to account for all the different inputs and etc. For example, it might be easy for you to click with your mouse but it might be harder for someone else on a touch screen. So here is where interest invokers come in. So they basically make it easy to show an interest for something and display a tooly for example. So it says the new interest for attribute sold by providing a native declarative way to style an element when users show interest in it without fully activating it. It's invoked similar to the command for attribute, but instead of a click, interest for is activated when a user shows interest in an element such as by hovering over it with a mouse or focusing it with a keyboard. And when paired with popover hint, it becomes incredibly easy to create layered UI elements like tool tips and hover card without any custom JavaScript. So here is how it works. So here you have this button and we can use this interest for attribute. So we can use this id call out one and here we're using this ID on this div element and we can say popover hint and unlike command invokers which only work on button elements interest invokers can be set on links as well as buttons. All right so here is a demo that uses interest for to create product callouts on an image. So let's actually look at this example here. As you can see I can hover over these elements and we're going to see a tool tip. And of course I can also show an interest by tabbing over it. So I'm going to press tab and it's going to show the tool tip and I'm going to do the same for the other one. So let's go back and you can see this works beautifully without any JavaScript. All right. So let's talk about nextgen interaction. So we have scroll state query. So we can style the sentence based on whatever something is scrollable, stuck or snapped. So to determine if an element is stuck, snapped or scrollable, you could use a bunch of JavaScript which isn't always easy to do because you have to attach time on to scroll events and so on. But now we can use scroll state queries. So let me actually show this to you how this looks like. So here's an example. So here we have this carousel and then we can just say scroll snap type x mandatory. So you just check for the support and then here is the secret sauce. So we can say at container not scroll state snapped x and then we can style it. But in this example they're using something else. Usually their examples match what is shown but for some reason it's not in this example. So let me actually just show you. So in this example here we have at container scroll state snapped X and then we're going to change the translate to zero. So it's going to go from offscreen 100% to zero. So it's going to transition. So let me show you. So I can just use the scroll wheel and you can see when we snap it's going to change the style. How cool is that? Just a couple of lines of CSS, no JavaScript. All right. So let's talk about tree counting functions. How many times have you tried to use a stagger and then you have to use JavaScript. So for example here where we have this animations we just want to stagger them so they animate one by one right so for that we have to use a stagger but we don't know the position of the element so we have to set an attribute on the element using JavaScript or by hand so we can just stagger it and here they say it in this example so we have to define something like index one index two and etc and then we can use it in CSS but now we no longer need to do this because we have a new sibling index and sibling count functions which make our lives a lot easier and these functions provide native awareness of an element's position among its siblings. The sibling index function returns a onebased integer. So we have to subtract it. So it's zero representing the elements position while sibling count returns the total number of siblings. All right. So let's see how this looks like. All right. So here we have a simple transition. But now I want to stagger this elements as they enter the page. So we can say transition delay calcul.1 second times the sibling index and we want to subtract it by one because it starts at one. And of course, we have another cool CSS here, which is the starting style. So, we can set the opacity to zero and translate. And that's it. Now, we no longer need to use any trickery. It's just going to work. How beautiful is that? All right. So, let's talk about another cool feature, which is scroll into view container. So, in JavaScript, we can smoothly scroll to any element on the page using the scroll into view API. Like in this example where we have this carousel. So when I click any of these markers, we're going to scroll to a specific slide in the carousel. But the problem with this when you're using this scrolling to view API is when you click on a marker, it's just going to scroll to this container. So what we actually want to pass in is container nearest. So when I enable this, you're going to see now when I navigate this container, everything is going to work great. So it's not going to scroll into the container, but it's going to smoothly scroll to the next slide. So the only thing that you have to pass is this container option and say nearest and that's it. Next, view transitions are receiving an upgrade with nested view transition groups. So this lets you retain 3D and clipping effects while running a view transition. And if you don't know what the view transition in is basically layout animations for CSS, similar to the flip animation technique, but completely run inside of the browser. So here is how it works. So here we have a card. We can just say view transition name. We can give it an ID. We can say orful clip and inside of here where we have card image we can also give it a view transition name but in this case we can let the view transition know that they're related. So we can say view transition group nearest and then we can also preserve the overflow clip by using the pseudo view transition group children and passing it the card. So let me show you how this looks like. So first we're not going to use the nested view transition groups. So let's just slow down time and we're going to add some 3D. All right. So you're going to see the problem. As you can see, the image and the other elements are treated separately, which is not what we want. But here is where the nested view transitions come in. So we can enable it and you can see now it works properly. They're treated as the same thing. Let's talk about another cool feature which is DOM state preserving move. So usually when you have an iframe or a video and you change the DOM, they get completely destroyed and created again which loses the state. As they say here, using insert before to move an element in the DOM is destructive. If you move a playing video or an iframe using insert before, it reloads and loses it state completely. Well, now we have a new API to fix that called move before. It works exactly like insert before, but it keeps the element alive during the move. So, we can see this API where we have this document body move before we can pass this iframe and a new sibling. So, the video can keep playing and the iframe won't reload. So, let's actually look at an example. So, here we have this video. So, let me just auto play it. All right. So, now when we use the destructive insert before API, you're going to see it's going to get completely destroyed and recreated. But now, if I play this video again and I use the new move before API, you're going to see it's going to preserve the state. And if it wasn't obvious, let me do it again. How cool is that? All right. So, the last section contains one of the craziest CSS features like the advanced attribute function. So previously attribute could only be used within the content property or pseudo elements and could only return values as a CSS string. The updated attribute function expands its capabilities allowing attributes to be used with any CSS property including custom properties. What this means is that basically HTML attributes work like prop in other frameworks, right? So you can just pass whatever you want and it's going to be completely typed like strings, colors, length and custom identifiers. So let's look at an example. So with a new attribute we can set an element's color property based on a data color attribute and we can then parse it as a color that CSS can understand. So here we have color we're using attribute and then we're getting this data attribute data color. Now we're using types is this TypeScript this is type CSS right and then we're also going to set a fallback. If we can find it then it's going to be red. In this example we have the stars here. Then they have another example where we can use it for view transition when you have multiple elements. So we can assign it an id. So here we have view transition name. We can use attribute id. Then we can specify a custom type custom identifier or we can say none. So here is an example how we can use it for a star rating system. So here we have this CSS variable percent field. We're going to use caulk. We're going to get the rating from the attribute. We're going to cast it to a number and then we're going to multiply it by a percent. And then inside of this gradient, which is really clever here. So they're using these stars as a mask because this is just a yellow background. So here we have a linear gradient. We can use the percent fill and we can use this transparency here and again percent fill. And then we can also use the after pseudo. So you can say content attribute data rating. So we can also get the rating. And let me actually show you how clever this example is. So this is really just a regular yellow color using this gradient. But here we're using a star mask which is really clever in my opinion. But yeah, now you can pass whatever you want to data attributes. Next, let's talk about event source. So we can find out which element was responsible for toggling the target. So when a popover dialogue or details element gets toggled, it can be interesting to know which element was responsible for toggling it. For example, knowing if the user press the accept cookies or reject cookies button to dismiss a cookie banner is a very important detail. So for that, we can use the source attribute inside the toggle event. So let me actually show you how this looks like. So here we have this cookie banner. This is not important but later where we get the elements. And now when we add an event listener on the cookie banner for toggle, we can actually check the event source if is the button yes or button no option. And then we can do the appropriate action. So let's actually try it out. Would you like a cookie? Let's say no. All right. So no cookies for you. Let's show the cookie banner again. And now we can do something else based on our answer. Next, let's talk about another incredible feature which is textbox features. So, how many times have you had some text inside of a button or whatever and then your designer was upset at you because it wasn't properly centered? And that is because text has some weird white space, right? Or some line height. So, you had to play with that, do some hex or whatever. Well, no longer. Now, we have textbox features like in this example. So, we can just specify something like textbox trim both cap and alphabetic. So, let me actually show you how it looks like in this example. If you don't care about any of these, this is the CSS that you're going to use 99% of the time. So, for example, if we revert it to none, you're going to see we have this spacing in this text, which isn't what we want. So, it's not going to be properly centered, but you can actually trim one side or the other, or you can say trim both. And then you're going to have perfectly flush text. All right. So, next we have the shape function, which is a great CSS function for complex responsive shapes. So, the new shape function lets you clip an element to a complex non-poly responsive shape in CSS. And this is a great option for clipping mask using clip path and works seamlessly with custom CSS properties to define coordinates at control points making it more maintainable than SVG shapes. This also means you can animate your custom properties within shape to create dynamic and interactive clipping. So, in this example, we can see a simple flag using this new shape function. So, here's how it looks like. So here we have this clip path shape and then we can say from curve 2 vline 2 curve 2 width and then we can close it. And this syntax is much simpler than the usual clip path one. But of course you can use this blob generator if you want to create interesting shapes without having to do it by hand. Next is the coolest feature that's part of CSS now and that is if statements. So now you can finally have conditionals in CSS for dynamic styling. As it says, the if function in CSS let you set different values for a property based on a conditional. So let's look at the syntax. So the syntax is straightforward. The if function takes a series of condition value pairs. You can have more than one. So we have condition one then the value, condition two, then the value. The first condition that the value is to true will have its corresponding value applied. You can also provide an else fallback value. So currently if can be used with three types of queries media, supports and style. So let's look at an example. So we can create a responsive layout that changes from a column to a row based on the viewport orientation. So here where we have flex direction, we can say if then we can use the media orientation landscape query and then we can set it to a row. Otherwise we can set it to column. And we can see in this example this approach is more concise than a traditional media query which requires you to define the styles in two separate places. So we can look at this example. Let me just open this. Actually I can't resize it here. All right, let's open this in Cold Pen. Let me just bump the size up. And you can see we're just using an if statement. Cool. No media query required. How cool is that, right? And it works beautifully. So you can see the code here. If media orientation landscape row otherwise column and of course we can use other types of queries such as supports for feature queries or style for style queries. The next incredible feature that's been added to CSS are custom functions. So now we have reusable functions for cleaner, maintainable styles. So CSS custom functions are a fantastic new addition to the CSS language and make it much easier to write composable, reusable and clear functional styling logic. A custom function is made up of the add function statement, a function name prefixed with a double dash, a series of arguments, and a result block. The arguments can also have default or fallback values. So an example of a simple CSS function is the negate function which returns the inverse value of a number. So here we have at function negate where we pass a value then we have the result. So we can say calcus one * the value and here is the usage. So we can say padding and now we can use our custom function negate and we can pass in the gap. There are many ways you can use functions in CSS. Ultimately we'll likely see new patterns emerge. For example, you might store CSS utilities in a util.css file that contains multiple functions. So let's see one of their favorite CSS function is the conditionally rounded border radius. Okay, so I remember this example. So basically they're creating this conditional radius. So if the image is closer to the edge then it's not going to be rounded. And they're using this using this simple conditional radius function. So they're passing a radius argument and edge distance which has a default value also which is really cool. So they're using this clamp here to create the radius and then we can see how they're using it. So in this box they're saying all right this border radius we're using this custom function conditional radius and we're passing one ram. Then we also have this second box which we're also passing one ram but we also have this edge distance which is 0 pixels. All right. So if you look at the example again let me open this on code pen. Bump the font size up. So now we can see that we have these rounded corners but as we approach the edge they're going to disappear. So now we can see how this looks like. So this is one example out of many for what you can use custom functions in CSS for. All right. So the next cool feature is that expanded range syntax is coming to style queries and if statements. And if you don't know what the expanded range syntax is, it's already available for media query since forever. So if you aren't familiar with that, if you remember this screen where you have to specify max and etc. And you can never remember what exactly you need. Well, now you can just use the expanded range syntax with this operators lower than, higher than and etc. So instead of doing something like this, you would just use this and it's way more obvious what it means. Here we have another example where you would have to use cringe like this min wave and max wave. Now it's way easier using this syntax. So basically the expanded range syntax is coming to style queries and if statements and that's basically it. So now if you look at an example. So here where we have this container style if the rain percent is over 45% then we can style this car differently. And we're using all of the tricks that we learned about today like this attribute. So we get the data rain percent. We cast type it to the percentage and everything is awesome. And of course you can also use them inside of if statements. So here we have if style rain percent is higher than 45% then we're going to use the blue color. Otherwise we're going to use gray. So now we can style these cards accordingly. All right, so the next feature is a bit hard to wrap your head around, but basically we have this new sizing keyword called stretch. So we can make an element fill it containing block regardless of the box sizing. So it's easier to just show you. So here we have this element. Instead of saying height 100%, we use the stretch keyword. So let's look at this example. So here we have height auto. You can see that you're taking 100% of the element plus the margin or whatever. But if you use the stretch keyboard is going to take that into account and is going to take the necessary space. And that's basically it. All right. So the next feature we're going to talk about is corner shape. So now we can use corner shapes beyond rounded edges. So we can create things like squirles and etc. And if you never heard the word squirle then I'm really jealous of you. All right. So let's look at an example. So here we have this example. So now we can create this round shape. We can specify it to be whatever we want. Here we have this scoop shape. So we can create more interesting shapes like bevel notch. See? Oh, this is really cool. We have a square. Actually, nothing changes here. So I have no idea what you're doing with this square. All right. So here is a legendary squirle. You can see it's not completely a circle, but it's also not completely a square. So it's a squirle. All right. And we can also change this. All right. So you can have more interesting looking elements on your page. Right. So this property opens up a world of creative possibilities apparently from flower-like shapes to hexagonal grids and even enabling a simple squirle. They really love their squirles. So this feature is small but mighty. You can even animate between different corner shapes for dynamic and engaging user interfaces making this a great option for hover effects and interest states. So you can see they created this flower using this. So this is how it looks like. So we have top left pedal. We have this grid area. We say corner shape round round scoop. So we can specify each corner separately. And then we can say border radius 50%. And for even more control, you can use the super ellipse wow function to create any continuous curve allowing for fine-tuned and unique corner designs. How beautiful is this, friends? All right, so this concludes all of the features that were introduced in 2025. So, thanks to everyone who contributed to this post and I hope this video isn't so long. It took me hours to record. But anyhow, catch you in the next one.