1

I'm writing a WebExtension that injects some HTML elements and CSS into a page. My problem is that it's cumbersome to control for the elements not to inherit styles from the main website stylesheets, especially rules that apply to certain elements, not classes or IDs.

For example, my button elements tend to inherit styles from the main site if there's some .button {...} rule defined for that site (and I don't explicitly override it).

How can I prevent this?

Joko
  • 166
  • 3
  • 17
  • I think you can use a CSS reset like [Reset CSS](http://meyerweb.com/eric/tools/css/reset/) to reset your elements and build your UI elements from there. – Mike Bovenlander Nov 11 '17 at 18:48
  • Thanks Mike, so you mean I insert this at the top of my injected CSS? That doesn't quite work, some of the rules coming from the main site will still be too specific. E.g. if the main site defines border-radius for a div, the CSS reset would have to override this specifically. – Joko Nov 11 '17 at 19:13
  • Then I think you just have to be more specific then the other styles. Maybe add an id to a parent element and use that in every CSS selector? – Mike Bovenlander Nov 11 '17 at 19:26
  • Yeah seems to be the best bet... thanks. – Joko Nov 11 '17 at 19:39
  • Style isolation is possible in Chrome using Shadow DOM, which is unfortunately not yet available in Firefox. https://stackoverflow.com/a/43038071/3591628 – Daniel Herr Nov 11 '17 at 19:46
  • Possible duplicate of [How to really isolate stylesheets in the Google Chrome extension?](https://stackoverflow.com/questions/12783217/how-to-really-isolate-stylesheets-in-the-google-chrome-extension) – wOxxOm Nov 11 '17 at 20:43

0 Answers0