就在拐角处，一个新功能正在兴起，它让前端开发人员兴奋不已。该功能就是 CSS 图层。有了层，我们终于能够完全封装我们的 CSS 以供导入。这意味着导入到您的项目中的模块、脚本或其他任何东西都可以拥有与您自己的完全分离的 CSS，从而解决了样式相互覆盖的古老问题。它还将让我们使用自定义导入语句添加到页面中的 CSS 更加灵活。
让我们深入了解 CSS 层，以及它们在您附近的浏览器中的工作方式。
支持
最新版本的 Firefox 和 Chrome 目前支持 CSS 层，Safari 很快将在其下一个版本中支持它。
完整，最新的支持可以在下面查看：
那么，图层如何工作？
在 CSS 文档中，图层胜过任何其他优先级。您可能熟悉 id # 选择器覆盖类的概念。选择器。图层比任何其他选择器都强 - 因此文档底部的图层将自动优先并覆盖其他地方的样式。
层遵循与 CSS 中其他块语句相同的原则语法。因此，我们可以像这样定义一个新层：
@layer myLayer {
}大括号内的所有内容都与“myLayer”相关。可以想象，我们可以将任何类型的 CSS 放在一个层中。所以我可以做这样的事情：
@layer myLayer {
p {
color: red;
}
@media screen and (min-width: 100px) {
a { color: blue; }
}
}当然，我们可以一个接一个地定义多个层，就像这样。您还可以定义没有名称的匿名层。请注意，在下一个示例中，#id.class将呈现蓝色，因为 myOtherLayer 排在最后，尽管 myLayer 具有更高的特异性。
@layer myLayer {
div #id.class {
color: red;
}
}
@layer myOtherLayer {
#id.class {
color: blue;
}
}
@layer oneMoreLayer {}
@layer {}最后，可以将图层放入图层中，并且在同一图层中或在 CSS 文档的顶层具有相同名称的图层会自动合并：
css Copy
@layer myLayer {
@layer mySubLayer {
}
}
@layer myLayer {
/* this is the same as the previous "myLayer" - CSS automatically considers them one layer */
}预先设置图层顺序
除了能够用层完全封装代码的好处外，您还可以立即告诉浏览器层应该按什么顺序进入。与所有 CSS 一样，最后出现的最重要。因此，下面的示例对 中的样式给予了最高的重视myLayer，这意味着选定的 HTML 元素将呈现红色。
@layer oneMoreLayer, myOtherLayer, myLayer;
@layer myLayer {
div #id.class {
color: red;
}
}
@layer myOtherLayer {
#id.class {
color: blue;
}
}
@layer oneMoreLayer {}这使得 CSS 最终变得更加强大 - 想象一下导入一个 CSS 库，它不再需要担心代码中的其他 CSS。它可以很容易地将自己作为一个单独的层插入到文档的末尾，它会自行起作用！
如何将 CSS 文件导入新图层
CSS 层还允许我们将整个样式表导入新层。下面的代码将 dropdown-styles.css 导入到午夜DropdownLayer 层中。
@import url('dropdown-styles.css') layer(midnightDropdownLayer);结论
CSS 层将改变我们编写代码的方式并为我们提供新功能，这将使项目的封装变得非常容易。最终，层等新功能将推动一套全新的后处理和前端网络技术，这将改变我们今天构建网站的方式。
文章评论