条件规则组

条件规则组的基本概念

CSS3中的条件规则组允许开发者根据特定条件应用不同的样式规则。这些规则通过@规则实现，能够针对不同媒体类型、设备特性或浏览器支持情况动态调整样式表现。条件规则组的核心在于"条件判断"，它扩展了CSS的选择能力，使样式表具备更强的适应性和灵活性。

/* 基本语法结构 */
@条件 条件参数 {
  /* 符合条件的样式规则 */
}

媒体查询（@media）

媒体查询是最常用的条件规则组，通过检测设备特性来应用不同的样式。它可以检查视口宽度、设备方向、分辨率等多种参数。

/* 当视口宽度小于600px时应用的样式 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
  .sidebar {
    display: none;
  }
}

/* 打印样式 */
@media print {
  nav, footer {
    display: none;
  }
  body {
    font-size: 12pt;
    color: black;
  }
}

媒体查询支持逻辑运算符，可以组合多个条件：

/* 横屏且宽度在600-800px之间 */
@media (screen and (orientation: landscape) and (min-width: 600px) and (max-width: 800px)) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

特性查询（@supports）

特性查询用于检测浏览器是否支持特定的CSS属性或值，实现渐进增强的样式方案。

/* 检查浏览器是否支持grid布局 */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* 检查是否支持某个属性值 */
@supports (backdrop-filter: blur(5px)) {
  .modal {
    backdrop-filter: blur(5px);
  }
}

/* 否定条件 */
@supports not (display: grid) {
  .container {
    display: flex;
  }
}

文档规则（@document）

文档规则允许根据文档URL应用特定样式，虽然目前浏览器支持有限，但在用户样式表中很有用。

/* 仅对特定域名生效 */
@document url("https://example.com") {
  body {
    font-family: "Special Font", sans-serif;
  }
}

/* 域名匹配 */
@document domain("example.com") {
  .logo {
    background-image: url("local-logo.png");
  }
}

嵌套条件规则组

条件规则组可以嵌套使用，创建更复杂的条件逻辑。

@media (min-width: 768px) {
  @supports (display: flex) {
    .navigation {
      display: flex;
      justify-content: space-between;
    }
  }
  
  @media (orientation: landscape) {
    .hero {
      height: 100vh;
    }
  }
}

自定义媒体查询（@custom-media）

CSS4提案中的自定义媒体查询允许定义可重用的媒体查询条件。

/* 定义自定义媒体查询 */
@custom-media --small-viewport (max-width: 30em);

/* 使用自定义媒体查询 */
@media (--small-viewport) {
  .widget {
    padding: 0.5em;
  }
}

条件规则组的实际应用

响应式设计中，条件规则组常用于创建断点：

/* 移动设备优先的基础样式 */
.container {
  padding: 10px;
}

/* 平板设备 */
@media (min-width: 768px) {
  .container {
    padding: 20px;
    max-width: 720px;
  }
}

/* 桌面设备 */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

/* 大屏幕设备 */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

针对高DPI设备的样式优化：

/* 高分辨率显示设备 */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
  .logo {
    background-image: url("logo@2x.png");
    background-size: contain;
  }
}

条件规则组的性能考量

虽然条件规则组很强大，但需要注意：

1. 过多的媒体查询会增加样式表大小
2. 复杂的条件判断可能影响渲染性能
3. 条件规则组的顺序会影响样式优先级

/* 不推荐的写法 - 重复条件 */
@media (max-width: 600px) {
  .box { color: red; }
}
@media (max-width: 600px) {
  .box { background: blue; }
}

/* 推荐的写法 - 合并条件 */
@media (max-width: 600px) {
  .box { 
    color: red;
    background: blue;
  }
}

条件规则组与CSS预处理器的结合

Sass/Less等预处理器可以增强条件规则组的编写体验：

// Sass中的媒体查询变量
$breakpoint-mobile: 600px;

@media (max-width: $breakpoint-mobile) {
  .header {
    font-size: 1.2rem;
    
    // 嵌套规则
    &-title {
      color: #333;
    }
  }
}

// 使用mixin封装媒体查询
@mixin respond-to($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

.container {
  @include respond-to(768px) {
    max-width: 720px;
  }
}

条件规则组的未来发展方向

CSS工作组正在探索更强大的条件规则：

1. 容器查询（@container） - 根据元素容器尺寸而非视口应用样式
2. 嵌套条件规则 - 更简洁的嵌套语法
3. 更丰富的特性检测 - 检测浏览器对CSS功能的支持程度

/* 实验性的容器查询语法 */
@container (min-width: 300px) {
  .card {
    display: flex;
  }
}