Geek Answers Handbook

How to prevent CSS from interfering with the injected part of HTML?

I am currently developing a Safari extension that uses an embedded script to further enter some HTML into the current web page, as well as to enter some other scripts to make it work. All of this works great, but the problem is that the HTML that you enter is affected by the CSS stylesheets that the web page has already imported. For example, HTML looks great on Google.com (which has relatively few CSS styles), but terrible on StackOverflow.com (which style buttons, etc.).

jQuery is injected into the webpage while this HTML is being displayed, so I have this. I tried all kinds of things, including going through all the elements and calling removeClass() for each of them, but to no avail. I also tried adding CSS reset classes, etc., but nothing works.

What is the best way to avoid CSS interference in my HTML?

+4
source share
3 answers

You cannot prevent this. However, you can override CSS rules. Give your main element a unique identifier (which really should be unique by obfuscation, for example, "yourapplicationname_mainelement_name" or something like that), then redefine all possible styles that may give strange effects for 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 ... }

Since your CSS style rules are most specific, given your identifier, they will override any parameters present on the page where your html is entered.

More ... It may be difficult to understand which rules are the most important. You can use firebug or similar to understand what overrides another. When developing an application, it will not be easy for you.

+5
source

that heavy. two options, as I see it. You can set the wrapper div around all your content and the prefix of all your css. Example:

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

style sheet:

 .wrappingDiv * {}

Then, when you add jquery, use this to close the initial div wrapper in front of your content and wrap any next content in another div.

Questions:

  • It is possible only by injecting other site content on your own site.
  • This can get complicated depending on where you enter the HTML.

Another option is to load a reset stylesheet designed specifically for your nested html. In this case, only your injected html will be wrapped, but you will need a css file for which reset all attributes for all tags will be used by default before adding your own styles. No real problems here, just not very elegant ...

Another way would be to use an element that does not inherit a stylesheet, such as an iframe, but this is due to its own problems ...

+1
source

I saw on different plugins that they put code inside an iframe, and they use JS to interact with the rest of the page, so you cannot change the css inside.

I also saw that when entering the html code, people set the style of the plugin content using the "style" attribute inside the tags, so the browser will give priority to css inside the style attribute, not the css file. The idea is to override css, usually with a "! Important" clause. But you may have problems with various browsers.

EDIT I forgot to say that my answer is when you enter code on someone else's page where you cannot directly control css

0
source

More articles:


All Articles