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 的话，能够一试。

总结

做为一个第三方组件，好比评论组件，光隔绝外部样式是不够的，准确的说，是不够智能，假如外部设置的字体，颜色跟个人组件差异很大，那个人组件不就显得格格不入了吗。因此咱们隔绝了外部样式后还得获取外部的核心样式来让咱们的组件显得更和谐。具体要获取哪些样式，就仁者见仁智者见智了，根据你的组件来定制，没有一成不变的规则。