Hello... well, i'm back.
This is my first post in 2020 and today i'm going to talk about the unknown parts of CSS or should i say "lesser known" parts of CSS.
Maybe i will make this a long topic in near future named "The Unknown Parts of CSS" but lets get into it.
Lets start with the
all property. You might not heard of it but trust me CSS all property is really handy in some situations.
So you might be thinking what does
all property do?
CSS all property basically resets properties which are set previously in any element.
It is useful for making component-scoped CSS where you might want to reset all the properties of an element and start from scratch, or maybe sometimes you need to reset some styles instead of using
Here's a typical scenario where you want to reset the a tag's styles.
border: 1px solid black;
/* it will reset all the previous styles 🤯 */
Yup! that is really useful and handy.
all property could take one of the following values
Specifies that all the element's properties should be changed to their initial values.
Specifies that all the element's properties should be changed to their inherited values.
Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not.
As you can see how the link is affected by the
all property. and it resets the styles.
Browser support is also pretty nice with the exception of IE11 and Opera Mini. (rip them)
🙏 Thanks for reading! hope you liked the post. I will be writing more short blogs about CSS's unknown parts so stay tuned. Have a nice day bye! 👋
Comment down if you want to see more tricks and tricks about CSS