大部分同学用过CSS屏幕宽度媒体查询，像这样：@mediascreenand(min-width:900px){div{padding:1rem3rem;}}这里是和屏幕宽度相关的样式设置。上面代码的意思是当屏幕宽度大于900px时，内部样式代码块才能生效。其实不仅仅是上面的屏幕宽度媒体查询，在CSS中，还有大量以@符号开头的规则。称它为@rule(at-rule)。本文将介绍除了媒体查询之外其他有趣的@rules，这些@rules将在未来变得越来越重要。at-rule@rule好的，什么是@rule(at-rule)？at规则是一个CSS语句[1]，它以at符号“@”（U+0040COMMERCIALAT）开头，后跟一个标识符，并包括直到下一个分号“;'（U+003BSEMICOLON)或下一个CSS块，以先到者为准。除了我们最熟悉的@media，CSS还有哪些@规则呢？这里有一些@规则，由它们的标识符指定，每个都有不同的语法：`@charset`[2]，定义样式表使用的字符集。`@import`[3]，告诉CSS引擎导入外部样式表。`@namespace`[4]，告诉CSS引擎必须考虑XML命名空间。下面是一些嵌套的@规则，它们是嵌套语句的子集。它们不仅可以用作样式表中的语句，还可以用于条件规则组：`@media`[5]，如果满足媒体查询的条件则条件规则组中的规则生效。`@page`[6]，描述了打印文档时布局的变化。`@font-face`[7]，描述将要下载的外部字体。`@keyframes`[8]，描述了CSS动画的中间步骤。`@supports`[9]，条件规则组中的规则在给定条件满足时生效。`@document`[10]，如果文档样式表满足给定的条件，则条件规则组中的规则生效。（推迟到CSSLevel4规范）`@viewport`[11]（已弃用），该规则允许我们设置文档的大小。此功能主要用于移动设备，但也可用于支持“固定到边缘”等功能的桌面浏览器，例如MicrosoftEdge。`@counter-style`[12]—@counter-style规则定义了如何将计数器的值转换为字符串表示形式。`@font-feature-values`[13]（加上@swash、@ornaments、@annotation、@stylistic、@styleset和@character-variant），允许作者在font-variant-alternates[14]中使用通用名称，以不同方式激活OpenType中的功能。它允许在使用多种字体时简化CSS。`@property`[15]（实验性），CSSHoudini[16]API的一部分，它允许开发人员显式定义他们的css自定义属性[17]，允许属性类型检查、设置默认值和定义自定义属性是否可以被继承。`@layer`[18]，声明了一个级联层，同一层的规则会级联在一起，让开发者对级联机制有更多的控制权。除了我们非常熟悉的@media、keyframes和@font-face，@supports、@counter-style、@property、@layer等已经或将在未来的web应用中发挥举足轻重的作用。接下来就跟着这篇文章，一起来了解一下吧。也可以跳过已经掌握的，转到不太了解的对应的@规则，快速了解。@charset、@import、@namespace可以放在一起解释。它们的语法比较简单，也比较容易理解。其中：@charset：指定样式表中使用的字符编码。它必须是样式表中没有任何前置字符的第一个元素。像这样：//style.css@charset"UTF-8";请注意，如果声明了多个@charset@rules，则只会使用第一个。很多人会疑惑，这个语句有什么用呢？事实上，如果你的CSS文件中有任何非ASCII文本，例如字体名称中的非ASCII字符、伪元素的内容属性值、选择器等，你需要确保CSS解析器知道如何正确地将字节转换为字符，以便理解CSS代码。所以如果你发现你的伪元素内容中插入了一些内容，但是打包编译后是乱码，那很可能是因为你忘记声明这个字符集了。@import：用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset规则除外。@import有两种语法：url()包含样式表的URI。直接写样式表URI的字符串。你也可以稍后直接定义媒体查询规则，像这样：@import'custom.css';@importurl('landscape.css');@importurl('landscape.css')screenand(orientation:landscape)合理使用@import其实是有好处的：可以合理控制CSS文件的大小。更好地划分和重用。很多人可能经常看到网上有各种抵制@import的文章，但是@import既然设计出来了，总有它的用处，不能太绝对。@import的使用主要在两个方面影响页面性能：影响浏览器的并行下载。优先事项，样式相互覆盖。导致页面闪烁。这里可以简单说明一下。首先我们要知道，页面加载的时候，link标签引入的CSS会同时加载，@import引入的CSS会在页面加载完成后加载。CSS解析引擎在解析一个CSS文件时，如果在文件的开头遇到@import规则，就会被@import导入的CSS文件中的所有样式替换掉。但是，@import中的规则在后面加载的时候，会在加载后放在样式表的最前面。在最后的渲染中，如果有一个同名同优先级的样式，就会被后面的同名样式叠加，造成所谓的优先级冲突。事实上，浏览器呈现的动作通常会执行多次。最后一次渲染必须根据之前加载的所有样式的集成渲染树来绘制页面，并且由于@import中规则的加载时机，会在页面内容加载完成后加载。相当于把css放在body的底部，导致页面闪烁。网络不佳时，闪烁体验更为明显。@namespace：@namespace是一个@rule，用于定义CSS样式表中使用的XML命名空间。定义的命名空间可以将通配符、元素和属性选择器限制为指定命名空间内的元素。此外，任何@namespace规则都必须位于所有@charset和@import规则之后，以及样式表中任何其他样式声明之前。总的来说，@namespace在当今的CSS生态中是一个非常冷门的规则。基本上我入行这么久了，也没见识过这个属性的具体用途。如果你真的对它感兴趣，你可以看看这个详细的解释--spacing-out-on-css-namespaces[19]@media、@keyframes、@font-face这三个@规则大家应该都很熟悉了。@media：如果满足媒体查询的条件，则条件规则组中的规则生效。@keyframes：定义CSS动画的中间步骤。@font-face：描述将要下载的外部字体。@keyframes和@font-face想必大家都很熟悉了。但是@media实际上里面有一个世界！除了屏幕宽度的媒体查询，其实还有很多不同功能的媒体查询！下面我会列出一些我认为以后会越来越多提及的@media规则。prefers-reduced-motion降低动画效果prefers-reduced-motion规则查询用于降低动画效果。除了默认规则之外，只有一个语法值prefers-reduced-motion：reduce。启用这个规则后，就相当于告诉用户代理，希望他看到的页面可以删除或者替换一些让一些视障人士不舒服的动画类型。规范的原始文本：表示用户已通知系统他们更喜欢一个界面，该界面可以删除或替换基于运动的动画类型，这些动画会引发前庭运动障碍患者的不适。我可以谷歌翻译一下，翻译过来就是前庭运动障碍。我认为这是不对的。谷歌一下，是一种会引起头晕的病。例如，一个动画每秒闪烁多次，这会给患者带来不适。使用方法还是上面的代码：.ele{animation:aniName5sinfinitelinear;}@media(prefers-reduced-motion:reduce){.ele{animation:none;如果我们有这样的动画：当用户启用了prefers-reduced-motion:reduce时，它??应该被移除。那么如何启用这个选项呢？根据MDN--prefers-reduced-motion[20]：在GTK/Gnome中，您可以通过GNOMETweaks配置gtk-enable（在“常规”或“外观”菜单中，取决于版本）-animations的值是假的。您可以在[Settings]模块下的GTK3配置文件中设置gtk-enable-animations=false。在Windows10中：设置>轻松使用>显示>在Windows中显示动画。在Windows7中：控制面板>轻松访问>?使我的电脑更易于查看>关闭不必要的动画。在MacOS中：系统偏好设置>辅助功能>显示>减少运动。在iOS上：设置>通用>辅助功能>减少运动。在Android9+上：设置>辅助功能>移除动画。prefers-color-scheme适配明暗主题prefers-color-scheme还是很容易理解的，用来匹配用户通过操作系统设置的亮或夜（暗）模式。它有两个不同的值：prefers-color-scheme:light：明亮模式。prefers-color-scheme:dark:夜间（暗）模式。语法如下，如果我们默认为明亮模式，只需要适配夜间模式即可：body{background:white;颜色：黑色；}@media（首选颜色方案：深色）{主体{背景：黑色；白颜色;}}当然，以上只是一些CSS代码的提示。切换两套主题肯定不是那么简单的，方法有很多。.prefers-contrast调整内容颜色对比度prefers-contrast这个CSS媒体函数用来检测用户是否需要网页内容以更高或更低的对比度呈现。其中：prefers-contrast:no-preference：默认值，无变化。prefers-contrast:less：更喜欢使用较低对比度的界面。prefers-contrast:more:更喜欢使用对比度更高的界面。以prefers-contrast:less为例，语法如下：body{background:#fff;//文字和背景的对比度为5.74color:#666;}//提高对比度@media(prefers-contrast:more){body{background:#fff;//文字与背景的对比度为21color:#000;}}以上只是一段伪CSS代码，可能需要对一些特定的元素进行处理，或者使用filter:contrast()进行全局统一处理，当配置开启时用于实现像：Whatisthecolor这样的功能contrast你有没有关心过页面内容的展示，使用的颜色是否合适？色盲和色盲用户能否正常看到内容？善用色彩在任何时候都是有益的，而不仅限于色弱、色盲的用户。在户外使用手机时，在强烈的阳光下很难看清，但符合无障碍标准的高清、高对比度的文字更易阅读。这里有一个概念——色彩对比。简单的说，描述的是两种颜色的亮度（Brightness）的差异。当应用到我们的页面中时，大多数情况是背景颜色（background-color）和内容颜色（color）之间的对比。最权威的互联网无障碍规范——WCAGAA[21]规范规定，所有重要内容的颜色对比度需要达到4.5:1或以上（字号大于18时为3:1或以上），以便具有良好的可读性。prefers-reduced-transparency减少透明元素prefers-reduced-transparency这个CSS媒体函数用来检测用户是否请求减少网页中的透明元素：prefers-contrast:no-preference:默认值，没有变化。prefers-contrast:reduce：希望界面元素中的透明元素越少越好。以prefers-contrast:reduce为例，语法如下：.ele{opacity:0.5;}//减少透明元素@media(prefers-contrast:reduce){.ele{opacity:1;}}我上次介绍这个功能的时候用的时候还是红的，不过短短半年的时间，整体的兼容性有了很大的提升！prefers-reduced-data减少数据传输。对于一些网速不佳或流量昂贵的地区，用户会希望减少页面中的流量请求。基于此，有prefers-reduced-data。prefers-reduced-data此CSS媒体查询功能用于通知用户代理它希望减少页面的流量请求。prefers-reduced-data:no-preference:默认值，没有变化。prefers-reduced-data:reduce:更喜欢界面元素消耗更少的互联网流量。以prefers-reduced-data:reduce为例，语法如下：.ele{background-image:url(image-1800w.jpg);}//降低图像质量@media(prefers-reduced-data:reduce){.ele{背景图片:url(image-600w.jpg);}}当检测到用户启用了prefers-reduced-data:reduce时，我们会提供压缩率更高、尺寸更小、流量消耗更少的图片。当然，上面的代码只是一个提示，其实我们能做的还有更多。不过这还是实验室的功能，暂时没有浏览器支持这个媒体查询~
