How can I prevent CSS from affecting certain element?

Question

I am writing a GreaseMonkey script that sometimes creates a modal dialog – something like

<div id="dialog">
   Foo
</div>

. But what can I do if the site has something like

#dialog {
    display: none !important;
}

? Or maybe the owner of some site is paranoid and has something like

div {
    display: none !important;
}
div.trusted {
    display: block !important;
}

because he doesn't want people like me adding untrusted content to his page. How can I prevent those styles from hiding my dialog?

My script runs on all pages, so I can't adapt my code to each case.

Is there a way to sandbox my dialog?

score 1 · Accepted Answer · answered Jul 01 '13 at 15:41

Actually a very interessting problem, here is another approach:

adding an iframe and modifying it creates a seperate css space for you (your sandbox)

look at this jsfiddle example: http://jsfiddle.net/ZpC3R/2/

var ele = document.createElement("iframe");
ele.id = "dialog";
ele.src = 'javascript:false;';
ele.style.height = "100px";
ele.style.width = "300px";
ele.style.setProperty("display", "block", "important");
document.getElementById("dialog").onload = function() {
    var d = document.getElementById("dialog").contentWindow.document;
    // ... do your stuff within the iframe
};

this seems to work without problem in firefox.

now you only have to make sure that the iframe is untouched, you can do this they way i described in my 1. answer

might be problematic if you have many litte div boxes (like for example you want to add something to every post of a bbs, i dont know how good browsers handle a lot of iframes. but there doesnt seem to be another way to override !important styles without inline styles — x4rf41, Jul 01 '13 at 15:48
Thanks for the warning, but I will only need one iframe, so no problem — Oriol, Jul 01 '13 at 15:51

score -1 · Answer 2 · answered Jul 01 '13 at 14:58

-1

just create the div like this:

var ele = document.createElement("div");
ele.style.setProperty("display", "block", "important");

that should overwrite all other styles afaik.

look here, it seems to work: http://jsfiddle.net/ZpC3R/

answered Jul 01 '13 at 14:58

x4rf41

5,184
2
22
33

Well, you're right. With inline stiles with `!important` I can override everything. But then I should reset ALL properties of ALL elements inside my dialog... And I should so some checks, e.g., I should set `display:inline` instead of `block` to the ``s inside the dialog. – Oriol Jul 01 '13 at 15:19
the only way around it would be to modify the style classes, but that would break the page design, you basically want a div box that has completely seperated css. maybe look at a common reset.css and edit all classes like this: `span {..}` to `#yourdiv span { ..}`. the id of your main (wrapping) div should be very unique (some long hash or so). maybe that works – x4rf41 Jul 01 '13 at 15:24
That could be a good solution. But it's not perfect. For example: http://jsfiddle.net/qffHb/ – Oriol Jul 01 '13 at 15:43

How can I prevent CSS from affecting certain element?

2 Answers2

Linked