CSS: Namespace a piece of HTML

Question

I'm building a browser extension that will insert a chunk of HTML into some pages. I'd like the page's CSS to not apply to this section. What is the best way to do this? Is there a good reset I can put on the root element of my HTML and set it to !important so it gets applied after others?

Answer 1

The only way to 100% take it out of the cascade is to put it inside an iframe.

You could use a css reset stylesheet but just prefix everything with your root element id/class. This would go a long way to combating the effects but in the field you will probably have to do some more final tweaks.

Probably the best approach would be to simply set every reasonable property of your sub-rules. So what I mean is set the background, foreground, font, size, etc etc. Fully define the rules so that they say exactly what you want and don't leave any space for the cascade to fill in defaults that you're not interested in.

Answer 2

You could use a reset CSS and apply it to only a subset of your page. For instance this one.

My page
<div id="no-css">
 blah blah this has no css
</div>

Of course you have to scope everything in the reset, for instance:

ol, ul {
    list-style: none;
}

should be:

#no-css ol, #no-css ul {
    list-style: none;
}

To simplify this, I recommend using a CSS "framework" like Less which simplify this kind of things:

#no-css{
    /* Big copy and paste of all the reset css file */
}

Using this less code, you can either really use less or just generate a new reset.css file and use it normally.

Of course you could also find an element specific reset but this solution allows you to pick whatever reset you like the most.

The other solution is to embed your page into an iframe.