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?

It's not exactly what you are looking for, but maybe it's helpful: https://github.com/necolas/normalize.css — idmean, Oct 23 '13 at 13:17
Looks like you are looking for the answers at https://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only — JoeDuncko, Aug 05 '18 at 02:35
Visiting from seven years in the future. We don't have it yet, but it would be great to see `.my-element, .my-element * {all: default;}` at some point. — Rounin, Sep 23 '20 at 21:51
Shadow dom / custom elements from web components is the way to go here. — David Vielhuber, Aug 11 '21 at 22:16

score 5 · Answer 1 · answered Mar 14 '20 at 07:06

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).

Andrea Ligios · Answer 2 · 2013-10-23T14:10:25.910

3

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

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

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

Universal Selector ‘*’ Reset

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.

edited Oct 23 '13 at 14:10

answered Oct 23 '13 at 13:21

Andrea Ligios

49,480
26
114
243

3

I think these frameworks are not really a solution here. They work based on the well-defined default styles of the browsers. But what Martin asks for is a super-aggressive reset that does not make (many) assumptions about the styles applied previously. – h0b0 Oct 14 '16 at 13:42

score -1 · Answer 3 · answered Oct 23 '13 at 13:19

I recommend using a quick Google search to find something like so: http://meyerweb.com/eric/tools/css/reset/

You can implement the reset in as-is and then if any problems arise down the road, simply add to it as needed.

Be aware that some pre-made CSS resets require a shout-out to using them.

score -1 · Answer 4 · answered Oct 23 '13 at 13:20

Yes, absolutely.

There are two schools of thought to this. One is the zeroing style reset sheets, which basically remove all margin, padding and other such settings from the css. A good example of this is Eric Meyer's Reset CSS

The other approach is to set everything to roughly what you'd sensibly expect it to be, setting a reasonably looking margin to paragraphs and headings, indenting lists etc. A good example of this is Normalize.css

Some browsers also support the initial value, which sets the value of a property back to what it intially was. It's not widely supported enough to use in production, IMO.

score -2 · Answer 5 · answered Oct 23 '13 at 13:17

-2

Html5 boilerplate has an normalize.css which sets al lot of css styles to a default. http://html5boilerplate.com/

answered Oct 23 '13 at 13:17

veelen

1,916
19
26

score -2 · Answer 6 · answered Oct 23 '13 at 13:19

As you are applying your styles to different pages with different unique styles, its hard to say if you will get success on removing all styles from all pages with some CSS reset.

But maybe these can help:

Normalize.css (used by many CSS frameworks)

CSS Reset by Meyer

CSS reset that sets everything to default values

6 Answers6

Linked