At规则

参考文档：MDN

总览

@charset

定义样式表使用的字符集

@charset "UTF-8";

• 必须是样式表中的第一个元素
• 如果有多个 @charset 被声明，只有第一个会被使用
• 不能在HTML元素或HTML页面的 <style> 元素内使用

一般不用定义，因为默认会继承 html 的字符集

@container

使样式能够根据父容器的大小进行响应式调整

语法

首先需要使用属性来规范父容器：

• container-name：string

• container-type 属性可以定义为以下几种类型：

  • none：默认值，表示该元素不是容器

  • inline-size：表示容器的宽度会被用于容器查询

  • block-size：表示容器的高度会被用于容器查询

  • size：表示容器的宽度和高度都会被用于容器查询

可以使用 container 属性简写：container: <name> / <type>

.container {
  container: container / size;
}

例子

以下是一个宽或高小于 100px 字体颜色会改变的例子：

@counter-style

一个 @counter-style 规则定义了如何把一个计数器的值转化为字符串表示

语法

@counter-style <counter-style-name> {
  	/* 算法 */
    system: <counter system>
    /* 定义符号，用于显示。可以是字符串、图片，图片使用为 url(xxx) */
    symbols: <counter symbols>
    /* 指定标记显示符的前缀 */
    prefix: <prefix>
    /* 指定标记显示符的后缀 */
    suffix: <suffix>
    /* 指定一个 counter-style 生效的范围 */
    range: <range>
    /* 标记表示符最小值 */
    pad: <padding>
}

例子

@font-face

指定一个用于自定义字体

@font-face {
  font-family: "Open Sans";
  src:
    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

div {
  font-family: "Open Sans";
}

@import

引入一个外部样式表

语法

• list-of-media-queries：一个逗号分隔的媒体查询条件列表

@import url;
@import url list-of-media-queries;

例子

@import url("landscape.css") screen and (orientation: landscape);

link 和 @import 的区别：

1. link 是 HTML 标签，除了能导入 CSS 外，还能导入别的资源，比如图片、脚本和字体等；而 @import 是 CSS 的语法，只能用来导入 CSS
2. link 导入的样式会在页面加载时同时加载，@import 导入的样式需等页面加载完成后再加载
3. link 没有兼容性问题，@import 不兼容 ie5 以
4. link 可以通过 JS 操作 DOM 动态引入样式表改变样式，而@import不可以

@layer

指定所有层之间的样式优先级，一旦建立叠层顺序，优先级和出现顺序都会被忽略

@layer reset, base, components, overrides;

@layer reset, base, components, utilities, overrides;

@layer reset {
  /* 重置样式 */
}

@layer base {
  /* 基础样式 */
}

@layer components {
  /* 组件样式 */
}

@layer overrides {
  /* 覆盖样式 */
}

@scope

用于定义一个应用于选定元素的作用域

语法

作为 CSS 中的一个独立块，在这种情况下，它包含一个前置部分，这部分包括域根（scope root）和可选的域边界（scope limit）选择器——这些选择器定义了作用域的上下边界

@scope (scope root) to (scope limit) {
  规则集
}

作为 HTML 中包含在 <style> 元素内的内联样式，这种情况下，前置部分可以省略，所包含的规则集的作用域会自动限定在 <style> 元素的父元素内

<parent-element>
  <style>
    @scope {
      规则集
    }
  </style>
</parent-element>

说明

一个复杂的 Web 文档可能包括页眉、页脚、新闻文章、地图、媒体播放器、广告和其它组件。随着复杂性越来越高

如下 DOM 树：

body
└─ article.feature
   ├─ section.article-hero
   │  ├─ h2
   │  └─ img
   │
   ├─ section.article-body
   │  ├─ h3
   │  ├─ p
   │  ├─ img
   │  ├─ p
   │  └─ figure
   │     ├─ img
   │     └─ figcaption
   │
   └─ footer
      ├─ p
      └─ img

如果你想在具有 article-body 类名的 <section> 内选中 <img> 元素， 以前可能会执行以下操作：

• 编写一个类似于 .feature > .article-body > img 的选择器
• 编写一个类似于 .article-body img 不太具体的选择器。然而，这将选中 section 内的所有图像

像上面问题，就可以使用 @scope 定义一个精确的作用域

@scope (.article-body) to (figure) {
  img {
    border: 5px solid black;
    background-color: goldenrod;
  }
}

作用域的上边界是包括在内的，而下边界是不包括的

想要更改这一行为，可以将任一选择器与通用子选择器结合使用。例如

• @scope (scope root) to (scope limit > *) :使上下边界包括在内
• @scope (scope root > *) to (scope limit) :不包括两个边界
• @scope (scope root > *) to (scope limit > *) 将不包括上边界而包括下边界

@supports

检查浏览器是否支持某一 CSS 属性或语法。支持 not 和多条件嵌套

@supports (display: grid) {
  div { display: grid; }
}