你了解CSS吗？——At-rule汇总

划一根火柴_fire
465 阅读6分钟

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

这是《你了解CSS吗》系列的第三篇，该系列的其他篇入口如下：

正文

大家好，我是fire，上一篇通过产生式，了解了CSS2.1规范定义的CSS结构，并且通过分类重组整理成一份最终的CSS组成结构，如下：

  • At-rule
  • rule

通过上面的CSS组成结构，逐步扩展，最终形成完整的CSS体系。本篇内容主要是汇总At-rule的内容。

到底有多少种At-rule

当我去CSS规范中查询CSS到底有多少种At-rule的时候，发现CSS的规范实在是太多了，挨个找起来，费时费力。不过作为有前端词典之称的MDN，上面有对At-rule的汇总，于是通过查询MDN网站，汇总到的At-rule内容如下：

非嵌套@规则：

  • @charset
  • @import
  • @namespace

嵌套@规则:

  • @media
  • @page
  • @counter-style
  • @font-face
  • @keyframes
  • @supports
  • @document

备注：非嵌套@规则，表示只能作为样式表里的一个语句；嵌套@规则，不仅可以作为样式表里的一个语句，也可以用在条件规则组里（也就是普通规则的大括号{}范围内） 。

接下来让逐个看一下@规则内容。

非嵌套@规则

@charset

用于制定样式表中使用的字符编码。从前面的stylesheet的产生式中我们了解到，该规则必须式样式表中的第一个元素，前面不能有任何字符。如果有多个@charset被声明，只会使用第一个，不能在HTML元素或HTML页面的<style>元素内的样式使用。

因为@charset指定字符编码有其它代替方案，就算不使用替代方案而是使用@charset规则，一般在工作中一旦通过@charset指定了字符编码，就基本上不会更改，所以对于这个At-rule，一般了解一下就可以。

对应的MDN链接：developer.mozilla.org/zh-CN/docs/…

@import

这个规则允许开发者导入其他的样式表，@import规则必须在所有其他规则之前（除了@charset规则，如果有的话）。如果通过@import引入了一个有效的样式表，浏览器会将样式表的内容做为@import规则的替代，以下两种情况除外：

  1. 如果引入的样式表明确定义了适用的环境(比如通过@namespace定义命名空间)，并且不适用于通用的环境，那么将不会发生替换。
  2. 如果引入的样式表依赖其他样式表，并且如果替换后，某些规则的先后顺序违反定义，则不发生替换。比如@namespace必在@import后面，如果替换后这两个的规则位置反了，就不会发生替换。

对应的MDN链接：developer.mozilla.org/zh-CN/docs/…

@namespace

@namespace声明了一个命名空间前缀，并将它与给定的命名空间名称(一个字符串)相关联。然后可以在命名空间限定的名称中使用此命名空间前缀，例如：

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
​
/* 这将匹配所有XHTML中的<a>标签，XHTML 是默认的无前缀命名空间 */
a {}
​
/* 这将匹配所有的SVG <a>标签 */
svg|a {}
​
/* 这将匹配XHTML和SVG <a>标签 */
*|a {}

任何@namespace规则都必须在所有的@charset和@import规则之后，并且在样式表中，位于其他任何规则之前。

此规则对于XHTML来说特别有用，通过@namespace可以在CSS中指定XHTML元素做为选择器。

对应的MDN链接：developer.mozilla.org/zh-CN/docs/…

嵌套@规则

@media

@media规则是一个条件组规则，其条件是一个媒体查询。它是由@关键字@media后面跟随一个媒体查询(media query) 列表，然后再跟随一个包含任意规则的语句块组成。这个规则的条件，是媒体查询的结果。

例如：

@media screen and (min-width: 35em),
    print and (min-width: 40em) {
#section_navigation { float: left; width: 10em; }
}

上面的内容中，有一个条件就是screen and (min-width: 35em),print and (min-width: 40em),若使这个条件成立，对于屏幕显示来说，视口至少是初始字体大小的35倍，条件才成立；对于打印输出来说，视口大小至少是初始字体大小40倍，条件才成立；这两者有任何一条成立，这个规则的条件才成立，然后规则#section_navigation{float:left;width:10em;}才会被应用。

对应的MDN链接：developer.mozilla.org/zh-CN/docs/…

@page

在分页介质中(比如纸张、透明胶片、计算机屏幕上显示的页面等)，文档被分成一个或多个离散页面。为了处理页面，CSS2描述了如何在页框上设置页边距，以及如何声明分页符。

@page作用的目标理论上叫分页媒体，事实上，现在主要的分页媒体就是打印机，一般来说浏览器的页面属于连续介质，也就是不分页的，所以可以理解为@page规则主要用于需要打印机打印的页面布局，在正常的web开发中，极特殊的业务场景会使用到@page，这里就不过多介绍了

对应的MDN链接：developer.mozilla.org/zh-CN/docs/…

@counter-style

@counter-style主要用于让开发者可以自定义list列表前面的技术器（比如小黑点）的样式。

对应的MDN链接：developer.mozilla.org/zh-CN/docs/…

@font-face

@font-face是用来定义字体的，一切字体都可以通过@font-face定义，不仅仅是web font。

对应的MDN链接：developer.mozilla.org/zh-CN/docs/…

@keyframes

@keyframes是用来定义动画的，用于指定整个动画周期各个关键节点的属性值，从而指定一个动画周期的行为，动画可能会迭代零次或多次。@keyframes是比较重要的特性，需要好好掌握。

对应的MDN链接：developer.mozilla.org/zh-CN/docs/…

@supports

@supports规则用来查看CSS的某些规则或属性在用户代理中是否支持，被称为特性查询。因为@supports隶属于CSS3，所以它本身就存在兼容性的问题，所以不建议现阶段使用它。

对应的MDN链接：developer.mozilla.org/zh-CN/docs/…

@document

这个规则目前还处于编辑草案阶段，状态过于新，基本处于无法使用的状态，所以可以暂时忽略。

对应的MDN链接：developer.mozilla.org/zh-CN/docs/…

总结

上面是对所有At-rule的汇总，由于内容比较多，所以只是简单的描述了几句这些规则是做什么的，后面文章可能会对这些规则中比较重要的几个，做专门细致的介绍，比如@media、@keyframes等，这里就不过多叙述了，感兴趣的可以自行研究。接下来就可以补全上篇文章末尾总结的CSS结构图中关于At-rule的部分了，补全后的内容如下：

CSS体系结构.png

avatar
文章
阅读
粉丝