就在拐角处,一个新功能正在兴起,它让前端开发人员兴奋不已。该功能就是 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 层将改变我们编写代码的方式并为我们提供新功能,这将使项目的封装变得非常容易。最终,层等新功能将推动一套全新的后处理和前端网络技术,这将改变我们今天构建网站的方式。
文章评论