CSS at-rules(@) 规则扫盲

发布网友发布时间：2024-10-08 09:25

共1个回答

热心网友时间：2024-11-25 01:28

大部分同学使用过CSS的屏幕宽度媒体查询，例如：

这表示屏幕宽度超过900px时，内部样式生效。其实，CSS中包含大量以@符号开头的规则，称之为@规则。本文将介绍媒体查询外，其他有趣的且未来将扮演重要角色的@规则。

@规则是一个CSS语句，以@符号开头，后跟标识符，并包含至分号或CSS块的内容。以下是一些@规则，由其标识符指定，每种规则具有不同的语法：

除了@media、keyframes和@font-face，@supports、@counter-style、@property和@layer等规则已在或即将在Web应用中发挥关键作用。

接下来，本文将深入探讨它们：

@charset、@import、@namespace

这三个规则可以一起讲解。它们的语法简单，易于理解。其中：

如果CSS文件中包含非ASCII文本，如字体名称、伪元素content属性值或选择器中的非ASCII字符，需要确保CSS解析器知道如何正确转换字节为字符，以便理解CSS代码。若发现伪元素content中的内容乱码，可能是由于未声明字符集。

@import有两式语法，还可以在后面定义媒体查询规则。合理使用@import有益处，如文件组织、缓存管理等。然而，使用@import影响页面性能，主要体现在加载时间和渲染速度上。

媒体查询、@keyframes、@font-face

这三个@规则广为人知。@keyframes和@font-face大家非常熟悉。但@media规则内有乾坤，除了屏幕宽度查询，还有许多不同功能的媒体查询。本文将列出未来可能更加重要的@media规则。

prefers-reced-motion、prefers-color-scheme、prefers-contrast、prefers-reced-transparency和prefers-reced-data

这些规则用于适应用户偏好，如减弱动画效果、匹配明暗主题、调整内容色彩对比度、减少透明元素和减少数据传输。其中，prefers-reced-data为实验功能，暂无浏览器支持。

@supports特性检测

@supports通过CSS语法实现特性检测，允许在内部CSS块中编写如果特性检测通过的CSS语句。它支持not、and和or操作符。

@counter-style CSS计数器

@counter-style允许开发者自定义计数器样式。它弥补了原有计数器规范在国际化排版方面的不足。

@property CSS自定义属性

@property是CSS Houdini API的一部分，允许开发者显式定义自定义CSS属性，支持属性类型检查、默认值设定及继承。

@layer层

@layer是CSS 2022年最受瞩目的新特性，用于控制大型项目中CSS文件和内容的管理。它允许开发者创建级联层，层内的规则级联在一起，提供对层叠机制的更多控制。

@container容器查询

@container提供基于容器可用宽度改变布局的能力，解决了过往媒体查询的局限性。它允许CSS在不改变视口宽度的情况下，根据容器宽度的变化调整布局。

@scroll-timeline滚动时间线

@scroll-timeline能设定动画开始和结束由滚动容器内的滚动进度决定，而非时间。它允许纯CSS实现滚动与动画的结合。然而，此特性已被废弃，不再推荐使用。

总结，@规则家族强大，引入新特性和功能，增强CSS生态，使CSS能实现更多Web功能，预示着CSS在Web领域的重要角色。希望本文能提供帮助。

热心网友时间：2024-11-25 01:29