CSS At 规则

查询系统设置,如禁止动画,深色模式(prefer-color-scheme) // light-dark() 用于 color-scheme

  • @charset, 定义样式表使用的字符集
  • @counter-style,自定义列表样式(跟css计数器无关)
  • @import, 告诉 CSS 引擎引入一个外部样式表(顶部,可以选择当中的某个媒体规则,但不再是媒体规则). (同步加载,应避免使用) // 现在能按需导入,并且也能指定级联顺序
  • @namespace, 告诉 CSS 引擎必须考虑XML命名空间。
  • @property 定义自定义属性,可允许动画
  • @layer 指定样式层级 // 匿名层在声明层之后,空白名层在有名层之后
  • 嵌套@规则, 是嵌套语句的子集,不仅可以作为样式表里的一个语句,也可以用在条件规则组里:
    • @media, 如果满足媒介查询的条件则条件规则组里的规则生效,CSS4"script"," pointer"," hover",‘color-gamut’。// link 设置无效 media 异步低优先级下载不应用且不阻塞渲染
      // 目前使用的是sRGB色域, css的 color 属性换色域需要指定色域空间, 图片色域由浏览器选择, canvas需要指定。
      // 不符合媒体查询规则是不会加载
      // matchMedia(media-rule).onchange 可以监听
    • @page, 描述打印文档时布局的变化
    • @font-face, 描述将下载的外部的字体
    • @container, 容器查询 // 不支持容器查询内对容器本身进行样式设置
    • @keyframes, 描述 CSS 动画的中间步骤 .
    • @supports, 如果满足给定条件则条件规则组里的规则生效。 // 支持检测选择器 CSSOM `CSS.supports` 也支持
    • @document, 如果文档样式表满足给定条件则条件规则组里的规则生效。 (推延至 CSS Level 4 规范)。用于用户样式表
    • @scope //草案, 因为 scoped 属性的 style 元素样式只能内联
    • @scope // 草案,`to` 是指基于 DOM 深度选择
ex:
@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
… /* 这里的CSS代码用来模拟 text-align-last:justify */
}

The @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule. // https://www.w3.org/TR/css3-conditional/#processing
max-width,min-width of media ex:
@media (max-width:800px) {
… /* 当设备的最大width为800px时
即小于800px生效
使用min-width即设备宽度大于该值时生效
生效指按层级联结渲染
*/
}
@media (color) // 任意颜色
@media (color: 8) // 一个颜色分量深度为 8
@media (hover) = @media (hover: hover) = @media (any-hover)
@media (pointer: coarse) // 粗指针,比如触屏