CODEWITHSUNDEEP
javascriptcssuser-agent
sawa
sawa

Reputation: 168101

Disabling user agent style sheet

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

Upvotes: 5

Views: 31883

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

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.org/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.

Upvotes: 6

alphanyx
alphanyx

Reputation: 1687

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

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

Upvotes: 0

Eru
Eru

Reputation: 675

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

Upvotes: 0

daniel
daniel

Reputation: 1433

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

Upvotes: 2

Related Questions