5+ CSS Features That Will Change How You Code

recently CSS has been cranking out tons of new features that radically change how we write CSS I mean just look at some of this code over here and you'll see that there's some crazy CSS being done in this video I want to share with you five new CSS Concepts that are either already in browsers or coming very soon that change how you're going to write CSS [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and there are so many new features to talk about and my favorite one I'm saving until the very end because it's kind of complex that this first one is scoping and it's a relatively simple concept to understand in CSS essentially imagine we have this HTML where we have this title here then we have a card which also contains a title and then a body which contains a title inside that card as well well imagine that the title for my article should be green as you can see over here but I want the titles inside my card here to show up as red normally if we want to do that in CSS we could just select our card and then we could select the title elements inside of it we can say that their color is going to be red if I save you can see that now the title of the card and the body title in the card have changed to Red while the title out here has not been affected at all now this is normal CSS selector hierarchies that you're all used to but if you're more used to working in a component structure like something like Astro react spelled view you may be used to the idea scoped CSS where essentially your CSS is scoped to a particular component inside of reactor Astra whatever framework you're using and having this scoped CSS makes it really easy for you to write your CSS so you don't have to worry about Styles leaking out to other places for example here this title here I don't have to worry about this title style leaking out anywhere else I can just refer to it as dot title and it's going to work just fine without leaking out everywhere and that's where the at scope property comes in for CSS so we can come in here with an at scope property just like this and inside of the parentheses for this we mentioned the element we want to scope this to in our case we're scoping to the card element and then we can write all the CSS we want inside of here as normal with any selectors that we want now you can see when I save I get the same results as I did before that's because it's taking all the CSS inside of here and it's only applying it to the elements within this card element the really great thing about this is I can actually just say you know what I'm going to select every single div it's only going to select the divs inside of my card as you can see it select this div here while these other divs with the class of title those ones are staying green and that's because I have this overarching title green class being applied to them this almost demonstrates a little bit of why you want to have this scoping because if this H1 here was inside of a scope let's just create a class we'll just call it scope it doesn't really matter what the name is we'll put that inside of there and now we can scope this to be within that scope and now you can see that that title style is now no longer leaking out and all of these are changed to Red just like I would expect them to be and you don't have to worry as much about specificity when you do something like this now this is really great and you're probably wondering well what is different about this than the other style of just doing Dot card followed by the title well there's a couple differences one difference that you can see inside of this is that it doesn't change your specificity for example this still has the same specificity as it did before which is why when I did it before this title green color was overwriting this while if I changed it to B where I just had Dot card followed by my div like this now you can see that these are all red and that's because this has a specificity of one class one element while this has a specificity of one class so obviously this is more specific we go back to this scoped version here though the scope does not take into account any specificity so this has a selector specificity of just one element which is less specific than this title here which is a class now that's a lot of complicated stuff but essentially scoping doesn't change your specificity which is one huge benefit another really big benefit is you can actually limit where your scoping ends so let's change this back to title here so my titles are going to be read here but I want to say you know what I only want to do things that are inside my card that are not inside of a body I want to end the scope at the body element well I can do that by just saying 2 and then in parentheses mention where I want to end this so I want to end this at the body now you can see that this body title has changed back to the text of green that's because this scope only lasts for everything that's inside of a card but not inside of a body so it's a really good way to scope different things inside of a particular subset of elements which I really love now the thing that I think takes us to the next level and makes a really useful in Frameworks is you can actually remove this from your normal style tag here or script tag and instead embed it directly in your code for example I can say that I want to have a style tag here and inside of here I'm going to have an at scope and I'm not going to specify anything for the scope and then we'll say here title is going to be red now you can see what's happening is essentially when you do a scope with nothing specified as the scope it looks that the parent element the element that's above this style tag and it uses that as the scope so we're using this card element as our scope so everything inside of that card is going to be using these scoped classes right here which is really really cool and we can do the same thing where I can say you know to the body so that way the body elements aren't affected by this scope and this combined with some of your normal CSS and JS kind of stuff that you're using in reactants felt and view is a really great way to have this implemented directly in CSS without having a bunch of JavaScript stuff handling it all for you now unfortunately browser support for this is pretty abysmal if we look at the page here you can see the support is essentially zero percent it's only supported in the newest version of Chrome so I'm using the Chrome Canary version on the absolute brand new version and that's why I'm able to get this to work but everywhere else it's not supported but hopefully it'll come to browsers relatively soon I think it's a pretty cool feature now this next CSS concept is quite a bit simpler and best of all it's actually really well supported in browsers as you can see it's at 86.8 percent essentially it's supported in pretty much every major browser as you can see which is really great and that is an extension to the nth child selector so we know for a fact that we can select the nth child so here I have a list of elements as you can see down here and what I'm doing is I'm getting The Fifth Element and Crossing it off with a line through it as you can see this fifth element has a line through it relatively straightforward I'm also here trying to select the second element with the special class and put a line through that you'll notice this element doesn't have a line through it that's because of the way that nth child Works what this code right here is actually doing is it's saying inside of my list I want to get a special element and I want to get the second element so what it's saying is I only will cross out an element if it's the special element and it also happens to be the second element in the list it's not getting the second element of that special class it's getting the second element that also has that special class as you can see if I change this to four you can now see it works because it's giving the fourth element and that fourth element must also have the special class but how do we get it to actually select the second element with that particular class well the to do this what we need to do is just do our normal selector to get the second element as you can see that crosses off the second element here but what we can do is we can add in here this of property and then we can specify a selector for example dot special and now when I save you can see it's actually Crossing off the second element with that specific selector so the way that this is working is all we're doing is we're saying Hey I want to get whatever my nth child is you know this could be like 2N 2 2N plus 3 any combination of and the child stuff that you would normally write and then you just give it the word of followed by any selector you want this could be as complicated or as simple as you want the selector be in my case it's just a simple class selector and now it's going to select the second element of that class if I change it to three you can now see it's Crossing off the third element of that class and four will finally cross off the last element with that class this is a great way to select elements based on different selectors now one particular use case for this is a table so I'm just going to change up my code here I actually have this example I'm just going to uncomment all this code so we can actually see what's going on there we go as you can see we have this table on the right and I'll get rid of all of this code because I actually have a separate style tag to show you what's going on inside here so this table is just a relatively standard table and what I'm going to do is I'm trying to give it some striping so you can see every even child I'm giving this background color but the problem is I have the ability to hide a table Road and All Hiding a table row does is add the class of hidden which just gives it a display of none so it's still in the Dom it just doesn't show up when I click on hide you can see the striping in my table gets messed up it now goes a white row followed by gray followed by gray instead I want to essentially stripe every other row that is visible so we can again use that of selector here I can say of I want to get all the elements that are not hidden so I can just use a selector the not selector to get all the elements that aren't hidden now when I give this a save and I hide a row you can see my striping reflects what these different changes are so when I hide something you can see all the striping gets updated throughout the entire rest of the table which is really really cool now this next CSS property is one that's really common whenever you're working with text in like a book format and that's when you want to make this first letter extra large this is something that's been around in CSS forever but there's a new feature being added that makes it easier to work with for example I can select the first letter of any section of text that I want and I can change the classes on it for example I can make the font size larger or the color red now one downside to doing things this way though is if I increase my font size you'll notice it gives me this weird Gap at the page here after my first line that's because when you have a really large font you can see that the space below that font increases drastically compared to these other letters that have a much smaller space below them that's because the font is larger so instead of directly changing the font size you can instead use the brand new initial letter property this initial letter property it has really good browser support if you look at this it may seem like the browser support is bad it's at 86 percent right now the reason it looks like it's bad is because initial letter includes two things it includes this initial letter property as well as initial letter align and no browser supports the Align property yet but almost all of them support this initial letter property so the browser support is quite good what this lets you do is Define two different properties the first one is how large you want the letter to be if I want it to be three lines of text I can set this to three now you can see this letter takes up exactly three lines of text there's no weird spacing going on it just takes up three full lines of text the second property determines how many lines I want to offset this by so if I say one you can see that this line is going to show up on the first line of text the bottom of this is on the first line if I change it to two the bottom of is going to be on the second line if I change it to five you can see the bottom of this is on the fifth line of my text so it allows me to offset this vertically as well as determine the actual size of my font based on how many lines I want it to take up this is really cool since again it doesn't mess with your spacing and it gives you much more flexibility to give you the edge stack Styles you want if you just pass it one letter it's going to use the same value for the first and second property so it's going to be three lines tall and start on the third line now this next property is something I'm super excited for it actually ties into my favorite property which I have at the very end of this video but this property essentially allows you to animate things that change the display property so here I have some really simple code where I have a button that allows me to toggle a card you can see when I click this it's toggling the card to show and hide itself then I have my card here which just has some basic Styles the important styles are that by default my opacity is set to zero my transition is set to a opacity of one second so it'll transition over one second my display here you can see is set to none also when I show this element the display is set to block and the opacity is set to one if I come over to here in the side of the JS code you can just see when I click on the button I'm toggling that show class to hide and show this element now the problem is you'll notice I don't get any animation at all when I click on this it just shows up there's no animation of it slowly fading in and fading out that's because when you change something from display none to display block or any other display property this is called a discrete value inside of CSS it's either a value of like 0 1 true false you cannot animate between those because it's either yes or no there's no maybe in between so since you can't animate between display none and display block it just shows up immediately so there's no time for it to transition between your different properties for those a new CSS feature you can add that essentially tells you hey when something just appears like the display property goes from none to block I want some starting styles to be applied that I can do transitions or animations from so all we do is we say at starting python style and then inside here is where we Define our starting Styles so what I can do is I can say okay when this thing appears for the first time essentially I want the opacity to be zero now if I give this a save and I toggle this you can notice I get that fade in effect because my starting style is saying hey start this out with an opacity of zero now when I toggle it to go away it's disappearing without doing any opacity fading which is a bit of a bummer that's actually a feature that is coming soon it's just not currently in any browser right now and the way that you would get that fade out feature to work is that browsers are adding the ability for you to essentially fake an animation on a display property so inside of my transition I can add a transition for my display property for one second now and what this essentially does is it says keep my display property as is until the one second elapses and then swap it back to what it would be transitioning to which gives you a chance for all of your opacity Transitions and so on to actually take effect here when I toggle this essentially my display property would be animating to this point and then when I type back the display property would stay shown until that one second elapses and then it would disappear to show you an idea of what that looks like they actually have a Blog article on the Chrome developer blog that shows you this in progress as you can see here we have some code I'll zoom in in a little bit so it's easier to see we have our starting Styles here inside of the open section of our popover which spoiler is part of what the next thing I'm going to be talking about is you can see here it has this opacity in this translate then we have our open State what this should look like when it's open the opacity now is one and then we have here these Styles which are being applied to this settings popover right here which is like the parent class the thing before it is open and you can see that that's showing a fine and then most importantly we have that animate on the display property now this isn't just supported in any browsers but you can see what this looks like in this video you can see when they click around there's an animate out and an animate in animation happen there's no JavaScript at all all this is being handled by this CSS code right here also some fun fact you'll notice that they have nesting inside here CSS nesting is actually a feature that's very well supported across most browsers and I already have a video covering it only getting the cards in description if you're interested in learning how to do nesting inside of your CSS now this last CSS concept is by far my favorite and I think it'll revolutionize how we write CSS and JavaScript and it's almost three concepts in one it is the popover concept that anchor concept and the position fallback concept which all work really well together now browser support for these is pretty lackluster except for the popover API that actually has decent support but not super great yet but overall it's going to be a little while till you can start to use these the best way for me to show you what this is like is just showing you this example this code on the right has absolutely no JavaScript at all this is all the code there is just CSS and HTML so I can toggle this to open up a pop-up menu and I can open up another pop-up menu and best of all if my size of my browser changes you can see that the actual position of these pop-up menus is changing based on where they have room to fit inside of my browser this is something that used to require tons of JavaScript and is now just able to be done in CSS which is absolutely mind-blowing now I have a full video covering everything about the popover API the anchor API and the position fallback API which is how you make this possible I'll link into the cards and description as well as the end of this video for you but I want to really quickly just go over kind of the overall high level basics of how this works the very first thing that we have here is the popover API and this happens in your HTML code so if you want an element to be able to pop up you give it this pop over attribute that's going to hide the element by default for example this nav right here is the one that shows up whenever I click on this button right here so by default this entire nav is hidden when you give it this popover attribute and to be able to toggle it open and close you need to take a button and give it a pop over Target that points to the ID of the popover element you want to open so in this case I have a button that points to this nav menu which is set to a popover so when I click on this button it's going to open the menu I'm going to click it again it closes it or when I click outside of it you can see it closes so that's the entire idea behind this popover API next I want to talk about the anchor API so what we can do is we can talk about that and the anchor API essentially allows you to link multiple elements together so this code's a little bit complicated but I'll just kind of give you the high level overview as you can see here we can specify an anchor name and we just give it any name that we want so we have three different anchors being set up in this case and an anchor name is just set on an element so for example our context navigation which is just this menu right here we're anchoring it to our context button so it's anchored to this button right here same thing here when we open up our playlist it's given the anchor name of playlist so it's anchoring itself to this context menu so as you can see when I move it around it always positions itself next to the parent menu that it's anchored to by these anchor names then if we scroll down a little ways you'll see here in this position fallback section which I'll talk about in a second we have these top and left properties that we are defining based on the position in the anchor so we're saying you know what this is going to be positioned at the top of the element that it's anchoring to or it's going to be positioned to the right of the element it's anchored to so in this case you can see that the left hand property of this is set to the right side of whatever it's anchored to which is what this looks like right here if I just expand my screen a little bit more there we go you can see the left hand side of this playlist is anchored to the right hand side of the thing that it's inside of and now the final step here is how we get it to move around so as you can see when my browser shrinks it moves to this side and that's because of this position fallback essentially we're saying Hey try all of these different positions in our case we're trying to put it on the left hand side first and that doesn't work so then we try a different thing on the left and that still doesn't work and then finally we're like let's try putting it on the right and okay that works so we're going to go with that position it allows you to try all these different positions before finding the one that actually works and then sticking with it which is something I really love and something you used to have to write a ton of JavaScript code for now if this anchor concept interests you I highly recommend checking out the full video linked right over here it goes majorly in depth on everything you need to know about this also if you want to learn even more amazing CSS features you've probably never heard of I have a bunch of videos just like this one I'm going to link the very first one right over here with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 43,404

Keywords: webdevsimplified, modern css, css anchor, css nth-child, css scope, scoped css, bleeding edge css, new css features, new css, modern css features

Id: y8CYSwHXVNE

Length: 17min 57sec (1077 seconds)

Published: Tue Sep 05 2023