CSS 图层教程:真正的 CSS 封装

就在拐角处,一个新功能正在兴起,它让前端开发人员兴奋不已。该功能就是 CSS 图层。有了层,我们终于能够完全封装我们的 CSS 以供导入。这意味着导入到您的项目中的模块、脚本或其他任何东西都可以拥有与您自己的完全分离的 CSS,从而解决了样式相互覆盖的古老问题。它还将让我们使用自定义导入语句添加到页面中的 CSS 更加灵活。

让我们深入了解 CSS 层,以及它们在您附近的浏览器中的工作方式。

支持

最新版本的 Firefox 和 Chrome 目前支持 CSS 层,Safari 很快将在其下一个版本中支持它。

完整,最新的支持可以在下面查看:

CSS 图层教程:真正的 CSS 封装

那么,图层如何工作?

在 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 层将改变我们编写代码的方式并为我们提供新功能,这将使项目的封装变得非常容易。最终,层等新功能将推动一套全新的后处理和前端网络技术,这将改变我们今天构建网站的方式。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2303805254@qq.com,本站将立刻删除。

(0)
上一篇 2022-04-22 10:12
下一篇 2022-04-23 10:19

相关推荐

发表回复

登录后才能评论