深藏的5个你可能不知道的CSS属性

如果您正在寻找一种将样式，布局和重绘计算范围限制为只有 DOM的局部的方法，则可以使用contains属性。 如果你不熟悉那些概念，我推荐你阅读这些文章 10中减少重排提升性能的方式。当你理解这些方式后，再推荐你另外一个好的学习资源 CSS Triggers.

引用 W3C 关于contain属性的定义,

contain属性允许开发者声明当前元素和它的内容尽可能的独立于其他部分的 Dom 树。
 

但这在实践中意味着什么呢？ 这意味着如果您有一个具有固定高度和宽度的小部件（独立的部分），当你想要更新它的内容和样式的时候，使用这个属性可以通过限定浏览器的计算来避免影响到其他的DOM结构。 浏览器将执行较少的计算，从而获得更好的性能。

这个属性是相当新的，因此它的支持程度不是很好。 目前，只有Chrome 52+和Opera 40+才支持它。 contains允许几个值，每个值都可以让你限制浏览器需要做多少渲染工作。 我们详细分析一下每个值：

• none：默认值。使用此值不应用限制效果。
• size：该值开启元素的大小限制。这意味着修改元素的大小可以不需要检查其后代。
• layout：该值开启元素的布局限制。这规定外面任何东西都不会影响其内部布局，反之亦然。
• style：该值打开元素的样式限制。因此，对元素及其后代可能产生影响的属性不会影响这个元素之外的任何内容。
• paint：该值打开元素的绘制限制。这意味着元素的后代不会显示在其边界之外。例如，如果一个元素是屏幕外（或不可见的），它的所有元素都是屏幕外（或不可见的）。典型的用例是移动设备上的屏幕菜单。
• strict：该属性适用于所有形式的限制，本质上是除去none所有上述值的组合（即包含：size layout style paint）。
• content：这个值与strict但像，除了不包含size。

这个例子的属性如下所示 在JSFiddle上也能看到. 看下下面代码:

<button id="button">Show menu</button>
<ul id="menu" hidden>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>

And the following JavaScript:

const menu = document.querySelector('#menu');
document.querySelector('#button').addEventListener('click', function() {
if (menu.hasAttribute('hidden')) {
  menu.removeAttribute('hidden');
} else {
  menu.setAttribute('hidden', '');
}
});

通过使用 contain 属性，你可以减少浏览器的计算:

#menu {
contain: paint;
}

3. writing-mode

writing-mode并不算是一个全新的CSS属性，但仍有许多开发人员不了解它。 诚然，这是一个不常见的用例。 writing-mode属性定义文本行是水平还是垂直布置，块的进度方向。 所有主流浏览器（包括Microsoft Edge）目前都支持它，尽管Internet Explorer支持早期版本规范中的不同值。 此外，Safari还支持此CSS属性的供应商前缀版本 。

writing-mode 支持下列的值:

• horizontal-tb：内容为我们常规的水平排列，从左到右阅读，第二行在第一行的下方。
• vertical-rl：内容垂直排列，从上到下，从右到左阅读，第二行在第一行的左侧。
• vertical-lr：内容垂直排列，从上到下，从左到右阅读，第二行在第一行的右侧。
• sideways-lr：内容垂直排列，从上到下，从左到右阅读，在所有的排版方式中，即使是垂直版式, 字的顶部都是向左的。
• sideways-rl：内容垂直排列，从上到下，从右到左阅读，在所有的排版方式中，即使是垂直版式，字的顶部都是向右。

最后两个值目前仅有Firefox支持。

想了解这个属性如何工作, 请看 a JSFiddle. 结果就在下面：

请记住，只有使用日语或中文等语言时，一些值的效果才会展现。 有关更全面的示例，请查看演示 the relevant MDN page.

4. clip-path