Another 5 Must Know CSS Tricks That Almost Nobody Knows

this next css property blew my mind when i discovered it because i really thought it was something only available in javascript [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 one way i want to help you with that is a free css selector cheat sheet i have linked down in the description below covers every css selector that you need to know and explains exactly what they do and if you download that cheat sheet now i might also throw in a bonus cheat sheet for you so make sure you check that out now the very first css property that i want to cover in this video is one that is really useful for doing things that you traditionally could only do with javascript so take for example this html code we have this simple button that says hover me and it should display this text tooltip text and this is something you would think that you would need javascript for but you can actually do this entirely with just css so let's come in here and we're going to select our data tooltip attribute and again this is one of those css selectors that you're going to see in that cheat sheet one that you don't see very often but it's incredibly useful being able to select data attributes like this and then we also want to select in here the data tool tip and we're going to get the before property just like that and this is because we want to be able to dynamically insert this text tooltip text into our screen and using a before pseudo-element is the perfect way to do that so we can just come in here and say content and you know normally we would have to set this to some kind of predefined string and if we save you can see that that string is showing up but we want it to be this data tooltip right here so we can use a property in css called attr this is a function and all you do is pass it in the attribute you want to get so you know you could do like the title attribute in our case we want the data tool tip attribute now if we say that you can see that that tooltip text is showing up inside of this before pseudo element and we want to make sure this only shows up when we hover over top of our button so let's use that hover attribute and now when we hover you can see the text is showing up but of course we want to style this as an actual tool tip so to do that we're going to make our actual tool tip be a position of relative and then we're going to make our tooltip that's being shown up with the before a position here of absolute so we can position this exactly where we want now when we save you can see the text is showing up like this if we set the width to 100 it's going to make it so that the text is all in one line which is what we want we can come in here with the background color we'll just make that black a color for the actual text which is going to be white and we'll put a little bit of padding of 0.25 rem obviously this is too big we should make this .25 rem and then we can see our tooltip but it's not quite positioned where we want it to and this is actually a little bit of a bonus tip that i'm going to show you which is how you can position things really easily with transform so what we want to do is make this tooltip show up at the very top of our button in the dead center so what we can do is we could say you know top zero for example and that's going to make it so the top portion of our tooltip lines up with the top portion of our button but we want to go a little bit further than that and what we want to do is say transform here and we want to translate the y direction by negative 100 and when we use a percentage inside of translating it'll actually take the height of our element and move it by 100 of its height upward so now if we save you can see our tooltip is moved by 100 of its height upward and if we want to give it some spacing between our actual button we can just make our top a negative number like negative 0.5 rem now if we save you can see we have that padding between our tool tip and our button now to get it centered inside of our button this is also something that's really easy to do with the transform we can set our left to 50 percent that's going to make it so that the left side of our tooltip is at the dead center of our button and then for our transform we can just change this to a normal translate and go by negative 50 percent in the x direction so it's going to move by half of its width to the left direction and here we're moving by the entire height upwards now if we save you can see the tooltip is perfectly centered and that's because we lined the left side up with the center of our button and then moved it over by 50 of its width which made it dead centered inside of our button this trick of being able to translate using percentages is incredibly useful anytime you're trying to center things or move things based on their own sizing translate with percentages is the only way you can do that in css now this next css property is one that's incredibly simple but is going to drastically clean up your css and make writing complex selectors so much easier so take for example here we have an unordered list and inside of that we have two other lists inside of it we have an ordered list and an unordered list and what i want to do with my css is make it so that every single list that is inside of another list has all of the text inside of it of the color red so to do that we need to make sure we of course check for unordered list inside of unordered list ordered list inside of unordered list ordered list and unordered list here and then ordered list inside of ordered list so we have a lot of different permutations of things we need to check and you can imagine that if we wanted to check this three levels deep we would have even more css classes we would need to worry about and it would get quite long and complicated to deal with writing out each permutation by hand and if you need to come back and change any of these it's a real pain to do and that is why css created something called the is selector so what i'm going to do is just write another selector that does the exact same thing right down here what we do is we do colon is and then inside of here we put anything that we want to check for so we say if this is either an unordered list or if it's an ordered list we'll just put a comma to separate them and then that's the first portion of our selector so it's taking care of unordered and ordered list then we're going to say you know what we want to do another is selector for unordered list and ordered list and then finally an li this selector right here does the exact same thing as a selector up here and if i copy in this color and let's just make it green for example and i comment out this above example and save you can see now our text has changed to green and that's because what this is selector it's just saying anytime that we have either an unordered list or an ordered list then followed by either an unordered list and an ordered list followed by an li then what we want to do is change the color to green and if we wanted to do this for three levels deep we would just put in another one of these like that and it's that simple we just change one single selector while up here if we wanted this to be three levels deep we wrote a whole mess of different permutations of selectors to deal with which would be an absolute nightmare to write out by hand while with this is selector it is so easy to deal with this next css property blew my mind when i discovered it because i really thought it was something only available in javascript and that's the ability to create a counter inside of css i know it sounds confusing but let me explain i have two different examples i'm going to use the first one is going to be this example of headings you can imagine you have an article with different headings and there are different like parts within your article and you want to specify what part they are in order without manually coming in here and saying something like part one part two and so on you want the css to do this for you that sounds crazy but it's actually possible and this is by using counters so the way a counter works is you specify a container where that counter is going to live in our case the container is going to be our body so we can say body and then to specify that this is where the counter is going to happen we can say that our counter reset is going to be here we're going to reset our counter and we're just going to name it heading so we're saying every time we encounter the body element reset our counter back to zero obviously there's only one body so our counter is going to start at zero at the top of our body and just keep counting up so in order to increment our counter we need to specify what elements we incremented on so what we want to do is we want to take our h2s we want to get the before attribute inside of here we want to take our counter and we want to increment the heading counter so now what's happening is we have a counter that starts at zero on our body and every h2 that we hit it's going to increment our counter by one so the first stage two is going to have one then two then three and so on so now we're automatically counting our h2s in order and the reason we're doing this in our before attribute is because i'm going to come in here with our content i want to specify our content as the actual counter so we can just call this counter function and pass it in the name which is heading this is actually going to print out the content of our counter if we click save you can see we get 1 2 and 3 being printed out if we want to make this look a little bit better we can put some text inside of here such as saying part and then we want our counter and then of course we want to space afterwards so we're just going to put that space inside of here and now you can see it says part one if i put a space here now it says part one and then intro we can even put in that colon just like that and you may be used to putting like pluses in between your sentences like this if you're inside of something like javascript well with css you just put your string you're going to put a space to separate it and then your other thing then a space and the rest to the string and that's going to do all the concatenation for you automatically so you can see we have part 1 part 2 part 3 automatically being printed out by our css we can even take this a step further and actually specify what we actually want our styling to be so we can come in here and say upper roman and this is actually going to give us roman numerals instead of numbers there's a ton of different styles you can use you can really play around with what you want but you can specify that as a second property to counter now on top of just being able to do one level of counting you can actually do nested counters as well we come down here i have an ordered list and inside of i have some lis and then i have more ordered lists inside of it so i just have a bunch of nesting as you can see we have one two one two three one two four three four just like this and what i want to do is i want to make this look more like an outline so i want this inner one to say something like 2.1 and this super inner one would say like 2.3.1 because it's keeping count of everything else around it so we can actually do that using these counters because you can actually stack nested counters on top of each other without having issues so we know we want our counter on these ordered lists so we can just say ordered list and we want to reset our counter every time we get to an ordered list and we're just going to call this outline for example then whenever we reach an li this is where we actually want to display our counter so we're going to use that before property inside of here so we can say content is just going to be equal to our counter being printed out for now i'm just going to leave this blank and we'll come back to it a little bit and here i'm going to go counter increment for our outline so what's going to happen is we're going to hit our ol and it's going to start our counter at zero and then each li we hit it's going to increment it by one and when we get to a new ol what's going to happen is going to start us a new counter at zero and we can actually use both of these counters simultaneously by using a function called counters instead of counter so here we can say counters instead of counter pass it in the thing that we want which is our outline and this is actually going to print it out and we can also specify how we want to concatenate these together so let's say we want to concatenate them all with a period in between them now when i save if we just make sure we take our li and say that our list style is going to be none that'll just get rid of these 1.2 dot that are already specified by allies by default you can now see we have one two and here it says 2.1 2.2 2.3 here we have 2.3.1 2.3.2 and so on and we can go a little bit extra with our styling by just adding in a period at the end and a space just to give us a little bit of spacing now you can see we have these nested styles and that's because we're using counters here instead of counter if we were to just use counter instead of counters you can see now that our outlines are resetting themselves every single time kind of like a normal counter would work but with counters we actually get the values of all of our different counters and it concatenates them with this character in between them so we can put whatever we want inside here i just have a period you know we come in here with multiple periods now it's putting multiple periods between each one of our different counters this is really great if you're working with nested outlines or really any type of nesting now unfortunately this counter syntax only really works when you're specifying the content of something you can't really use it inside of an actual width or height or color property that would be amazing but unfortunately that's not something you can do in css this next css property is one i've been waiting for for years and that's the ability to add in gaps into flexbox containers it's something you can really easily do with grid but in flexbox it's actually incredibly difficult to do normally if you want to have a gap between your items and flexbox what you would do is you take your flexbox container you would select everything that comes after it and you would set you know a margin on the right to maybe 10 pixels as you can see that gives us 10 pixels of space but this last element also has 10 pixels of space on the edge so you need to come in and actually remove that so you would take the last child here and what you do is you essentially come in here and say margin on the right is going to be zero and it's going to remove that extra margin on the right so now we just have a 10 pixel gap between each one of our different elements unfortunately this is not the cleanest code in the entire world it's kind of a pain to do so luckily they're working on adding a property to flexbox just like grid where you just say gap 10 pixels and if we save you can now see we have a 10 pixel gap between each element and that is way less code and way more simple to work with than that weird syntax of having to select all the children and ignore the last child unfortunately though this property is not quite supported in all browsers if we go over and look at the can i use for this you can see that the gap property for flexbox is supported in most browsers we have an edge firefox chrome opera but the main ones that's not supported in is safari and some of these more mobile browsers don't quite have it yet so we really only have about 70 usage for this and again that's mostly because of safari safari on ios and some of these other mobile browsers that don't support it but this is something that you're going to see in the browsers very soon and i'm definitely looking forward to because this gap syntax is so much nicer than having to deal with last child and so on this final css trick is really cool because it's something you really only could do with svg before but now you can do it with just plain css and that's the ability to do a conical gradient normally the only type of gradient you could do that is circle based would be a radial gradient and that goes from the center of your object all the way to the outside of your object as you can see in the center it is this red color and then it permeates outwards towards this green color as since we're going from red to green well the conic gradient we can come in here and say conic gradient what that's going to do is it's going to start at the top here and it's going to go around in a circle transitioning from red all the way to green and then of course it has this harsh transition back to red at the start if we wanted it to be more gradual we would go from red to green back to red as you can see we started right up here transition to green all the way down to the bottom and then we go back towards red as we get to the top which allows us to do these really cool kind of pie chart style things and one really cool thing we can do with this if i just uncomment out this code here is we can actually do a conic gradient that's more of like a color wheel if we save you can see we now have a color where that has all these different colors from red purple blue green yellow all the way back up to red and that's really cool and all but the most important thing about these conic gradients is the ability for you to actually create things like pie charts so what we could do is we could say you know what we're going to have a red pie chart and that's going to take up let's say 0.25 turns and let's just comment out all this other stuff down here then what i want to do is have blue and this is going to go from 0.25 turn and make sure this is turned up here it's going to go all the way to 0.5 turn and then finally we're going to have something like green and green is just going to go from 0.5 turn all the way to the very end and now if we save you can see that 25 percent of our chart is red 25 percent is this blue color and 50 is green we've created a pie chart using just really simple css and depending on how complex your code is you can obviously generate this inside of javascript so you could have very fine-tuned numbers for a pie chart that's super simple to write out with this conic gradient you can use any colors you want any type of turn radius you want essentially the main thing is to determine the start and end point of all these different things for example we could make this go to 0.65 start this at 0.65 and now we have our pie chart looking like this as you can see we can really easily create these the main reason we don't have two numbers for red and green is because we're essentially going from zero to point two five and one turn all the way like this and these are just essentially values that are assumed you assume you go all the way to the end if you only have one value and you assume you start at the beginning if you only have one value which is why we can leave these values off and create this pie chart if you're looking to take your css skills to the next level make sure you check out that free css selector cheat sheet down in the description and if you do i'm going to throw in a bonus cheat sheet as well thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 52,210

Rating: 4.9795303 out of 5

Keywords: webdevsimplified, css features, complex css, new css features, future css, css, css tutorial, css new, new css, css project, css project tutorial, css top 10, css top 5, wds, css aspect ratio, css resize, css advanced, expert css, new css properties, important css, css4, css 4, css four, css3, css 3, css three, modern css, modern css features, modern css properties, cascading style sheets, modern html, cool css features, cool css, fancy css, how to write css, html, js

Id: 0gayskscLY4

Length: 15min 13sec (913 seconds)

Published: Tue Apr 27 2021