{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/unknown-parts-of-css-the-all-property","result":{"data":{"markdownRemark":{"excerpt":"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…","html":"

Hello... well, i'm back.

\n

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.

\n

Maybe i will make this a long topic in near future named \"The Unknown Parts of CSS\" but lets get into it.

\n

Lets start with the all property. You might not heard of it but trust me CSS all property is really handy in some situations.

\n

So you might be thinking what does all property do?

\n

What it does πŸ€”

\n

CSS all property basically resets properties which are set previously in any element.

\n

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 !important everywhere.

\n

Here's a typical scenario where you want to reset the a tag's styles.

\n
a {\n  border: 1px solid black;\n  font-size: 24px;\n}\n\na {\n  /* it will reset all the previous styles 🀯 */\n  all: unset;\n}
\n

Yup! that is really useful and handy.\nthe all property could take one of the following values

\n\n

Demo 🀯

\n

\n

As you can see how the link is affected by the all property. and it resets the styles.

\n

Browser Support πŸ“Š

\n

Browser support is also pretty nice with the exception of IE11 and Opera Mini. (rip them)

\n

\n \n \n \n

Comment down if you want to see more tricks and tricks about CSS

","timeToRead":2,"id":"c84619d2-94d9-53d9-ae34-f109e938686c","frontmatter":{"date":"March 15, 2020","title":"Unknown parts of CSS - The 'all' property"}}},"pageContext":{"slug":"/blog/unknown-parts-of-css-the-all-property"}},"staticQueryHashes":["1033876704","3435786681","550521386"]}