CODEWITHSUNDEEP
javascriptcss
Alosyius
Alosyius

Reputation: 9151

css in my JavaScript widget colliding with target page css

I've written a pretty basic widget for voting, users install it pretty much like the Google analytics code by simply adding a JavaScript code to the bottom of their code.

A problem I have noticed now on some pages that use broad CSS rules is that the widget design gets a bit messed up. In my widget CSS I have specified unique names so that should not be a problem.

However when a target page uses rules like:

body {
    font: 16px/26px Helvetica, Helvetica Neue, Arial;
}

It effects the look of my widget.

Any ideas how I can solve this?

Edit: I've tried cleanslate - https://github.com/premasagar/cleanslate but this resets the css on the target page as well

Upvotes: 1

Views: 427

Answers (3)

Mostafa Shahverdy
Mostafa Shahverdy

Reputation: 2725

Use Iframe or use inline CSS for your elements.

Upvotes: 1

Romeo
Romeo

Reputation: 376

Use !important for the css of your widget.

Example:

.widget {
    font: 16px Arial !important;
}

Upvotes: 0

Andy E
Andy E

Reputation: 344803

Put your widget in an iframe, then it won't be affected by anything on the target page.

Upvotes: 0

Related Questions