前端问题清单——CSS的at规则持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天。前端问题清单

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

@charset

在CSS文件在语法解析之前，提示CSS文件使用的字符编码方式，一般出现在CSS文件的最前面

@charset"utf-8"

可以在一个CSS文件中引入另一个CSS文件中除了@charset的全部内容

@important <filePath>

常见的媒体查询，能够对设备类型进行一些判断

媒体类型有：

all：默认值，所有媒体类型

print：打印机

screen：计算机、平板、手机等屏幕

speech：朗读页面的屏幕阅读器

打印文档时修改文档的属性，修改当前页的盒模型结构，除了页面本身也可以设置周围的盒模型

需要注意的是，@page中相关属性的值应尽量使用打印机支持的单位，比如厘米，英寸等

预设的列表项样式不能满足所有的开发者，为了更好的排版，开发者可以使用这个规则来定义列表项的样式

定义了动画的关键帧样式，与transition相比，@keyframes可以控制动画的中间步骤

每个@keyframes可以包含多个关键帧，每个关键帧有一个百分值作为名称，并且在写关键帧的时候可以按照任意顺序，但是它们会按照他们应该发生的顺序来变化

需要注意的是，关键帧中的!important会被忽略

定义字体，iconfont就是利用这个特性实现的

@font-face {
    font-family: test;
    src: url(<filePath>);
}
div {
    font-family: test;
}

检查是否支持一个或多个特性

@support检查的特性可以是某一个特性，或者是多个特性和逻辑与或非结合

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

定义了一个命名空间，并且内部的CSS选择器全部都会带上这个命名空间

任何的@namespace规则都必须在@charset和@important之后，在其他的样式之前

作用与name为viewport的meta标签类似

当可以使用CSS实现的功能，应该尽可能的用CSS来实现，尽可能的不通过JavaScript控制DOM结构从而实现相关的样式变化。所以CSS的这些不常见的at规则，可能是某些功能近乎是完美的解决方案。