5 EXCITING New CSS Features That You NEED To Know

this is what the web used to look like and this is what the web looks like today it's safe to say that CSS has come a very long way in comparison to its earlier days and is still actively evolving the last few years has been an amazing time for CSS and front-end web developers we got blessed with some amazing CSS features like media queries animations text effects filter effects gradients multi-columns transforms just to name a few and recently the layout Innovations like flexbox and CSS grid as CSS is still evolving I want to show you five new exciting CSS features that I think you need to know number one container queries are used as an alternative to Media query for adding responsiveness to your website but unlike media queries where it's checking the size of the pages viewport a container query is checking the size of the container this small difference allows us to add responsiveness at the component level take for example this article component I've created two identical responsive versions of it one with container queries and the second with media queries the container query 1 is waiting for the container which is outlined by the spring border to have a width of 736 pixels to apply the Styles while the one with the media query is waiting for the width of the entire browser page to be at a 736 pixels before applying the styles the result is the same on this example because the width of the container and the width of the page are identical but we can see the true power of container queries when looking at a more complex example in this example we have a main section with articles and on the right we have in the site section again with articles all the Articles including the articles on the aside should make use of one component we used a bunch of times but unfortunately before container queries this was not possible if we try to do this with one component only and with media queries the component in our aside would break and the only solution to this would be to create a new component specifically for the aside section but the problem with this is that now you have two different components container queries solves this with container queries both our main section and our aside section share the same component and this works because now the responsiveness of our component isn't based on the size of the page but instead on the size of the container itself to use container queries first you need to have a container on your components then in your CSS file you add a property called container type to The Container you have two options here do you want to check for the width of the container or do you want to check for both the width and the height of the container when resizing if you want to check for the width only then use the inline size value if you want to check for both the width and the height then use the size value but in 99 percent of cases you're only going to want to check for the width of the container so in most cases you're going to set the container type to inline size you also need to provide a name to your container with the container name property this can be whatever you want I'll call it card lastly we need to add the container query the Syntax for this is very similar to a media query at container parentheses and curly braces in between the add container and the parentheses goes the name of the container I named it card so here I type card inside the parentheses goes your breakpoint so like for example we can put Max width of whatever like 800 pixels or Min width of 800 pixels for mobile first and lastly inside the curly braces goes the style changes you want to make for your components number two the has relational pseudo class also known as the ha selector is a new CSS feature that allows us to conditionally check if a specific element exists within a parent the easiest way to explain it is as a parent selector but the truth is that the hash selector opens up a lot of interesting conditional possibilities once thought impossible with CSS only take for example these two card components they're the same card but the top one has an image while the bottom one has no image and also has a top black border everything else is the same both components share the same HTML code except that the one without the image has the div with the background removed they also share the class of card but for the component without the image I had to give it a second class of card dash dash no Dash image all this class does is adds the top black border to the component Now herein lies the problem I had to add a second class on the component that has no image so that I could apply styles to it but it would be much more convenient to have a way to conditionally do this without a variation class this is where the Hass selector comes in first we can remove the card dash dash no Dash image class in both the HTML and the CSS we can also remove the flexbox properties in the card class removing these broke both our card components the first card has a stacked layout and the second card is missing the top black border to fix them we select the card class and apply the has pseudo class to it we want to check whether there's an image nested somewhere inside the card component the element that renders the image is a div with a class of BG so inside the parentheses goes dot BG and inside the curly braces we can apply the flexbox tiles we removed earlier this is almost like an if statement in JavaScript this CSS line is asking if card has an element with a class of BG apply these tiles we can even add a condition for if the card does not have an element with a class of BG by adding the not pseudo class before the hash selector now looking at our cards we see they are styled like they were before but now we aren't burdened with the extra variation class that we had on our second card component number three Cascade layers is a new CSS feature that enables developers to have more control over the Cascade logic of their CSS file solving a lot of the headaches related to CSS specificity let's look at a simple example we have two headings they're both the same except one has a font weight of 700 and the other has a font weight of 400. I have a utility class called thin for applying a font weight of a hundred to any element I want when I add it to the first heading we see the heading changed from being bold to being super thin but when I added to the second heading it's not working the reason for this is that in our CSS we're using a child combinator to select the second heading and by doing so we've increased the specificity of this style rule let's comment everything out and use Cascade layers to solve our specificity issue to create a layer we add add layer and curly braces in between you can give your layer a name I'm going to call it base and move everything except the utility class inside it we can also create a second layer called utils and move our utility class inside it now when we look at our headings we see they both have a super thin font weight of a hundred the reason we don't have any specificity issues anymore is because the specificity of our CSS rules are now scoped to the layer that they're in one thing to note here though is that you need to organize your layers in the order of least important at the top to most important at the bottom because the utils layer is placed after the base layer the utils layer has priority if we were to move the utils layer above the base layer we'd be back to having our original specificity issue where our second heading isn't applying the styles from our utility class another way to organize your layers is by ordering them at the top of the page like this number four subgrids when we set display grid only the direct children are able to access the rows and the columns that are defined and this makes it difficult for nested layouts inside those children to align with their ancestors take this grid for example it has three columns with a card component in each the code for this is very simple in the HTML we have a container with three direct children inside it in the CSS our container has a display of grid three columns and a gap of one REM the children of the container just pans from the first row to the last row this is a pretty standard grid but there's an issue with this layout the elements nested inside the card aren't benefiting from the grid lines of our container we can see this problem when I change the text inside the cards to have a different length notice how things aren't aligned anymore this is because only the direct direct Children of the container are able to access the rows and the columns that are defined not the elements inside those direct children this is where subgrid comes in in our CSS we add a display grid on the card and a grid template Rose set the sub grid when we set grid template rows to subgrid on the direct Children of the container we're giving the elements inside it access to all the columns rows lines and gaps that are defined on the container no longer are elements inside the direct Children of the container without access to the grid rules defined on the container now when we look at our cards we see everything is lined up despite the text on each card having a different linked number five new comparison operators this is a short one the media query level 4 specification has introduced new comparison operators used for targeting a range of viewport widths inside media queries take this media query for example we can replace Min width with width and any of the following operators the less than greater than equal less than or equal greater than or equal this is Mia I'm new to YouTube but if you enjoyed the video or learned anything at all I'd be really honored if you liked the video or subscribed to the channel thank you

Channel: Slaying The Dragon

Views: 36,483

Keywords: Container queries, Has-selector, Parent-selector, Parent selector, :has(), Subgrid, Cascade layers, Comparison oparators

Id: zNXMkjp2Sv8

Length: 11min 25sec (685 seconds)

Published: Sat Nov 12 2022