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

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.