小部件CSS與網站CSS衝突

我爲我的網站構建一個小部件，並在加載時動態添加CSS，但問題與主機網站CSS文件衝突。下面的代碼是我的小部件已CSS文件安裝在裝載：小部件CSS與網站CSS衝突

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); 
    }); 
}

我想知道有沒有什麼辦法來隔離部件我的CSS？

由主函數被調用的匿名函數（實現隔離）

PS的方式：我用CSS重置，但它仍然同樣的問題。

來源

2013-04-20 unique_programmer

搜索命名空間。另一種解決方案可能是將你的小部件嵌入到iframe中。 – 2013-04-20 11:07:25

對不起，IFrame不適合我。 – 2013-04-20 11:16:31

您可以做的唯一事情就是查看影響代碼的頁面上的所有樣式，並抵消嵌入式CSS文件中的這些樣式。因此，如果主機頁面顯示字體大小：20像素，但您想要16像素，請在您的CSS中執行此操作，或在主機頁面之後放置！重要標誌。您也可以使用非穩定的Shadow-DOM：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ – 2013-04-20 11:38:53

您可以命名空間的所有CSS。這將避免你不得不與普通CSS類名的問題，如container或wrapper，例如：

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

如果你所有的CSS被命名空間像上面，它是不太可能，該網站將在有你的窗口小部件名稱他們的CSS。

我會避免使用類似!important這樣的聲明作爲另一個用戶在他們的評論中提出的建議 - 如果您覆蓋了一個常見的類，那麼您的樣式最終會對網站的樣式產生負面影響。

我也會避免像導入CSS重置到您的小部件的任何全局聲明。 CSS重設覆蓋元素，如body，div等，這可能會對主機網站的CSS產生負面影響。

您將需要更新所有相關的HTML以使用命名空間。對於像這樣的問題，CSS命名空間是最好的方法，並且是開發要嵌入其他網站和應用程序的小部件時的最佳實踐。

來源

2015-06-08 23:11:42 Tina

小部件CSS與網站CSS衝突

回答

相關問題