widget CSS conflicts with site CSS

Question

I build a widget for my website and I add CSS dynamically on loading but the problem is conflicting with the host website CSS file . The following code is for my widget which has CSS file attached on loading :

function main() {
    jQuery(document).ready(function($) {
    /******* Load CSS *******/
    var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "http://example.com/widget/green.css"
        });
        css_link.appendTo('head');
        var txt;
        txt='<div id="wrapper">';
        txt=txt+'<ul class="tabs">';
        txt=txt+'<li id="fixtures_tab"><a href="#fixtures">Hepsi</a></li>';
        txt=txt+'<li id="live_tab"><a href="#live">Canlı</a></li>';
        txt=txt+'<li id="finished_tab"><a href="#finished">Bitmiş</a></li>';
        txt=txt+'<li id="program_tab"><a href="#program">Başlamamış</a></li>';
        txt=txt+'<li id="postpond_tab"><a href="#postpond">Ertelenen</a></li>';
        txt=txt+'<li id="selected_tab"><a id="f" href="#fav">Oyunlarım (0)</a></li>';
        txt=txt+'</ul>';
        txt=txt+'<div class="tab-container">';
        txt=txt+'<div id="fixtures" class="tab-content"><script type="text/javascript">get_All_Today_Matches();</script></div>';
        txt=txt+'<div id="live" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="finished" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="program" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="postpond" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="fav" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'</div>';
        txt=txt+'</div>';
        $('#widget-container').html(txt);
    });
}

I want to know is there any way to isolate my widget's css ??

by the way the main function is called from anonymous function (for isolation purpose)

PS: I used css reset but it still the same problem .

Search for namespacing. An other solution could be to embeded your widget inside an iframe. — A. Wolff
– A. Wolff, Commented Apr 20, 2013 at 11:07
The only thing you could do is look at all the styles on the page affecting your code and counteract those styles in your embedded CSS file. So if the host page says font-size: 20px, but you want 16px, do that in your CSS or put an !important flag after it, if the host is getting precedent. You could also use the non-stable Shadow-DOM: html5rocks.com/en/tutorials/webcomponents/shadowdom-201 — Justin McCraw
– Justin McCraw, Commented Apr 20, 2013 at 11:38

Tina · Accepted Answer · 2015-06-08 23:11:42Z

You can namespace all of your CSS. This will avoid you having issues with common CSS class names like container or wrapper, for example:

.my-amazing-widget--tab-container {
    height: 100px;
}

If all of your CSS is namespaced like above, it is not very likely that the website will have your widget name in their CSS.

I would avoid using declarations like !important as another user suggested in their comments—it is possible that if you override a common class that your styles would end up negatively affecting the website's styles.

I would also avoid any global declarations like importing a CSS reset into your widget. CSS resets override elements like body, div, etc. which can negatively affect the host website's CSS.

You will need to update all related HTML to use the namespace. CSS namespacing is the best approach to a problem like this and is the best practice when developing widgets that are to be embedded in other websites and applications.

Collectives™ on Stack Overflow

widget CSS conflicts with site CSS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related