How to encapsulate CSS, especially for popups and without iframes?

Question

A new css web page just appeared for a fancy pop-up from the design team;

And they do not know or do not want to look for existing classes and identifiers;

I need a working solution without IFRAME

The problem is that there are already more than 20,000 lines of css in the main css file, and at some point something will be overwritten, and the whole site will make a big BANG!

This new web page has very common class and id names, and I'm talking about almost 100 tags with css properties;

I want to know if the encapsulate method exists for new css properties and future ones

And if there is a way to do this, how can this be done?

I was lucky with this web page, I inserted tags with content and before that I used the style type"text/css' tag style type"text/css' ; But I’m not always lucky

Just because we get web pages with css code written by different people is not suitable for me to create new css classes if some of the properties or names or ids intersect each other.

Now I have about 10 classes for a tag and im for the most part, the properties are the same;

Answer 1

Use targeted rules and let the cascade take care of this for you. Place the popup in the wrapper with the detailed name you like.

 <div id="myPopupDivWithCommonIds"> <!-- rest of popup --> </div> 

And assign your css rules to this div.

 #myPopupDivWithCommonIds .error { color: bright-pink; } #myPopupDivWithCommonIds #main { width: 93.21%; } 

Etc. etc. This will take care of css rules and prevent overflow of your new stuff. You will need to make sure that none of the other rules leak out; the best way to do this is to intelligently rewrite any properties that are defined (as Pekka said). You can also use the kernel version and include a custom “reboot” or “bootstrap” style sheet and redirect all your rules to your new popup div again (as you said, this is difficult for 20k css lines, but includes another file with reset rules aimed at to your div, adding the #id selector as described above helps a bit.)

Oh, and this still does not solve the problem of duplicate identifiers, which are technically invalid markups and, most likely, prevent any JavaScript that you try to run on this page.

If that sounds like a mess, well, it is. Your developers and designers got to this point and did not receive serious refactoring, you will not return to a clean solution. An IFrame may seem hacked or impossible for your use case, but it will really remove a lot of your correctly anticipated problems.