CSS partial inheritance - from browser, not page

Add-ons Development
1

Hello,
I’m trying to solve a simple issue:

I’m injecting content script that will build a custom piece of html inside current page.
I want to avoid CSS conflicts - like if the page defines rule like:

div { display: none !important }

I’ve found that I can use all: initial; all: unset; to not inherit any styles - but this includes also all default styles from Firefox.

Is there a way to inherit Firefox styles while skipping all page styles?

I was also thinking about using iframe, but I’m afraid it will cause more harm (also I’m not a fan of iframes).

2

I am also facing the same issue. For now, I am using an iframe which communicates with background script and content script.
Where do you put all: initial; all: unset; ? I didn’t find this info on MDN.

3

They are CSS properties:

MDN:

Hmm, now that I’m looking on this MDN, there may be a way…

1 Like
4

And then you look at the browser compatibility table and realize, no, there’s not.

5

Thank you for the link. I didn’t know this CSS rule. Did you find a solution?

6

Not really. The revert value looked promising but as @freaktechnik mentioned, it’s not supported by Firefox.
I’m still hoping somebody will come up with a proper way…

7

Effectively, it is a CSS4 property and it is only available on Safari for now.
I think the proper way is to use an iframe as you mentioned.