Question

I’m using Javascript to inject some stylized HTML into another webpage (which has been crawled) and I’m trying to do it in a way that minimizes any conflicts with the CSS styles of the target page. I’m injecting a fixed-position <div> which floats cleanly on top of the target page.

So far, the approach I’ve taken is to create a unique CSS id (a kind of namespace) that first resets all imaginable styles and then applies its own styles:

/* reset */
#my-div {display: block; visibility: visible; margin: 0; padding: 0; ... etc}
/* my styles */
#my-div {margin: 10px 5px; ... etc}

However, the <div> contains text, links, images, so I’d be forced to do this for everything inside it and generate lots of CSS code. This is because the target page’s own styles will come through otherwise and affect my injected HTML.

I can do this… but I’m wondering if someone knows of a smarter/simpler way I could protect my HTML/CSS from those of the target page.

Thanks in advance for any ideas.

Answer 1

The simplest way is an iframe so that the styles of neither the iframe or the page effect each other. Overlaying will be trickier, however.