23 CSS features you should know (and be using) by now

hi there my FR and friends as much as I love talking about all the cool new awesome features that are coming out in CSS these days there are a ton of super useful features that have fantastic browser support that go under the radar and so today it's a rapid fire time to go over a bunch of those features and I'm not alone for this one I'm joined by my good buddy Adam Argy hey what's up y'all I'm excited about this one there's so much stuff I'm like hey haven't you heard a gap and people are like what's gap and I'm like oh snap yeah it's one of those things where we sort of Are Always On The Cutting Edge we're seeing all the new stuff that's coming we're excited about that and then in the middle of a demo we pass over something really quickly and someone's like oh wait what was that thing you just did there right so it's yeah we're going to dive into these try and go over as many as we can and we're going to try and keep it pretty quick just to make you aware of what these features are and we're going to be starting off with the first one here which Adam I'll let you cover that it is focus visible yes focus visible so traditionally a mouse user will like if you click the focus item there at the top you'll get a focus ring around it and a lot of designers are like ew I don't like that and well it's like well the browser focused it and that that is the state you you kind of clicked it but there's also Focus visible which is only going to show if the user is using their keyboard so if You tab into that one now you're going to see it and as you invoke it so it's sort of contextual to someone using a keyboard so Focus visible is it tends to be the one that you want almost all the time unless you really explicitly want to show that Focus outline on Mouse interaction that's it yeah super useful I love it a lot as you said it's the one that we usually want to be getting most of the time so uh there we go next up we have Focus within uh so another Focus State one and this one's uh I one of my favorite ones I really like it because it was sort of before we had the has selector it was a way to like select a parent when there was an interaction in the child uh and so I've set up a really simple thing here I have my form with a focus within and if I click in there I have a really subtle Shadow and I'm going to boost that up because we can't really see it too well and so when I click in there you can see as long as there's a it oops form submitted form submitted no uh let's refresh that page and see what happens um but yeah as long as we have Focus within the element then we can change the styling of the parent or whatever it is it doesn't have to be the direct parent just as long as there's Focus within that element somewhere we can change the styling of the element you probably want to do something pretty subtle that's not two in your face for the user because you want to be focused on what you're actually changing and not on the entire element but it could definitely come in handy yeah it's good UI feedback that the form and just like your web page is like oh I see you're interacting with this child let me just help you isolate where your focus should be yeah it's really nice but next up we have uh dealing with hover and when we don't have hover yeah so there's this at media here and you can see it there on line eight or so media hover and that's me conditionally applying Styles if the user can even hover at all so there it is you get a nice little label but if you don't have hover capability the label is already in the button so by default I'm not going to make anybody kind of guess and check here um there it is so now we've got a mobile uh you know this person can't hover therefore they should see the label I'm not going to gate the the label behind this action for theion that's how you can do it and I like how subtle and small the media query is just you know is hover there it's just like a presence Boolean yeah so right there media hover nice and simple uh it works as well and it's one of those things where it is the the user it's the system settings are sort of deciding whether or not the primary input is I think if I remember correctly yeah there's also any hover right which is like can any of the connected devices to this device have hover yeah uh next up we have fit content and I wasn't sure which one we were going to be talking about here but I went with the fit content for grid uh just because I feel like it's one that we never um hear about and so I just have these two sort of grid template things set up and I set them up right now to be with one F FR uh right there and this is a little bit problematic because this middle column is not getting enough room because this one on the side is like eating up extra space so you could sort of you know be more explicit and play around with it a bit but you're still using this unit and then you know the 100 pixels here is kind of arbitrary it's breaking this onto two lines which I didn't really want so we come in with other things you can try auto but Auto doesn't really work the way you'd expect it to sometimes uh so one thing I find really cool with grid that we don't see used very much is the fit content function uh which sort of says you know we want it to fit as much space as possible but it's going to break it at it's going to prevent it sort of from getting bigger from that size so it's a little bit like a minmax but without a minimum on it in a way uh and it will be based on the content so it can still shrink down but as we get bigger here we're um it's going to stop when we get to the 40 pixel uh or the 40 character width that I set on that one as a maximum size and definitely a bit more Niche but in the right situation it can definitely come in handy uh next up we have object fit which this one I won't lie I use it all the time this is definitely one of those ones I just pass over in my demos and then people are like hey wait a second what's going on there um why didn't I know about that one yeah and this one the kind of demo is fun as you resize the windows you see the object is fitting into the size that it has there and so I've I've specified object fit cover which is ensuring that is going to always stay uh covering the thing and there we can see it squished and that's because the image has inline and block set to 100% so I'm forcing it to fit into its parent figure square shape and then object fit allows that element to sort of like expand or contract but stay within its own aspect ratio within the constraints of the sort of uh viewport that we've defined and it's super duper handy I totally agree and speaking of that we're talking about aspect ratios so we have an actual aspect ratio property and this is another one I think that's sort of goes with the object fit where people are like okay wait we can do that yeah and this one I I pulled in open props for just because it's got all these named values for typical aspect ratios but I mean behind the scenes like ratio square is one/ one saying equal sides on all you can also just say one aspect ratio one but it's nice to have a variable that kind of describes the intent there so then we also have landscape and there's portrait and so these are all like typical um aspect ratios you'd find on like a TV or video and stuff like that and they're inside of um Vis buug or not Vis buug inside of open props yeah you saw the golden ratio one there that's kind of a jish I mean it is an actual ratio but it's like hey if you want to use the golden ratio in your designs I like go go to town but yeah this is a super handy one for setting um up images and video that you know need to be in some sort of specific ratio and then the browser will often hold that ratio very strong um and it's nice there are always to break it but yeah yeah it's for me the doing a 16 to9 ratio on an if frame when you need to embed a video or something it's you're very happy to have that because uh then yeah yeah my frames are fun uh so yeah you can put uh you know yeah it's super useful a very good one and next up we have accent color and this was mine that I put together but I cheated because I took a demo I believe you built from the I was going to put this one together and I'm like I know Adam did this I remember I'm pretty sure I learned it from you so I'm like I'm going to go find what he did for that one um and basically it's super useful um and it was it's the first step we have in being able to uh style form elements where you just say your accent color you want and you set a color and so if I come in here and I change the Hue on here the accent color on these elements will update and change and it's cool it works for radio buttons checkboxes our range sliders our progress bars and it just adds a little bit of styling to them without you know without having to create a completely custom thing which can be really hard and annoying to do uh and actually one other good thing with them is the color of the check and the color of like the circle in the radio button is uh conditional based on the color of your accent color as well so if it's dark it will switch it to a light color automatically and vice versa uh or the same idea I guess for the radio buttons so you don't even have to worry about that which is nice up next is Carrot color um and this is another sort of like our accent color where if you have form elements where you have a little you know flickering thing to tell the user where their their Mouse is as they enter in their name and other stuff you can just say you have a carrot color and you choose what color you want and whatever color you want it it works and that's super nice it's low effort just like our accent color uh that we saw both of these too they have good browser support now but if ever you're worried about it they're just perfect um Progressive enhancements as well and it's a little thing but it goes a long way and once again it's a lot easier than trying to come in and do some custom solution here because that would be a nightmare I think yeah that's a good one to follow accent color up because I'll often have my carrot color match the accent color match my highlight color and then your brand is really like integrated in the experience for the user it feels really nice next up we have uh the I forget the name of this one border image border image is super powerful um recently an article by tman is just amazing at all the things you can do in here yeah the complex but awesome CES his border image property it really is awesome and complex but this is a really cool uh example here with a scrim so it's really common that you'll put this sort of like you know gradient and then overlay some text on there and usually you'll have like a whole caption element and then you have your text inside of there and you do this whole kind of song and dance to set up that box that's going to Overlay the image well you don't need the Box you could just put a border image on the inside of the image and stretch it across that Center area with that Phill zero syntax and then you got a linear gradient with some of your four digigit uh hex Syntax for some opacity boom job done no extra nodes uh super slick yeah when I open this before we were recording I looked at that and I was like wait a second I could have done that this entire time and this feels like one of those things I've known about before and I just keep forgetting because every time I think a border image it's just complex and hard and I don't want to have to worry about it and I try and find other ways of doing things uh but yeah this is one of those super useful use cases right there another trick with board image is that kind of like box Shadow you can paint outside of the element without actually consuming space and so yeah there's all these cool tricks where you can use 100 VW and have a background extend out of the element all the way to the viewport Edge which a lot of people would over complicate and Border image just makes it super easy just paint infinitely out the sides and good to go nice uh next up we have I put scroll margin originally but I'm going to do scroll padding and scroll margin which are two that I always mix up and I try one and then if it's not the right one I try the other one and I um so the first thing I've done is I've put a scroll behavior um actually I'll take off the scroll padding for a second because I set it up for the padding first so if ever you have and I exaggerated the size uh of my menu here because usually they're not so big but it's just a sticky navigation at the top um and when you go to something it covers the part you wanted to because the middle is actually what's touching the top of the viewport yeah and you want to yeah you want to scream um um and I remember back in the day coming up with like jQuery solutions to this you can just say scroll padding and it will just add that padding to where the scroll stops and it works uh in a sense it's a little bit magic numbery because you have to decide how big you want it but whatever it's so it's super easy to do so I'm I'm super happy that we can do that um but at the same time we have scroll padding and scroll margin and if you do scroll margin here it doesn't work and I always do it and then it doesn't work and I have to do a padding instead uh and I'm pretty sure and I want you to correct me if I'm wrong on this one but um the scroll margin is used for when you're using scroll snap and other stuff when you're going side to side and then you can add this margin it doesn't have to be side to side this could be vertical too just with the scroll snap it just adds like a space there so if I have a scroll margin of zero when I scroll over when it snaps it snaps exactly to where I'm going but if I have the margin there then it gives me that extra space on the edge where it will stop ahead of if that makes sense yes you've you've shown a great use case the explanation is quite simple and I didn't knowe until I taught it so just like how you always say teach stuff and it will uh teach you um scroll padding is for the scroll container scroll margin is For Children of the scroll container so that's why it might feel ineffective like you should be able to use scroll margin on your other example you just have to apply it to the headers as opposed to the scroll port HTML there we go thank you for that I learned something new today too that makes a lot of sense and that's why I have the scroll margin on the children here on the children that's awesome I have another video to make now thank you you're welcome uh next up we have uh or speaking of scroll snap um and all of that I have scroll snap here um so this shows you how to set up a vertical slide uh snapping setup really easy for full viewport and does that one even do the sticky part I can't tell if it was sticky yeah that does the sticky version right oh no they're pushing okay it's just low low frame rate in Riverside I'm struggling to see um but yeah scroll snap is super super easy if you have an overflow area um any child inside of there can be like hey I want to snap um to the edges of some somewhere so the the scroll container says hey I got overflow and then hey I want to scroll snap on my y AIS in this example so any child that wants to snap I'm a snappable scrollable area and then you can specify proximity or mandatory mandatory is usually what you need but proximity Is in case you want it to be a suggested like a suggested stopping point I call them like a you know you go on a road trip and there's like points of interest scroll snap is really great for establishing points of interest that also rest really healthy with like the grid layout of a page and so yeah you say it's a scrolling uh snapping container and then any child that you want it could be any nested deep a lot of people think it's just direct children but any child can say I want to snap to my scroll port at this POS at this particular Edge and then of course you can add margin for that child so that child could say like hey I want to snap to the edge but I want to be offset by x amount um but yeah yeah it's super cool super useful it's really handy on touch devices too um just super nice yeah get that fluid Vibe yeah yeah exactly yeah um and yeah I agree proximity is a little bit like you feel like it's not working and then all of a sudden you're like oh it's it it did something uh as a user I always find that one a little bit weirder too um so yeah like man is probably and they're both awkward to write for me anyway I can't spell very good I got lots of words I struggle to spell awesome um and sort of in that realm of scrolly stuff we have um the snap trap that you're calling it for overscroll Behavior contain probably but I mean the idea is really uh made best manifest with like a dialogue you know like a dialogue pops up and often times people are like scrolling in the DI okay so like really common a dialog pop po up and it's like read our terms and you're like yeah I'm totally not going to read these terms so you scroll down to the bottom and then as you get down to the bottom because you whipped your way down to the bottom your scroll event bubbles out of your container and starts whipping the page down you're like wait I was I was at a position in that page what happened and that's because the scroll was not contained by default scroll events bubble out of a container up into a parent which Al could be kind of a cool little hack but by setting uh overflow containment to or overscroll Behavior to contain you can basically say don't let these bubble I want to trap um extra scroll events and not let them you know leak I I basically put this on all of my scroll uh containers because I don't really know any scenarios where I want that event to leak out so it's a really good one to know so yeah if here on this default one if I'm scrolling down and there's other stuff I can keep scrolling and it just sort of goes off the page uh whereas if it's the contained one I'm still scrolling but the rest of the UV Port isn't going down because we're our our scrolling is contained to that until my mouse moves off to the side so superb example in there nice next up we have Gap um and this is one of those ones where it's like what do you mean you don't know Gap but so many people seem to be unaware of it still um so I set up a couple of really hopefully quick examples here um there's two times where Gap is really useful in my opinion uh if you're doing something that needs consistent spacing um you often you know grid is a nice tool to use because keeps everything going the same way the problem is you're spacing you don't have collapsing margins anymore the spacing goes big so you always come in with a margin of zero to reduce them all and then you run in like do you where how do you start adding your spacing back in just coming in and saying Gap and then you get your nice consistent spacing uh between all your elements and it just works really well uh and then of course we have it with flexbox as well which is newer there but we just come in and we can say a gap over here uh and then I can add that space that I want and it's only adding space between the elements we don't get the space on the outside of stuff which is generally why margins were always a bit of a pain for that just because then it would get in the way yep I agree I like Gap 2 because it's parent owned instead of child owned and a lot of people like to centralize ownerships like this child is just concerned with its own you know size it doesn't have to worry about pushing anybody around uh that's on the parent layout and I like that workflow I think it works out nice y I definitely agree with that the one thing I will say is don't always treat Gap as a replacement for margins sometimes you want you know spacing to be relative to the size of the typography and other stuff if it's more of like a long article or something so it does depend a little bit but if you just need simple consistent spacing Gap is perfect with whatever yeah consistent is a key word there too like if you need variable typed spacing between items Gap isn't going to let you specify one ram here and two Ram over there uh it's very much a flat specified value yeah and where Gap actually came from is columns originally um and at one point you had to do a column Gap but now we can use Gap there and columns is another area where I think not enough people know that columns exists I agree uh and it's been around for for a really long time now and it's really cool because it's like super responsive even though often the syntax doesn't look like it because I'm basically saying here I want three columns that are 200 pixels each but if it doesn't have enough room at one point it's just going to go okay well now I have two columns because I couldn't fit three while you were sticking to around that 200 that wanted uh and then we can shrink down and we can go even smaller if we want um and yeah it just it's pretty cool how it works uh I'm also using a column rule here which is adding a little decoration it's kind of subtle so you might not see it so I'll just change the color of it there to make it a bit brighter um you can add decorations in in your column rules which is something that people have been hoping for and grid for a long time and I think is on the way but for now uh columns is one of the places we can do it yep clamp is really nice in there too for the value um like hey never go below 20 characters cuz then it turns into a really impossible to read column but don't grow too big then that's hard to read too yeah um and the other thing just really fast I am doing a column SP or yeah column span of all on the top so this one is in my columns but we can actually you know you can control if you want things to be able to span more than one column as well the one thing that's kind of weird is sometimes where things break so there is some extra stuff that you might want to get into especially if you have background colors or cards or other stuff they're getting involved in it um or if you have margins too sometimes alignment can be a little bit of an issue but it's I think can be useful in The Right Use cases um and definitely worth checking out really quick on that last one um I see an orphan on your third paragraph if you give your paragraphs text wrap pretty does that go away yeah did nice cool so there's one that uh not doesn't have the best browser support but is a really good Progressive enhancement um so you could use it today and it will just fix little words like or that are all by themselves floating off uh on so lonely like here's a friend Tech trap pretty uh and if any of you have heard about text drop balance before that's for shorter things I think it's a maximum three lines of text it's more for your headings text drop pretty is for longer things like paragraphs and stuff um where you get a lot more text and get little orphans at the end next up we have a drop Shadow versus box Shadow yeah this one is always surprising that folks don't know about too so I just made this really simple demo classic icon scenario where you're like I wanted the drop shadow to be underneath the shape and then it does this box thing you're like ew well just switch to filter drop shadow and it essentially takes the same syntax you can't spread if that's important to you um but you can essentially otherwise achieve the same effect and looks really nice um and then we have Matrix 3D and I gave this one to you on P purpose because it just confuses me so I'm hoping you can enlighten me a little bit on how it works yeah this one is definitely um specialty needs where you can kind of get direct access to the GPU sort of positional points that are going to be set for something um and I provided an example here where I tried to make the numbers reasonable to see because otherwise they can get unreasonable really quick there is a method to that Madness I'm not going to explain it uh because that wouldn't be a quick example but it's just nice to know that there is this Matrix 3D concept and in case you're coming from a 3D space and those are the coordinates and the data that you have you can pass it straight to CSS I did provide an example where um you could drag around is that uh open in your next Tab and that was cool because you could see a regular Matrix that had no Transformations applied and then you can grab the corners and tweak the element and see what the Matrix uh CSS is so if you want wanted to sort of like play around with this find the shape and the angle and the way that you're looking at setting something up then you can steal it and take it and put it somewhere else and of course this is animatable so if you want to animate between these states you can do all sorts of cool stuff with it that's really cool that makes life a lot easier whenever we have generators for these complicated things it it you're or on the you know makes it makes it more much more usable um uh next up we have backdrop filter which is one that gained a little bit of popularity because of the uh the blur and the glass morphism um but it there's still a lot of people who don't know about it so I want to go through a few things with it though um but the first thing is generally speaking you're going to have a background color on your element that you're going to do this on and it's going to be somewhat transparent um just so you can see through it if it's fully opaque it's not going to do anything but as long as you can see through it a little bit then you can do stuff like the blur which just blurs the background behind it which is kind of cool this is that Classic Glass morphism style that uh is um been around for a little while now and it's just nice the it helps make things more readable too if you have text um and you have different backgrounds it can be good A lot of people stop there though and they don't realize there's other stuff we can do for example you can change the brightness of things that are behind it you can make them darker or you can actually make them brighter too if you want uh which is interesting you can change the saturation to desaturate what's behind it or you can play with the contrast on there reduce the contrast or increase the contrast whatever you want or of course you can combine a bunch of them together just space separated no commas uh and then you can sort of this one's probably a little bit overdone but with the high brightness but then you can come in and do whatever you want with it um and have some fun with your backdrop filters uh and get some interesting effects going on next up we have any link I love this one because uh yeah let's what is any link Adam yeah any link I have three links there the first one has no HF the second one has just a hash HF and the third one has a fullon URL inside of it and what's cool about any link is you don't have to so a lot of times you'll be targeting links and you're like e if it's a link that goes nowhere I don't want that to look like a link and that's what any link is specialized for it will only select the elements that are full links of some kind and so you get to automatically ignore the ones that are missing HRS and um just kind of a cool little handy selector yeah so if I just make that an a then it's selecting the a element even though that's not actually a link so any link comes in and fixes that problem for us awesome next up we have empty uh another pseudo class selector thing um there's a lot of different use cases for this but this one I I think is is a decent one um so it's a bit more of a complex demo that I pulled up from a very old video or collab I did actually with web Deb simplified uh but the idea here is if you come in and you have sort of these lists that are coming in you can see that there's a background on this area um and that's all coming from this ul and then in that UL we're inser inserting the Lis as we create new things but what would happen normally and I don't have any Lis or anything um but on here I am doing a task list if it's empty I'm doing a display none on it because if I don't do that I have some padding and some other stuff on there so that means that I just get this box that's sitting there because of the padding the background colors coming through that's really annoying uh whenever I talk about empty people are just like oh everything you're doing you should just be handling with JavaScript anyway I don't really want to be looking and inserting a UL if there's no current li like that's a lot of extra steps along the way I could just have this empty UL waiting for content to come in and then just say well if there is no content it disappears and as soon as something gets inserted into there it shows up yep excellent could be just like hydration too your component initially gets inserted as just like a random tag that has no content you're waiting for JavaScript well you're like CSS could be doing the same thing you have there could have padding in a background color like what's this weird node and yeah yeah uh next up we have this which is uh our first or and last child um that I want to take a look at and so this is sort of a common use case that I use it for not necessarily like this uh but often you might have a navigation or something that on mobile you might want some lines that are dividing it or whatever uh and I just don't want this last one to have it and of course I can make these all top but then the first one would have a line on it which sucks so we just do not last child uh and then the last one doesn't get the border on it and you can also Target your first child as well so not last child or not first child uh to Target either the first or the last one and then leave everything else and give it the styling of course I'm combining that with the knot because I tend to use that that way a lot uh there's probably times where you want to Target just the first child or just the last child as well but yeah it can be super useful I also use first of type and last of type all the time too because first child and last child um like it doesn't take your predicate like you say Li first child um but it still could find more than what you were bargaining for and the first of type and last of type could be really handy there yeah so like yeah sometimes if you have like a lead paragraph or something you could just have your p uh first of type and then if there's other things before it you know boost the font size of that one and and you're good to go y awesome uh next up we have have an emoji list that we have here uh using our uh list style type whoops I went way off but there we go my list style type yeah this one's cool and I just don't see it used enough to making to make list fun so this this demo shows two features the first feature we want to talk about is list style type and just the ability to like change bullets to other stuff um but up above that definition you can actually Define your own counter Styles as like an array and it will repeat and cycle through the different dots that you have specified and I used a bunch of emoji and you can see them uh cycled through there all by for free just tell the browser here's a little algorithm for how to do uh symbols on on the markers and it does all the work it's pretty sweet um next up we have inset uh inset is one of my favorite things I use it all the time now yeah uh which here whoops I went way off but I have a parent that has position relative and then the child has a position absolute and then my insets 20 so this is the same as a top bottom left and right all set to 20 uh so I can make it zero and the same uh idea you could come in with a bigger number uh it's just like your margin shorthand so it's top bottom top right bottom left so if I come in with different values here uh we can sort of circle around and it use the same type of shorthand if you omit any characters uh you would get and the other thing that is super cool with it is um or maybe not cool but super useful with it is if you come in and you do an auto that's the same as like not declaring the value there now mine's completely disappeared because it has no size to it um but that would be like declaring a top a right and a left but I'm not declaring a bottom on it it's at least that's my understanding of how that works um yeah yeah so it can be handy but again this is a silly demo so that broke everything I was trying to do I also like inset because it has a logical property side to it too um but yeah the shorthand is physical if you do inset inline or inset block uh you can get to The Logical property side of positioning yeah yeah so inset inline let's just turn that off for a second set inline let's say we do 100 pixels and then inset block we can do that at 50 pixels um so we have 100 on the left and the right and then the block which is our up and down axis right now um would be there and those would change if the writing Direction ever got switched to a vertical writing mode uh the other reason I like inset is it is a really nice way to Center things um yeah ins Auto yeah um because if you have yeah if you have a uh say the child let's just give this a width of I don't know 50 pixels or something and we'll use aspect ratio since we just talked about that ratio of one so I get a square um you can see my squares there I can just set this to its inset of zero and then a margin of Auto and it will Center and you don't have to use that weird translate transform trick to like reverse you know top left 50% and then negative 50% and stuff uh yeah a little bonus one right there um and I think we're at the end of our list yes oh sad it went so fast it did uh yeah thank you very much for for joining me for that though Adam uh and if anybody has any other ones that we went over and we didn't mention let us know in the comments and if you like this type of video let us know too because we definitely would you know do more of these in the future that are a bit more fast-paced uh there'll be a bunch of links to tons of stuff in the description if you want to get access to anything or read more about any of these or find other resources on any of them and yeah thank you very much

Channel: Kevin Powell

Views: 67,007

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css tutorial, tutorial

Id: opHu7HvFM60

Length: 31min 30sec (1890 seconds)

Published: Thu May 02 2024