CSS: namespace part of HTML

I am creating a browser extension that inserts a piece of HTML into some pages. I would like the CSS page not applicable to this section. What is the best way to do this? Is there a good reset that I can impose on the root element of my HTML and set it to important so that it is applied after others?

+7
html css popup
source share
2 answers

The only way to deduce 100% from the cascade is to place it inside the iframe.

You can use the css stylesheet reset, but just prefix everything with your root id / class element. This will go a long way in dealing with effects, but in this area you will probably have to make a few more final adjustments.

Probably the best approach would be to simply set all the reasonable properties of your sub-rules. So, I mean, given the background, foreground, font, size, etc. Etc. Fully define the rules so that they say exactly what you want and do not leave space for the cascade to fill in the default values ​​that you are not interested in.

+2
source share

You can use CSS reset and apply it only to a subset of your page. For example, this one .

My page <div id="no-css"> blah blah this has no css </div> 

Of course you should cover everything in reset, for example:

 ol, ul { list-style: none; } 

it should be:

 #no-css ol, #no-css ul { list-style: none; } 

To simplify this, I recommend using a CSS framework, such as Less , which simplifies things like this:

 #no-css{ /* Big copy and paste of all the reset css file */ } 

Using this less code, you can either use less, or simply generate a new reset.css file and use it normally.

Of course, you can also find the specific reset element , but this solution allows you to choose any reset that you like best.

Another solution is to include your page in an iframe.

+6
source share

All Articles