CSS 樣式防護

概念 / 原由

什麼是樣式防護？
顧名思義，就是保護你寫的樣式最後是你想展示的樣子。通常樣式被破壞多發生於第三方應用編程中，當編寫的組件被應用於第三方網站中，組件的樣式常常會被網站自己的樣式影響而破壞了它原本想展示的樣子。

爲何會研究這個東西呢？由於有一天，我引用的第三方代碼的 CSS 被我網站上的 CSS 影響了。因而，我噼裏啪啦趕忙把第三方的樣式又給「強調「了一遍。搞完一想，不對啊，這特麼應該是第三方本身沒作好對本身 CSS 代碼的防護啊，我瞎操什麼心呢。不過這也引出了此次的話題，假如是你來寫這個第三方應用，你怎麼去作這個樣式防護？

對比研究

爲此，我特意先研究了幾家比較知名的網站是怎麼作的。
首先，咱們先看一下暢言 changyan.kuaizhan.com/static/help…，這是一個第三方評論組件，打開 console 仔細看了一下，發現其實它沒怎麼作樣式防護，大部分樣式寫在 id 選擇器裏，防止了大部分的誤傷。但仍是很容易誤傷，好比加個 span { color: red; } 評論就都變紅色了。不過它在 logo 上卻是加了 !important 來防止隱藏，還有廣告也加了一堆 !important，效果嘛，你懂得。

接着咱們來看一下 Disqus blog.disqus.com/why-readers… 是怎麼作的。沒錯，iframe，直接趕盡殺絕。不讓任何人修改個人樣式，你只能用我提供的樣式。用 iframe 當然能夠完美的作到樣式防護，不過開發的複雜度一點也沒有減小，動態的計算組件的高度來改變 iframe 的高度就夠讓人頭疼了，畢竟裏面評論一條套着一條，一條行數都是不定的。不過簡單的固定長寬的卻是很適合用 iframe 來開發，兼容性也好。

還有 Twitter，須要FQ才能看到

用了 Shadow DOM，也算是時代先鋒了。
咱們先來看看 Shadow DOM 是什麼，developer.mozilla.org/zh-CN/docs/…

Shadow DOM 修復了 CSS 和 DOM。它在網絡平臺中引入做用域樣式。 無需工具或命名約定，您便可使用原生 JavaScript 捆綁 CSS 和標記、隱藏實現詳情以及編寫獨立的組件。

看描述，感受很是適合用來編寫第三方組件，心裏一喜，可是別激動，查一下兼容性先。

果不其然，天妒英才啊，不過，這不妨礙咱們瞭解一下它。
從文檔中咱們知道 Shadow DOM 必須附加在一個元素上，能夠是HTML文件中的一個元素，也能夠是腳本中建立的元素；能夠是原生的元素，如 <div>、<p>；也能夠是自定義元素如 <my-element>。 以下例所示，使用 Element.attachShadow() 來附加影子DOM：

<my-element id="hostElement"></my-element>
<script>
  // create shadow DOM on the <p> element above
  var shadow = document.querySelector('#hostElement').attachShadow({mode: 'open'});
  shadow.innerHTML = '<p>我是 Shadow DOM~</p>';
  // 添加CSS，將文字變紅
  shadow.innerHTML += '<style>p { color: red; }</style>';
</script>
複製代碼

這裏的 p 就不會受到外部 CSS 的影響了，因而可知，Shadow DOM 很好的隔絕了外部的世界，自然的實現了樣式防護。

對比到這裏，你們對樣式防護也有了必定的瞭解了。那麼除了上述的三種方案，還有什麼方案嗎？
咱們來想一想爲何要作樣式防護，不就是怕第三方網站的樣式污染了咱們組件的樣式嗎，若是咱們能把第三方網站的樣式在咱們組件這裏重置掉不也能夠嗎。 網上有不少重置 CSS 的代碼，雖然寫那麼多略顯繁瑣，但有用。那有什麼一句代碼就能重置的呢？有嗎？固然是有的了，否則我也不會寫出來了。就是 CSS all 屬性了。下面的一句代碼，就能把標籤的樣式恢復到瀏覽器默認狀態了。

element {
  all: initial;
}
複製代碼

不過很不幸，依然不兼容全系列 IE

不過比 Shadow DOM 好多了，若是你的應用不須要兼容 IE 的話，能夠一試。

總結

做爲一個第三方組件，好比評論組件，光隔絕外部樣式是不夠的，準確的說，是不夠智能，假如外部設置的字體，顏色跟個人組件差異很大，那個人組件不就顯得格格不入了嗎。因此咱們隔絕了外部樣式後還得獲取外部的核心樣式來讓咱們的組件顯得更和諧。具體要獲取哪些樣式，就仁者見仁智者見智了，根據你的組件來定製，沒有一成不變的規則。