我从没有听说过什么“包含属性”，直到几周前，当我就container queries的使用情况问到twitter和 David Baron时，他们认真地说，那可以避免许多container queries查询方面的问题。随后我便努力查询一些官方资料，试图去理解它。
包含属性
这是一个原始的隔离方式，包括布局和颜色。包含属性允许开发者限制特定的DOM子树和其它文档；你可以认为它像一个Iframe，这个边界建立了一个新的root层，以确保DOM变化在子树中，永远不会触发父级文档。
none | strict | layout | style | paint
有五种不同的包含属性值。
none—无效果
layout—打开布局遏制
style —打开风格遏制
paint—打开重绘遏制
strict-—布局、样式和重绘相结合
使用案例
到目前为止，我们知道了，我们可以从剩下的文档中，用CSS来控制分离元素，然后标记为独立的部分。告诉你，这里有一些使用案例可以帮助你：
Widgets
当集成第三方组件时，你几乎没法控制，他们可以通过做繁琐的现场布局，如风格，绘画等来大大降低网站的性能，为了把他们跟我们的网站区别开，我们可以设置strict为最外层元素的第三方部件。这样，他们就不会影响页面其他部分的性能了。
Off-Screen
如果你建立一个屏闭导航或是类似系统，即使页面加载不出来，浏览器也可以绘制内容，通过设置paint；用户代理可以跳过关闭窗口，然后更快地绘制其它部分。
Container queries
正如我前面所提到的，strict-可以避免container queries方面的问题。container queries的“问题”之一就是，子级和他们的内容可以对容器的大小产生影响，但是通过使用CSS控制就可以避免这个问题了。
为什么浏览器不能自动做？
浏览器引擎已经尽可能做了最大限度的优化，但每个引擎都有差异。使用layout提供了一个标准的应用程序来指示用户代理，它可以优化浏览器无法优化的某些布局。
底线
如果在没有DOM节点和widgets的情况下，建立一个简单网站的话，你可能不会太在意CSS控制。但是，如果你建立更复杂的网站，那CSS控制将有助于优化性能。这也是一个好主意，设置strict为第三方小部件，便可以保护您的网站的性能。
不厌其烦地测试，不但在高端机器和快速网络上测试，也在旧硬件和慢网络上测试。要时刻关注用户的体验，你还可以模拟网络速度和Chrome DevTools CPU。