CSS reset that sets everything to default values

Question

I'm working on a browser extension that adds it's UI to the pages DOM. On some pages I have the problem certain styles affect my UI. To counter this I keep my UI underneath a common root which resets most of the styles to the default value.

Sometimes I missed things which causes visual glitches in my UI. (i.e. the pages CSS file sets form { width: 80%; } so I need to add form { width: auto; } to my reset styles.

Is there a collection of styles that reset every CSS attribute to the value that is declared as default by the standard for every element?

Answer 1

I have come across the same problem. The usual CSS normalizers listed by the other answers does not answer the question because it is made to cancel the differences across the browser's default styles.

In the context of an extension, I needed to cancel every specific style that may exist on a random website.

I have come across this solution (I am not sure if it was possible at the time of the question, 7 years ago).

.your-container-class,
.your-container-class *,
.your-container-class *::before,
.your-container-class *::after {
    all: initial;
}

So far it seems to achieve the goal by removing the differences across websites. The downside is that it resets even some default styles (ol, ul, li not behaving like lists for example).

Answer 2

1. Eric Meyer’s “Reset CSS” 2.0
   _{(the original one)}

2. HTML5 Doctor CSS Reset
   _{(extends the Eric Meyer's one to improve HTML5 tags reset)}

3. Yahoo! (YUI 3) Reset CSS
   _{(based on Normalize.css)}

4. Universal Selector ‘*’ Reset

5. Normalize.css 1.0 2.1.3
   _{("…as used by Twitter Bootstrap, HTML5 Boilerplate, YUI 3, Pure, TweetDeck, Soundcloud, Medium, NASA, GOV.UK, Guardian, Rdio, Favstar, iA, and many others.")}

There are others, but this were (and still are) the 2012’s most popular CSS Reset scripts.