Question

We have a js/html/css widget that we use on our client’s web sites and have noticed on some sites, it does not display well due to the css from the page cascading through and messing with the layout, like if the designer of the web site has a bunch of css applied to ALL divs on the page, etc..

Is there an easy way to apply styles to the container of my widget so that the invasive css won’t disrupt the layouts?

How do you guys handle this scenario?

Thanks,

Answer 1

This is a common problem. What I use is this: https://github.com/premasagar/cleanslate

A common css reset stylesheet doesn’t suffice. Those reset/normalize the browsers default styles. They don’t clear those created by the author.

Also, by the same author https://github.com/premasagar/sqwidget – it handles the css resetting plus a few more important things.

While I’m at it, here’s another one from the team at Olark: https://github.com/olark/lightningjs It’s similar to the last one, but with a few more features, and, therefore, more complex. I haven’t used this one.