0

I have created one Jquery widgets which is used in many third party website.

My Widgets has it's own css for widgets elements. It is working perfect when run independently.

But when i add my Widget to 3rd party website, my widgets css inherit or take from 3rd party CSS.

How can resolve this issue as i don't aware about 3rd party css?

#my-div * {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;

...
}
Yatin Mistry
  • 1,246
  • 2
  • 13
  • 35

1 Answers1

1

Scope your css to your widget's html.

For example create a wrapper for your widget:

<div class="my-widget">
    <!-- Widget Content Here -->
</div>

Then style everything inside your widget as a descendant of your my-widget class.

.my-widget .widget-text {
    color: green;
}

Don't style anything with elements - so don't do

p {
    /* Style here */
}

Only use classes all scoped to your .my-widget class.

As per your comment if you are still getting problems you could add a reset within your widgets scope:

.my-widget * {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 16px;
    /* Etc */
}
Simon Mason
  • 561
  • 2
  • 10
  • You're right and I have done the same but extra css that i don't have defined, have been inherited from third-party website and i don't won't them so how to handle it? – Yatin Mistry Feb 17 '15 at 09:01
  • I have update CSS as you told : #my-div * { all set to default }, but it removes all the CSS of my widget. i have added it at top of all css. I h ave added all this attributes :: http://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only – Yatin Mistry Feb 17 '15 at 10:30
  • Have you put the reset at the top of the css file? Please edit your question to show the exact code you are using. – Simon Mason Feb 17 '15 at 10:50
  • I have updated code. I don't have added reset. but add as shown in my code – Yatin Mistry Feb 17 '15 at 11:08
  • I could do with seeing all the code - the HTML and all the CSS - to help further. – Simon Mason Feb 17 '15 at 12:33
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/71083/discussion-between-simon-mason-and-yatin-mistry). – Simon Mason Feb 17 '15 at 13:23