CSS中的@规则（At-rules）详解

描述：
CSS中的@规则（At-rules）是指以@符号开头的特殊语句，用于向CSS传递指令、定义规则或条件。这些规则控制着CSS的编译、媒体查询、字体定义、动画定义等行为，是CSS功能扩展的重要组成部分。

常见@规则分类：

1. 条件型@规则 - 根据条件应用样式
2. 结构性@规则 - 定义CSS的结构和行为
3. 功能性@规则 - 提供特定功能

详细讲解：

一、@charset - 定义字符集

@charset "UTF-8";

• 必须写在样式表的最开头
• 指定样式表使用的字符编码
• 现代开发中较少使用，通常通过HTML的meta标签或HTTP头指定

二、@import - 导入其他样式表

@import url("reset.css");
@import "print.css" print;
@import "mobile.css" screen and (max-width: 768px);

• 用于在当前样式表中导入其他CSS文件
• 可添加媒体查询条件，只在特定条件下加载
• 必须放在所有其他规则之前（除了@charset）

三、@media - 媒体查询

@media screen and (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background: #333;
        color: white;
    }
}

• 根据设备特性应用不同的样式规则
• 支持多种媒体类型：screen、print、speech等
• 常用特性：width、height、orientation、prefers-color-scheme等

四、@supports - 特性检测

@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@supports not (display: grid) {
    .container {
        display: flex;
    }
}

• 检测浏览器是否支持某个CSS特性
• 语法类似媒体查询，支持and、or、not逻辑运算
• 实现渐进增强的优雅降级方案

五、@font-face - 自定义字体

@font-face {
    font-family: "MyFont";
    src: url("myfont.woff2") format("woff2"),
         url("myfont.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "MyFont", sans-serif;
}

• 定义网页中使用的自定义字体
• src属性指定字体文件路径和格式
• font-display控制字体加载期间的显示行为

六、@keyframes - 动画定义

@keyframes slidein {
    from {
        transform: translateX(-100%);
    }
    
    50% {
        transform: translateX(10%);
    }
    
    to {
        transform: translateX(0);
    }
}

.element {
    animation: slidein 1s ease-in-out;
}

• 定义动画序列的关键帧
• 使用百分比或from/to关键字定义动画状态
• 配合animation属性使用

七、@page - 打印样式

@page {
    size: A4;
    margin: 2cm;
    
    @top-left {
        content: "文档头部";
    }
}

• 控制打印页面的样式
• 定义页面大小、边距等
• 可添加页眉页脚内容

八、嵌套@规则

@media screen and (min-width: 1024px) {
    @supports (display: grid) {
        .container {
            display: grid;
            
            @media (orientation: landscape) {
                grid-template-columns: 2fr 1fr;
            }
        }
    }
}

• @规则可以相互嵌套使用
• 创建更复杂的条件样式逻辑
• 需要浏览器支持相应的嵌套语法

九、@namespace - 命名空间

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/* 只针对SVG中的a元素 */
svg|a {
    fill: blue;
}

• 定义XML命名空间，主要用于SVG和MathML
• 避免不同XML词汇表中的元素名称冲突

实际应用技巧：

1. 性能优化：使用@media的条件导入避免加载不必要的CSS
2. 兼容性处理：@supports实现渐进增强
3. 响应式设计：@media创建断点样式
4. 字体优化：@font-face配合font-display控制字体加载
5. 打印优化：@page改善打印体验

@规则大大扩展了CSS的能力，让开发者能够更精确地控制样式的应用条件和范围。