Is it possible to embed some code in Javascript or CSS for a particular webpage to disable (not load) the user agent style sheet that es with the browser? I know that I can override it by CSS, but that creates lots of overriden specifications, and that seems to highly affect the CPU usage when browsing the page. Especially, I did something like *{margin:0; padding: 0}, which seems to be expensive for rendering (particularly the * selector is expensive). So, I do not want to heavily override the user agent style sheet but rather disable that in the first place if possible. Is this possible? If so, how? I am especially using Google Chrome, but would expect a cross browser way if possible.

Is it possible to embed some code in Javascript or CSS for a particular webpage to disable (not load) the user agent style sheet that es with the browser? I know that I can override it by CSS, but that creates lots of overriden specifications, and that seems to highly affect the CPU usage when browsing the page. Especially, I did something like *{margin:0; padding: 0}, which seems to be expensive for rendering (particularly the * selector is expensive). So, I do not want to heavily override the user agent style sheet but rather disable that in the first place if possible. Is this possible? If so, how? I am especially using Google Chrome, but would expect a cross browser way if possible.

• javascript
• css
• user-agent

• This is not possible and your concerns about the work around options are a bit strange considering most websites use some sort of css reset. – Alex Gill Commented Oct 26, 2012 at 10:19
• 1 @Alex I had near 100% CPU usage on a page I generated with the CSS override *{margin:0; padding: 0;}, and when I took that off, the performance dramatically improved. So there is a difference. – sawa Commented Oct 26, 2012 at 10:20
• Woah, take it its a big site? – Alex Gill Commented Oct 26, 2012 at 10:25
• @Alex It is a single static page with several hundred hidden <li> items that alternatively bee displayed with a click of a button powered by Javascript. I firmed that the Javascript part is not using up the CPU much. – sawa Commented Oct 26, 2012 at 10:31
• How are you testing? Are you sure this is not just the browser as Chrome can cause high CPU usage, depending what else is running. – Alex Gill Commented Oct 26, 2012 at 10:37

4 Answers 4

I wonder whether there is a way to disable user agent style sheet directly in JavaScript. There does not seem to be any direct way, since document.styleSheets does not contain the user agent style sheet. On the other hand, Firefox Web Developer Extension has, in the CSS menu, an option for disabling Browser Default Stylesheet.

Anyway, there is a markup way, though I’m not sure whether you like its implications. To start with, it does not work on IE 8 and earlier (they’ll show just XML markup, not the formatted content). But modern browsers can handle this:

1. Use XHTML markup but do not include the xmlns attribute in the html tag.
2. Serve the document as application/xml.
3. For elements that should be handled with their HTML semantics (e.g., input creates an input box), use the xmlns="http://www.w3/1999/xhtml" attribute on the element or an enclosing element.

Simple demo.

This means that outside the effect of xmlns attributes, all markup is taken as constituting pure, meaning-free, formatting-free (all elements are inline) elements. They can be styled in your stylesheet, though.

But this way, you cannot both keep the HTML cake and eat it. That is, you cannot get HTML functionality (for form fields, links, etc.) without having user agent stylesheet being applied to them.

Use a "reset stylesheet" - this one is good: http://html5boilerplate./

It's not possible. Just create a css file called by most of the people 'reset.css' which includes all the css code used to override user agent's styles

You can use something like reset css (http://www.cssreset./) to reset all browser styles..

or, what i prefer, use normalize css (http://necolas.github./normalize.css/) that normalizes the css without resetting all styles like list styles on ul, li etc. (reset.css would do that)