Greg Greg - 4 months ago 9
HTML Question

Is there a way to "sandbox" an HTML block away from its page's CSS without using iframes?

Is it possible, for example, to have a

div
that completely ignores CSS rules, no matter what
class
es and
id
s it contains?

Answer

Nope, this is (sadly) not possible without an iframe.

You would have to reset every existing CSS rule for that div like so:

div.sandbox
 {
    font-size: ....
    font-family: ..........
    margin: .........
    padding: .........
    line-height: .........
  }

while difficult and never 100% reliable, it might be possible to achieve a usable result this way. You could look at one of the "reset stylesheets" like Eric Meyer's to get a list of important properties to reset; here is what claims to be a complete list of CSS 2.1 properties - excluding CSS 3 and vendor specific ones, which you would have to take into consideration as well.

Providers of 3rd party widgets often hard-code their "reset CSS" as inline CSS inside the HTML element to override any !important rules that threaten to override the sandbox class's rules.

Comments