5 underused CSS properties, values, and selectors

people are often asking me what i think is the most underappreciated or underused css property or function or ability or whatever you want to call it i found it really hard to come up with one single one there's a lot of good ones out there so in this video we're exploring five properties or things that you can do with css anyway that i think are probably underused and sometimes that's even by myself i should probably use a few of these a little bit more often hello my friend and friends and welcome back to the channel if you're new here my name is kevin and here at my channel we learn how to fall madly deeply in love with css and if not deeply in love with it at least to be a little bit less frustrated by it and to help that happen i do think that understanding more about css is always a good thing and sometimes there's some of these properties or values or abilities that css has it lets them do things that maybe they thought weren't possible or that were a lot harder than they actually are so let's not wait around let's go and jump in and see what the first one is all right so to check all of these out we are here in codepen so the link to all the codepens i'll be looking at are linked down below in the description so if you want to play around with them they'll be in their finished state you can play around with it a little bit we're going to look at this first page here for a few of the different ones we're going to be doing and the very first thing we're going to take a look at is the selection pseudo class uh pseudo select pseudo element i guess it's the pseudo element i'm saying under used i do see it come up from time to time but it's one of those things that when you are on a site you go to select and the color is different it matches the color scheme it just it makes me so happy and it really is one of those little micro interactions almost that help the overall experience and it just adds that little touch that makes the site feel more polished so you can just set a background on it and you can get a nice selection just like that and you can see it's changed the selection color and there are only a limited amount of things you can do on here you can't just go crazy and change everything but let's just say you decided to make the background black and if i made the background black then i can't read my text so you can change also the color of your text so i can make my text then be white or you know what just for fun let's make it a different color color red and you can go and select and look at that you get these this is this is not what i'm talking about when i'm saying the nice little touches you might make on your site that help polish it up the doing it wrong i guess could ruin the experience as well uh but one interesting thing that comes up with this that i didn't realize until today if you take this and you do a background of black and you don't change the text color it's not going to do it um and it's actually doing the inverse so if we just come here and i put a paragraph and i say the color on all my paragraphs is red it's all it's going to work when i select here but this which still has a black color on it it changes it to white so it will actually invert the color of your selection if it matches so if i made the selection color red you can see it's working here but it's going to invert the color of the selection there to make sure that people can still read the text um that is something just something to know about and if this is interesting to you it's pretty easy to pick up but there's a link in the description to a video where i did deep dive this a little bit more if you do want to play around with the selection at all so that is that one out of the way now let's move on to the next one which is current color and current color is not a property it's a it's a value that we can assign to um things so i'm going to use our block quote here to highlight how this is working so let's just select it or i should have it somewhere here uh block quote there it is so with my block quote let's move this stuff out of the way there we go so with my block quote what i could do is something a lot it's really often you get like a bar that comes down on the side here right so you might do a border left and did you know the default for borders is actually current color um so say you do a border left of three pixels solid it's going to match the color of your text so you can see it's matching it there let's do like 10 make it a little bit bigger and so if i change the color here color is red now the color of that will actually change with it that's kind of cool and as i said it's because it's using current color like that not very cssy and we got the the camel case coming in here so a little bit different but the current color is going to take the color of something um so if ever you're using pseudo-elements to do something so say you wanted this border but you don't actually want it touching you sort of want it offset a little bit so to show how that would work we can come in with our block quote and we'll say it's the after but it has content because if you have pseudo-elements you need to have content on them so we have a content on there we'll do a position of absolute width of 15 pixels and we want a left of say negative let's do negative two just so it sticks out top of zero and a bottom of zero uh and of course we need a color on it so then we set our background and i could say red but then the issue with that so there it is and let's turn off my border so say you want it to look like this i don't know why but let's just say you did um so you have the color that's here but then if i decided you know what that doesn't look so good i actually want this color to be blue and you switch that well then you have to remember to switch this to and i know we could use custom properties and really current color is the original like the og of um custom properties because it will always match the color of purple it will always match the color of the text that you're using here so even though we have custom properties these days and i'm absolutely in love with them i do think that current color is something it's probably still a little bit underused and could be could be pretty cool so that is current color right there and since we're here on my block quote figure it's the right time to jump into number three which is the way you can do quote stuff with css and falls under like the css quotes thing which is also why i have a quote up here because we'll look at how it works with my quote there but i think with block quotes a lot of the time instead of styling something like this let's just take all of that off what people do is they want like an actual quotation mark and then they come in here and they have to find you know you have to go and google what the the code is and you come in with whatever it is to try and try and get your your quotation mark and then you forget and i know there's some that are easier to remember than others but did you know instead of and don't put this in the quotation marks because if it is it's just going to write it out you can just come here and write open quote and it's going to come at the end let's turn off my background and let's put this to it before so it's at the before and not at the end and we have an open quote there and i have position absolute so if i turn that off it should go into the right spot so there we go we have a quotation mark coming in just like that but of course you can do a little bit more you can then do a uh say font size of three ram or three m so it mat you know grows with it opacity of i don't know 0.5 left of negative 1m top of negative 0.5 m i'm just guessing right now that's way too far there we go that looks a little bit better so just you know play around with your numbers a little bit get it to go exactly where you want it to go and you can sort of style it with that just using open quote like this and there's an extra bonus with this open quote thing and this is really neat and it's going to work up here too with that but if ever you're working on a multilingual site the advantage of using open quote or close quote is check this out let's go block quote and i'm just going to do it on here but you know you can do this for your whole site and change the language for the whole site but if i change the language here to french it will change my quotation mark to be the french one now the positioning of it has gone off because it's a completely different character so you will have to take that into account if you are doing it for a multilingual site but you can see it's the same thing up here on this quote if i do lang equals fr again for french it's going to change the quotation marks automatically for me and you can also change there's open quote you can also turn off your closing quotes you can add a close quote and different things to it so pretty cool in my opinion and it's nice that you get the multi line uh multilingual functionality that comes along with it all right the next one is a mix blend mode and this is actually what inspired me to make this a little bit because i came across an article by anna tudor on css tricks and she made this really cool thing so it's right here where we get this guy going on and i'm going to link to this this is hers i'm also going to link to the css tricks article and i thought it was such a cool use case of mixed blend mode and this is where i went i'm definitely under using mix mix blend modes and i need to start using it more because this is such a cool use case of it and we can see here there is on the paragraph an isolation of isolate which is important for how this works um or else it would use the background color for the site instead of being like isolated to the paragraph itself but and by doing that it works really well and it's such a difference right now so it's showing like where there's a difference between the two elements difference is a weird one but it works perfectly in this use case i know and check that i didn't even realize she was using current color though but let's change this over to a url and this is this could make things kind of interesting where if you if you had this with an image instead of just a color so i'm just going to use uh unsplash slash 400 doesn't really matter um it's going to come in as an image there's a difference let's make that like 100 i want to make sure it's fitting there we go so we can see it looks really funky like that but this is where and well you know what background size cover so it's not too weird and i wouldn't necessarily use it like this but then we could come in with like a multiply um and by doing that then you get sort of this that type of effect going on or maybe you want an overlay and you get all the different blend modes that can come in um lighten as well uh lighten as well which might not work too well actually at all with this oh there we go it is working a little bit so you get these different sort of options and blending things that can go on with the mix blend mode and it's something that i want to start exploring more especially after seeing this example of difference that i thought was really cool so full props to anna for that one and if you'd like to see a video where i deep dive mixed blend mode a little bit more leave a comment down below and let me know because i haven't made a video on it i've looked at background blend modes but i've never looked at mix blend mode anyway let's keep on going to the last one which is number five we're all the way at the end already and it is on columns and css columns i've talked about them before um i think they're really really cool and this is where you could just come on to an element and let's just go look how i've organized this so here i have a div class of columns ignore the flow it's just for spacing but i have my columns and then i have my paragraphs that are set up right here and just like that and no flexbox no grid i just say columns three and guess what i get three columns there we go we get three columns they're they're working it's cool uh there are a few interesting things with this because it's breaking this paragraph in the middle as you can see and this paragraph is breaking over some columns so that's kind of neat maybe that's what you want to do and this is really really fun and cool uh the one thing with it is it's not really responsive but guess what i can actually make this responsive i can give it sort of like a minimum or ideal size and as soon as i do that and this is this is a shorthand where it's being broken up a little bit there's a lot more detail that we could go into this but i just want to give you an overview of it i have a video that does deep dive it and goes into more but you can see here that it goes to 2 and then it will go to 3 columns you might say they're getting kind of close we can come in with a gap of 2m and it's going the gap is going to work i think this is where gap actually came from originally before it got into grid or flexbox so we have that that's really cool um and this there is one gotcha with this though depending on the use cases you want to use it for which is let me just comment this back in which is if you're using it for content like cards or something like that where you have borders or background colors or stuff it will break across columns by default and that's really really awkward right if something like that happens um so generally if you had this type of content you wouldn't want that to happen so what you can actually do is on the element itself you can come in and say break inside avoid and as soon as you do that now the elements won't break inside and you get this responsive thing that works really well and you'll notice one other difference with it other than like with flexbox or with grid and stuff is this element is actually like going it's in its own column so it can drop down and this doesn't start after that one because it's not making rows this is all just based on columns and looking at the call the stuff in the rows so it's almost like a masonry layout but the big difference is a masonry layout will go left to right this does go up down and then back up to the top and then down and then like that so sometimes it's not exactly what you're after but i do think there's lots of cool use cases that we could be using columns and we're probably not using them enough as i said you can do a little bit more with the column property than i explored here so if you'd like more details on it or to dive deeper you can check out this video that is right here and with that a really big thank you to both zach and randy who are my supporters of awesome over on patreon as well as all my other patrons and of course until next time don't forget to make your internet just a little bit more awesome

Channel: Kevin Powell

Views: 52,003

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, mix-blend-mode, css properties, underused css, underappreciated css, css to try in next project, css columns, css column, css ::selection, ::selection, css quotes, css quote, style quotes, website quotes, currentColor

Id: qqaSJRNP8lQ

Length: 12min 53sec (773 seconds)

Published: Tue Jun 15 2021