How to CSS sandbox/reset an entire DIV area in the current page?

Question

We are developing a bookmarklet, and when the bookmarklet loads on different websites, eg: cnn.com, bbc.co.uk, yahoo.com it displays in various styles and we have struggle to reset these styles.

The bookmarklet content is in the current page DOM and not in an iframe (because we need cookies and access to DOM).

We tried using CSS reset, but that resets only some basic stuff, like margins. And pages where for example there is a custom form, or rounded table rectangles it inherits and it should not.

Is there a way that we can completely isolate this DIV area in the current page to look only as we want?

Answer 1

How about trying to replace your div with some obscure element that is unlikely to be on their pages.

eg. b or em or i or maybe even one of the newer html5 elements if you're not fussed about browser support.

And styling them to display: block to function like a div which is a block element.

Your resultant HTML is not going to be valid or pretty, but it's a bookmark so, meh.

Short of that, a really good reset is what you'll need.

Or you'll just have to live with slight differences in your styling.

Answer 2

We end up using https://github.com/premasagar/cleanslate

CleanSlate is an extreme CSS reset stylesheet. It is used to reset the styling of an HTML element and all its children, back to default CSS values. It is composed exclusively of !important rules, which override all other types of rules.