1

I am writing a chrome extension which injects widgets into the DOM at certain locations. I am facing a problem where my extension's CSS interferes with the page's CSS and vice versa due to the cascading nature of CSS. What are some robust strategies for avoiding this issue? Specific reading/learning materials will be greatly appreciated.

Yojimbo
  • 23,288
  • 5
  • 44
  • 48
dipole_moment
  • 5,266
  • 4
  • 39
  • 55
  • 1
    Prefix your css definition so you make it very unlikely that you get clashes. – Halcyon Apr 25 '15 at 18:42
  • 2
    If you can guarantee a Chrome version for your extension, you can use the [Shadow DOM](http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/) to encapsulate CSS styles – CodingIntrigue Apr 25 '15 at 18:45
  • Prefixing CSS is a bit hairy not scalable. I'd like something more robust which does not interfere with the DOM. Shadow DOM seems like the way to go. Any good resources on this out there? – dipole_moment Apr 25 '15 at 20:21
  • @dipole_moment it is not that hairy using something like Sass, for example. – bboydflo May 22 '18 at 08:50

0 Answers0