Initial doesn't do what you think it does

Key Takeaways

i'm going to put this display initial on these paragraphs here but before i do i want you to take a second i'll give you a second to think about it or pause the video and see if you can think of what's actually going to happen when i do this what's going to change what's going to stay the same keep it in mind and in three two one here we go and is that what you were expecting some of you probably got it right but for a lot of people you probably weren't expecting exactly that and if that's the case and you want to know what happened and other things you could use instead of initial that would behave more like you think they would then stick around because that's exactly what this video is going to be about hi there my friend and friends and welcome back to the channel i'm so glad that you've come to join me today and if you are new to my channel my name is kevin and here at my channel i hope you fall madly deeply in love with css and if not deeply in love with it at least you hate it a little bit less just before we dive into it i want you to take a moment to comment down below and let me know if you got it right when i before i set that paragraph to initial if you if you guessed right or if you knew what was actually going to happen there or not so leave a comment down below be honest about it it's okay when we get things wrong because we're all here to learn and part of learning is getting things wrong and learning from that and yeah we're here to learn about initial and why it's probably not what you want to be doing and or using and what you actually probably want to be using is either onset or revert so let's dive into the code and see how all of these things actually work all right so here we go and as you can see i put together a really really ugly page for this one and we're going to use this to explore initial and what it actually does and the other properties or in the properties or the other values that we have instead of it so the first thing is you can see i've styled some buttons here and see these are actually outlines on here just little tangent outlines are now getting border radiuses on them this is in chrome canary so it hasn't made the main chrome yet but it's on the way there which is super exciting and uh if you were at my last live stream with adam argyle then he's the one who let me know these are on the way which is super cool um all right so the first thing we're going to do is look at this button that we have right here so we have these three buttons that i've done and this is a button very different because sometimes this happens you style things in a very specific way i you know all of your buttons or something and then you need to get away from that and if you didn't know we have an all keyword that we can actually use our keyword it's a property uh so we have the all property which just selects every single property and that's often not useful but then maybe what you'll do is an initial on there ineo and when we do that it sort of goes back to not initial though right because often what people think initial does is to reset it as if we didn't do anything but that's not what's actually happening here because you know if we hadn't done anything we're gonna see how we can actually do that um but if we hadn't done anything then it would look like a normal button but it doesn't look like a button it's actually resetting it further than that and the thing that's weird about initial is let's just we're gonna scroll down a little bit let's go down to this other section this a different section here and i'm going to go to here section very different star which is selecting everything that's inside of this section and i'm going to say the same thing all and we'll do initial first and we're going to see you've got to spell things right if you want them to work all initial and you can see here that section is completely different so i had a container got rid of my container doing anything but i had multiple paragraphs in here just like we saw at the beginning they're all strung together uh the font has been reset as you'd sort of expect there but what the initial does is it actually looks at different ones so before we looked at display initial um and even you know we could even should we muck things up even more look at this we're just going to do a star and do a display initial watch the cree nish you'll watch the craziness that this will do where we can even see my my css showing up because it's even taking the the head and you know we're seeing things there's the title so what the initial keyword is doing is it's not looking at what it's being applied to so let's get rid of this because it's all kind of weird and what it's doing is it's it's looking at display but it's not looking at that this is a or even let's just do paragraphs now so it's a little bit more um clear so there we go it's not looking at what it's styling it's just going to the display property and going what's the going into the spec what's the initial value of the display property and the initial value of the display property is inline and that's before we get to like the user agent styles that actually say actually no a paragraph should be block and all of that we're going beyond that we're ignoring what the element is and we're just resetting everything to like the real core in the spec of every single property so that's why initial usually doesn't do what you actually want it to do and it can turn things in line it can do all sorts of strange stuff uh like here where it's just completely reset my button so this is where we have other options like i said we have onset and we have revert onset is the first one that we got because i've been doing this for a long time we used to only have initial and this is like you know i was doing this when we were making table-based layouts we only had initial so we just um and in certain cases you could use it for for certain properties i wouldn't use it on the all though just because it does crazy stuff but all initial and instead of that we can use an onset and you'll notice that onset is going to do some things similarly but something's different where we still have my button my outline is showing up just because that's styled on the hover and stuff we're not going to worry about that you'll notice the font is different but the font size and the color and all that have come in so let's just do all onset here just we can comment things on and off if we feel like we need to so what the difference between onset and initial is onset will look if the property should is traditionally inherited or not so in this case normally the font family so font family or the color are inherit so instead of going all the way back and setting things to like that crazy thing where it's going back to black it's like going back to the original like everything uh where it's not even inheriting anything there's no inheritance happening now for color for font size for fun family all of that is out the window uh whereas if we do an all on set it's going to set anything that should be inherited or that normally is inherited it will still be inherited now you might be saying but kevin like buttons normally don't inherit anyway and i know that but let's say we come on my paragraph here and i just say all um initial you'll see that like my all my paragraphs here they're going to go back to black and we can see they're becoming inline it's just going to like default city uh it's not using so we lose a lot of the power of css when we use initial because that inheritance is gone so that's onset which sets things back now for a lot of things like say even here we did um display is on set it's going to behave just like we saw before where it's going to make it all in line because the display property is not something that's inherited so if something is not inherited then it just goes back to that factory factory reset of the display property not for my paragraphs themselves and that's not the greatest thing in the world but just so we know that's what it does um and this was sort of the next stage along the way it's in my opinion better than initial but it's still a little bit heavy-handed as you can see there where some things you might have unintended consequences sometimes or then there's the one that you probably want to be using this entire time though sometimes maybe onset is the right call and so that's where we have in all and i'm just doing all we don't have to always do it on an all but it sort of really shows what's happening we have the revert and i'm leaving these on just because like you know this is replacing this one because the order of the cascade here so i'll revert look it's gone back to being a default button just like you'd expect it to be and this is the really cool one and i love revert and what it's basically doing is going get rid of any styles that are applied on it but go back to the user agent styles that we would have started with if there was no css applied here in the first place whereas onset sort of strips things back a little bit further than that this is really the revert keyword here as a value is going to what's the user agent style doing and ignore the css that was previously applied by the author who's authoring the css and this is often what we think initial is actually doing so if you do need something like this uh revert can be really useful so sometimes you might want the onset other times you might want revert it depends on which one you want to do uh maybe you try one you try the other but i really do think that most of the time you don't want to be using initial and if you've learned a thing or two during this video i have a little playlist for you right here of other css properties that often catch people off guard that you can check out and with that a really big thank you to zack randy and stewart who are my supporters of awesome over on patreon as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome