CODEWITHSUNDEEP
cssjquery-widgets
Yatin Mistry
Yatin Mistry

Reputation: 1264

Jquery Widget CSS conflicts with third-party site

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;

...
}

Upvotes: 0

Views: 344

Answers (1)

Simon Mason
Simon Mason

Reputation: 561

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 */
}

Upvotes: 1

Related Questions