How do I prevent CSS interference in an injected piece of HTML?

Question

I'm currently developing a Safari extension that uses an injected script to further inject some HTML into the current webpage, as well as injecting some other scripts to make it work. This is all working fine, but the issue is that the HTML that is injected gets affected by CSS stylesheets that the webpage has already imported. For example, the HTML looks perfect on Google.com (which has relatively little CSS styling), but awful on StackOverflow.com (which styles buttons etc).

jQuery is injected into the webpage at the time of this HTML being displayed, so I have that available. I've tried all kinds of things, including walking through all of the elements and calling removeClass() on each of them, to no avail. I've also tried to add "CSS reset" classes, etc, but nothing seems to be working.

What's the best way to go around preventing the CSS from interfering with my HTML?

possible duplicate of [Is there a way to "sandbox" an html block away from its page's CSS without using iframes?](http://stackoverflow.com/questions/3529513/is-there-a-way-to-sandbox-an-html-block-away-from-its-pages-css-without-using) — Pekka, Aug 22 '10 at 09:47

Johan · Accepted Answer · 2010-08-22T09:43:38.160

You can't prevent that from happen. However, you can override the CSS rules. Give your main element a unique id (which really should be unique by obfustation, like "yourapplicationname_mainelement_name" or something), then override all possible styles that might give strange effects on your html.

Your plugin:

<div id="yourapplicationname_mainelement_name">
  <p>My paragraph that must not be styled</p>
</div>

Your css:

#yourapplicationname_mainelement_name p {
  display: block;
  color: black;
  background: white;
  position: relative;
  ... and so on ...
}

As your css style rules are the most specific, given your id, they will override any settings present on the page where your html is injected.

Further... It might be hard to see what rules are the most important. You can use firebug or similar to understand which is overriding another. You'll have a hard time without it when developing your application.

I tried something similar, though I suppose the class names may have been conflicting or something. This seems like the right way to go though. Thanks. — Anshu Chimala, Aug 24 '10 at 21:51

score 1 · Answer 2 · answered Aug 22 '10 at 09:53

that's a tough one. two options as I see it. You could set a wrapping div around all your content and prefix all your css with that. example:

<body>
  <div class='wrappingDiv'>
     ...
  </div>
</body>

stylesheet:

.wrappingDiv * {}

Then when you inject jquery use that to close off the initial wrapping div before your content and to wrap any following content in the another wrapping div.

Issues:

Only possible if you are injecting other site content onto your own site.
This could get complicated depending on where you are injecting html.

The other option is to load a resetting stylesheet that targets your injected html specifically. In this case only your injected html would be wrapped but you'd need a css file that reset all attributes for all tags to their default before you add your own styles. No real issues here, just not very elegant...

Another way would be to use an element that doesn't inherit stylesheet like an iframe, but that comes with its own issues...

score 0 · Answer 3 · answered Aug 22 '10 at 09:54

i have seen on different plugins that they put the code inside a iframe and they use JS to interact with the rest of the page, so you can not change the css inside.

Also i have seen that when injecting html code,people sets the style of the plugin content using the "style" attribute inside the tags so the browser will give priority to the css inside the style attribute and not the css file. The idea is to override the css,usually with the "!important" clause. But you might have some problems on different browsers

EDIT i forgot to say that my answer is on the case that you inject the code on someone's else page where you cannot control directly the css

How do I prevent CSS interference in an injected piece of HTML?

3 Answers3

Linked