A headache named default style in CSS
At least once, Front-end developers tackled default style in their projects and professional life. And also, swearing at CSS creator or Google Chrome and so on as well. So how we can get rid of this nightmare? Is any easy peasy lemon squeezy way to solve the problem?
Yes, this Is the short answer to this question. But how? In this short article or whatever you named, I will introduce how you can reset all the user agent and default styles.
Where the default style comes from?
Before understanding the solution, it’s important to understand where we get our basic styles in our browser.
All the HTML element come with initial
value to load the default style of each element.
The User-Agent Browser Styles
After applying the initial styles of all the CSS properties, the browser finally loads its default styles which are known as user-agent
. These styles have nothing to do with the base initial values of the CSS properties.
Also, you can see them in the Chrome developer tools.
For Example:
HTML elements do not have initial style values! The basic styles of an HTML element, such as the <h1>
tag, for example, comes from the browser user agent stylesheet and not from the initial
value of the properties of CSS.
And now lets to talk about the solution
To reset all the user-agent
styles, you can easily use all:unset
property for each element in the CSS.
For example: h1{all:unset}
There are different values for all
like initial
and inherit
which you can read about them more in the developer.mozilla.org.
Browser Support
inherit
- works in all browsers, including Internet Explorer 11initial
&unset
&revert
- work in all browsers except for Internet Explorer 11
Final Words
That’s all.
I hope you’ve enjoyed this article and learned from my experience.
If you like this post, I would appreciate applause and sharing :-)