Top 5 CSS Features for 2024

if you're a web developer then you need to know about these new CSS features they all became finally available last year and at least one of them is a real game changer for me and the cool thing is I'm not going to introduce you to experimental features that only work in one browser that you can only really use in a few years time no these features are all supported by the major browsers and are really helpful in everyday use let's go one feature that you've probably heard of is it's one of the most popular is container queries and I'll briefly explain what's so fantastic about container queries and how you can save a lot of lines of CSS with them when responsive design became more important on the web media queries were introduced so one can relatively easily Define break points in CSS above or below which certain CSS rules are active let's take a look at this card element as an example we have a media query for this and if the width of the few Port is more than 600 pixels we assign it Flex Direction row and then the image and text are displayed next to each other otherwise one below the other now what's the great about container queries here we have the same card element in different places in the layout on top across the entire width of the page then we have it in columns in one case there are two columns with the same size and in the other case we have two columns with different sizes there is still the media query with the breakpoint at 600 pixels and it still makes sense for the first card at the Top If the fport is smaller the layout changes but it doesn't look good for other occurrences of the card the content is squeezed even with a larger viport I need separate media queries for each variant in which I use the card for the two columns of the same size for example I Define one with a breakpoint at 1,200 pixels and an example with the card over 2/3 we roughly break at 900 pixels that looks pretty good but it's not mathematically correct and that brings us two container queries I no longer need to start doing math with container queries and deduce the appearance of child elements of my out from the F boort and I don't need a separate media query for each different occurrence of my card using container queries we can Define break points based on the width of an element's parent element and not the few port and this is so cool so we simply write at container greater than 600 pixels and then give all cards the correct Flex Direction the only other thing I have to do here is to set container type inline size for the containers which in our case are the columns that's it and now we have exactly what we want with a single selector if a column is larger than 600 pixels the cards in it can be displayed horizontally this makes responsive layout much much easier on to the next CSS feature which will make CSS pre-processors like sess unnecessary in some cases especially if you have a heavily nested layout CSS selectors become very verbose and this is where SC CSS for example has come to the rescue because it allows me among other things to Nest CSS selectors but I can now also do that with regular CSS so if it's only about nesting I no longer need a CSS pre-processor the major browsers now all understand nesting by themselves and let's take a look at my previous example here parts of the selectors are repeated over and over again card card card card text text text and so on and I can now simply Nest them inside each other and there's a new selector m% this allows me to reference the surrounding selector within a nesting that means to further specify the anchor element for example as here with hover overall our CSS file doesn't necessarily have few Alliance thanks to nesting but it's so much clearer and more intuitive simply less ver BOS I find it such a useful feature before we get to my absolute favorite CSS innovation of the last months I'll tell you about a useful upgrade to CSS grits if you work with CSS grits and if not then you should they upgrade then you've probably often reached the point where you define a grid which then applies to all direct child elements but it no longer applies to further sub elements so you would then have to define a separate grid if you want to align content to it here's an example I have created this newspaper pen here we have defined a grid on the main element with four columns and seven rows the header element and the article elements are all aligned with this grid for example this uh editorial here has three columns and four rows now I want to do the following in this article here with the ID subordinate I also want to align the heading and and the text to the grid the heading on the left in one column and the text on the right in two columns previously you would have had to define a separate grid here which needs to be manually aligned with the higher level Grid in this case three columns wide and one column high I would also have to specify the grid Gap again a redundancy and if I changed something on the parent grid I would then also have to transfer this to the lower level Grid but now there is sub grid I can now simply specify in my article element grit template columns as usual but do not write new column definitions here but sub grid now this element takes over the parents grid this means that I can now align child elements of this element with the grid of main this works as usual and I then say that the heading starts in column one and goes across one column and the text starts in column two and goes across two columns for the sake of completeness you can of course still Define a new grid for a child element I did that here in the bottom article here I Define completely different columns and this then applies to the child elements this is then a grid within a grid and not a sub grid this can also be used for from time to time and now we come to my absolute favorite I've been waiting a long long time for [Music] this the new has pyoc class is a real game changer for me if you build a selector with it then it applies to all elements that contain at least one specific element that is noted in the brackets after has and that makes has a parent selector so to speak what's so special about it well what you've always been able to do in CSS is say if an element a contains an element B apply this rule to element B sure you do the that all the time but what you couldn't do is say if element a contains an element B apply a rule to a and you can do that now a condition that applies in the depths of the Dom can therefore have a design effect on a higher element and this enables many new things that were previously only possible with JavaScript or some CSS hacks a very simple example we have a small form with two sections if the user makes an incorrect entry in a field we can use has to put a red frame around the entire section containing the field or even the label in front of an UT that is invalid previously this was only possible with JavaScript or a hack you then used to place the label after the input in the Dom and styled it by absolute positioning so that it was still appearing in front of it and then you could use a sibling selector because one has been able to color a label after an invalet input red for quite some time but not before it this also works not I can simply say if an input container contains an invalid input with pass then apply the following rule to the label in the input container done this example that I've created works in the same way an input in material design look and feel with an animation on the label this works completely without JavaScript and without any CSS hacks like all the other examples in this video I have linked the code in the video description another cool example in combination with a grid here I can check at first whether the last child element is the fourth the fifth the Sixth Element and so on depending on how many element the grid contains this way I can kind of count in CSS and then I change the grid layout depending on the number of child elements imagine for example an image gallery that always makes Optimum use of its space depending on the number of images brilliant and all without having to program anything and personally I always like it when I can solve things that only affect a presentation only with CSS and don't need JavaScript for that last but not least another great CSS feature that has recently become aailable especially in headings or hero elements it often doesn't look so nice when a single word is wrapped to the next line how can you solve this the element is always displayed differently on different different devices and different sizes so working with Dynamic resizing of the container or even inserting line brakes or something like that is not a nice solution but this has now been solved with the text rep value balance if you set this the text content of an element is wrapped evenly or balanced and this is what it looks like in our example great one note however text rep balance costs a lot of computing power because letters are counted here you should therefore not use it on long paragraphs with many lines or the browser will even limit this itself also I said at the beginning of the video that you can use all those CSS properties in all major browsers with text rep balance this is only partially the case for Safari the setting is currently at the time of recording this video in the technology preview this means that it will probably be available very soon why I included the feature anyway it does not harm if the setting is simply not considered by the browser if you don't already have a mechanism with JavaScript for example that displays the heading balanced then this feature won't make anything worse in zafari everything Remains the Same and in the other browsers the headline is balanced and that's basically it for this video thanks for watching I would really appreciate a like please also consider subscribing that would help me a lot see you next time

Channel: camelCase

Views: 18,510

Keywords: CSS, Web design, Web programming

Id: PFrtC9tDHuc

Length: 9min 7sec (547 seconds)

Published: Mon Apr 08 2024