CSS cascade layers听起来非常适合CSS可能来自多个来源的项目，并且您想要一种控制级联的好方法。我一直在研究这些内容，以便我们将CSS包含在公司范围的共享组件中，但是无论共享组件代码的特殊性如何没有机会反对更高特异性的库CSS，例如.c-acme-component-name .c-acme-component-name__header :is(h2,h3,h4,h5,h6)）。
不幸的是，旧设备上仍然会有用户没有足够的浏览器来使级联层工作。不支持级联层的浏览器将忽略一层中的任何CSS，因此，如果您广泛使用层，这些用户可能会看到一个非常损坏的站点。
幸运的是，有一个PostCSS polyfill重写您的CSS以添加选择器复杂性以匹配级联层的行为，但是如果我们不想向现代浏览器发送多填充CSS的现代浏览器呢？
koude2 in CSS or koude3 in JavaScript is not a thing yet，所以我们没有很好的方法来表现CSS级联层的支持。
好吧，否不错的方式，但是如果是
级联层特征通过HTTP检测
几年前，甚至几十年前，我还记得CSS重构技术，该技术是在您怀疑的CSS规则中添加独特的透明像素CSS background-image URL不再需要，但是您不需要证明：
.old-selector-you-want-to-delete {
background-image: '/dead-or-alive.php?selector=.old-selector-you-want-to-delete';
}
几个月后，如果您检查了服务器日志/数据库，并且对唯一的背景图像URL没有提出请求，则可以删除CSS规则，因为显然不再使用它。
我也有类似的想法来检测级联层支撑。请注意，这有点过高，有很多活动部件，但这是一个有趣的周日下午练习。
。怎么运行的
在我们网站的构建过程中，我们生成dist/styles.css和一个多填充版本dist/styles-polyfilled.css。我们的html文件的来源引用了多填充版本，因为它更安全地假设支持。
边缘函数拦截到我们的HTML页面的所有请求，并检查是否存在称为css-cascade-layer-support的cookie。
如果不存在cookie：
视觉隐藏的HTML元素<span aria-hidden="true" data-css-cascade-layers-detector></span>被添加到页面。
以及span元素，我们将一些HTML注入了lazyload的CSS文件，称为dist/detect.css，该文件包含一些层中包含一些未充实的CSS。不支持CSS层的浏览器将忽略这一点。 CSS包含我们[data-css-cascade-layers-detector]跨度的背景图像声明。浏览器将加载背景图像，然后向另一个边缘函数提出http请求，该函数返回透明图像但还设置了css-cascade-layer-support cookie：
newBody = body.replace(
`</body>`,
`<span aria-hidden="true" data-css-cascade-layers-detector style="position:absolute;left:-9999px;top:-9999px;"></span>
<link
rel="preload"
href="/dist/detect.css"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript>
<link rel="stylesheet" href="/dist/detect.css" />
</noscript>
</body>`
);
如果有cookie存在：
如果存在cookie，我们将用加载dist/styles.css加载dist/styles-polyfilled.css的链接元素，并且对于所有后续页面，用户将用户获得更简单的CSS文件，而较少的冗长CSS。
newBody = newBody.replace(
'<link rel="stylesheet" href="/dist/styles-polyfilled.css" />',
'<link rel="stylesheet" href="/dist/styles.css" />'
);
告诉我代码！
对于have a look on Github来说，这可能是最容易的。还有一个demo site here。
- The function that intercepts all HTML responses
- The function that returns the transparent image and sets a cookie
- The CSS that loads the transparent image and cookie function, but only if the browser supports cascade layers
我真的会在生产中使用它吗？
可能不是：
- 这是许多动机零件和网络级代码，对于传统上是CSS等传统前端的内容。这是进行CSS功能检测的一种非常非标准的方式。期望同事将所有这些都掌握在他们的脑海中是公平的吗？
- 表现有什么影响？我们使用户在其第一页加载上加载了多填充的CSS，但是如果他们的浏览器支持现代CSS，我们使他们在后续页面加载上加载未填充的CSS文件，忽略了浏览器缓存中的完美良好的多重填充CSS文件。