跳至主要內容

条件规则与特性查询

Kpsmart2025年3月2日大约 10 分钟

CSS条件规则与特性查询

概述

CSS 条件规则与特性查询是现代 CSS 中的强大功能，它们允许开发者根据浏览器支持情况、媒体特性或其他条件有选择地应用样式。本文将详细介绍 CSS 条件规则的各种形式，特别是 @supports 特性查询，以及它们在实际开发中的应用和最佳实践，帮助您创建更加健壮和适应性强的网页样式。

目录

基本概念

什么是 CSS 条件规则

CSS 条件规则是一种允许根据特定条件应用 CSS 样式的机制。主要的条件规则包括：

  1. 媒体查询（@media）：基于设备特性（如屏幕尺寸、分辨率）应用样式
  2. 特性查询（@supports）：基于浏览器对特定 CSS 特性的支持情况应用样式
  3. 层叠层（@layer）：控制样式的优先级和组织
  4. 容器查询（@container）：基于容器尺寸应用样式

条件规则的重要性

条件规则在现代 Web 开发中至关重要，因为它们：

  • 实现响应式设计
  • 提供优雅的降级方案
  • 允许渐进增强
  • 简化浏览器兼容性处理
  • 提高代码组织和可维护性

媒体查询

媒体查询是最常用的条件规则，允许基于设备特性应用样式。

基本语法

@media 媒体类型 and (媒体特性) {
  /* 条件满足时应用的样式 */
}

媒体类型

  • all：所有设备
  • print：打印预览模式
  • screen：屏幕
  • speech：语音合成器

常用媒体特性

/* 视口宽度 */
@media (min-width: 768px) { /* 宽度大于等于 768px */ }
@media (max-width: 767px) { /* 宽度小于等于 767px */ }

/* 设备方向 */
@media (orientation: landscape) { /* 横向 */ }
@media (orientation: portrait) { /* 纵向 */ }

/* 显示质量 */
@media (resolution: 2dppx) { /* 高分辨率屏幕 */ }

/* 用户偏好 */
@media (prefers-color-scheme: dark) { /* 暗色模式 */ }
@media (prefers-reduced-motion: reduce) { /* 减少动画 */ }

逻辑操作符

/* AND 操作：所有条件都必须满足 */
@media screen and (min-width: 768px) and (max-width: 1023px) { }

/* OR 操作：任一条件满足即可 */
@media (max-width: 600px), (min-width: 900px) { }

/* NOT 操作：条件不满足时应用 */
@media not print { }

特性查询

特性查询（@supports）允许根据浏览器对特定 CSS 特性的支持情况应用样式。

基本语法

@supports (特性: 值) {
  /* 浏览器支持该特性时应用的样式 */
}

@supports not (特性: 值) {
  /* 浏览器不支持该特性时应用的样式 */
}

检测属性支持

/* 检测 grid 布局支持 */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }
}

/* 检测 flex 布局支持（作为回退） */
@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .item {
    flex: 0 0 calc(33.333% - 20px);
    margin: 10px;
  }
}

检测选择器支持

/* 检测 :is() 选择器支持 */
@supports selector(:is(a, b)) {
  :is(h1, h2, h3) {
    color: blue;
  }
}

/* 检测 :has() 选择器支持 */
@supports selector(a:has(> img)) {
  article:has(> .featured) {
    padding: 20px;
    background-color: #f9f9f9;
  }
}

逻辑组合

/* AND 操作：所有条件都必须满足 */
@supports (display: grid) and (gap: 20px) {
  /* 同时支持 grid 和 gap 属性 */
}

/* OR 操作：任一条件满足即可 */
@supports (display: flex) or (display: grid) {
  /* 支持 flex 或 grid 布局 */
}

/* 复杂组合 */
@supports ((display: grid) and (gap: 1rem)) or ((display: flex) and (flex-wrap: wrap)) {
  /* 复杂条件组合 */
}

层叠层

层叠层（@layer）是一种管理样式优先级的机制，允许更精确地控制样式的应用顺序。

基本语法

/* 声明层 */
@layer base, components, utilities;

/* 在层中定义样式 */
@layer base {
  /* 基础样式 */
}

@layer components {
  /* 组件样式 */
}

@layer utilities {
  /* 工具类样式 */
}

层的优先级

层的优先级由声明顺序决定，后声明的层优先级更高：

/* utilities 层的优先级高于 components 层，components 层高于 base 层 */
@layer base, components, utilities;

@layer utilities {
  .text-center { text-align: center !important; }
}

@layer components {
  .button { text-align: left; }
}

/* .button.text-center 元素的文本将居中对齐 */

嵌套层

层可以嵌套，创建更精细的优先级控制：

@layer framework {
  @layer base {
    /* framework.base 层 */
  }
  
  @layer components {
    /* framework.components 层 */
  }
}

@layer custom {
  /* custom 层，优先级高于 framework 层 */
}

实际应用

渐进增强

使用特性查询实现渐进增强，为支持现代特性的浏览器提供增强体验：

/* 基础布局（所有浏览器） */
.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery-item {
  width: calc(33.333% - 20px);
  margin: 10px;
}

/* 增强布局（支持 grid 的浏览器） */
@supports (display: grid) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
  
  .gallery-item {
    width: auto;
    margin: 0;
  }
}

优雅降级

为不支持某些特性的浏览器提供替代方案：

/* 现代浏览器使用 sticky 定位 */
.nav {
  position: sticky;
  top: 0;
}

/* 不支持 sticky 的浏览器使用固定定位 */
@supports not (position: sticky) {
  .nav {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  body {
    padding-top: 60px; /* 导航栏高度 */
  }
}

响应式设计与特性查询结合

结合媒体查询和特性查询创建更精确的条件样式：

/* 基础样式 */
.container {
  padding: 20px;
}

/* 中等屏幕 + grid 支持 */
@media (min-width: 768px) {
  @supports (display: grid) {
    .container {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 20px;
    }
  }
}

/* 大屏幕 + grid 支持 */
@media (min-width: 1200px) {
  @supports (display: grid) {
    .container {
      grid-template-columns: 3fr 1fr 1fr;
    }
  }
}

使用层叠层组织样式

使用 @layer 组织大型项目的样式：

/* 声明层的优先级顺序 */
@layer reset, base, layout, components, utilities;

/* 重置样式 */
@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

/* 基础样式 */
@layer base {
  body {
    font-family: sans-serif;
    line-height: 1.5;
    color: #333;
  }
  
  a {
    color: #0077cc;
    text-decoration: none;
  }
}

/* 布局样式 */
@layer layout {
  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .grid {
    display: grid;
    gap: 20px;
  }
}

/* 组件样式 */
@layer components {
  .button {
    padding: 8px 16px;
    background-color: #0077cc;
    color: white;
    border: none;
    border-radius: 4px;
  }
  
  .card {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
  }
}

/* 工具类 */
@layer utilities {
  .text-center { text-align: center; }
  .mt-20 { margin-top: 20px; }
  .hidden { display: none; }
}

高级技巧

检测多个特性

检测多个相关特性的组合支持：

/* 检测完整的 CSS Grid 支持 */
@supports (display: grid) and (grid-template-columns: subgrid) and (grid-template-rows: subgrid) {
  /* 完整支持 CSS Grid Level 2 的浏览器 */
  .advanced-grid {
    display: grid;
    grid-template-columns: subgrid;
  }
}

特性查询中的 JavaScript 集成

结合 JavaScript 和 CSS 特性查询：

// 检测浏览器是否支持 grid 布局
if (CSS.supports('display', 'grid')) {
  // 启用依赖 grid 的功能
  enableGridFeatures();
} else {
  // 使用替代布局
  enableFallbackLayout();
}
/* CSS 中的对应样式 */
@supports (display: grid) {
  .grid-layout {
    display: grid;
  }
}

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

使用层叠层处理第三方样式

使用层叠层控制第三方库样式的优先级：

/* 将第三方库样式放在较低优先级的层中 */
@layer vendor, custom;

@layer vendor {
  @import 'third-party-library.css';
}

@layer custom {
  /* 自定义样式，优先级高于第三方库 */
  .button {
    /* 覆盖第三方库的按钮样式 */
  }
}

条件导入

使用 @import 结合条件规则：

/* 仅在支持 grid 的浏览器中导入高级样式 */
@supports (display: grid) {
  @import 'advanced-grid-styles.css';
}

/* 仅在暗色模式下导入暗色主题 */
@media (prefers-color-scheme: dark) {
  @import 'dark-theme.css';
}

浏览器兼容性

特性查询支持情况

特性ChromeFirefoxSafariEdge
@supports28+22+9+12+
@supports selector()105+103+16.4+105+
@layer99+97+15.4+99+

处理不支持特性查询的浏览器

对于不支持 @supports 的旧浏览器，可以采用以下策略：

  1. 提供基础样式：首先提供所有浏览器都能理解的基础样式
  2. 使用特性查询增强：然后使用特性查询为现代浏览器添加增强功能
/* 基础样式（所有浏览器） */
.layout {
  display: block;
}

.layout > * {
  margin-bottom: 20px;
}

/* 增强样式（支持 grid 的浏览器） */
@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
  
  .layout > * {
    margin-bottom: 0;
  }
}

处理不支持层叠层的浏览器

对于不支持 @layer 的浏览器，可以采用以下策略：

  1. 使用 CSS 预处理器：通过 Sass 或 Less 模拟层的概念
  2. 使用特性检测：结合 @supports 检测层叠层支持
/* 检测是否支持层叠层 */
@supports (selector(html)) {
  /* 使用层叠层的现代代码 */
  @layer base {
    /* 基础样式 */
  }
}

/* 不支持层叠层的浏览器回退代码 */
.base-styles {
  /* 基础样式 */
}

最佳实践

1. 渐进增强优于优雅降级

优先为所有浏览器提供基础功能，然后使用特性查询添加增强功能：

/* 基础样式（所有浏览器） */
.element {
  display: block;
  /* 基础样式 */
}

/* 增强样式（现代浏览器） */
@supports (display: grid) {
  .element {
    display: grid;
    /* 增强样式 */
  }
}

2. 避免过度依赖特性查询

特性查询应该用于增强体验，而不是核心功能：

/* 好的做法：核心功能不依赖特性查询 */
.gallery {
  display: flex;
  flex-wrap: wrap;
  /* 基础布局，确保内容可访问 */
}

@supports (display: grid) {
  .gallery {
    display: grid;
    /* 增强布局 */
  }
}

/* 避免这样：核心功能依赖特性查询 */
@supports (display: grid) {
  .critical-feature {
    /* 如果不支持 grid，这个功能将完全不可用 */
  }
}

3. 组合使用条件规则

合理组合不同类型的条件规则，创建更精确的样式应用条件：

/* 响应式设计 + 特性查询 + 用户偏好 */
@media (min-width: 768px) {
  @supports (display: grid) {
    @media (prefers-reduced-motion: no-preference) {
      .gallery {
        display: grid;
        transition: opacity 0.3s;
      }
    }
  }
}

4. 使用层叠层管理样式优先级

使用 @layer 替代 !important，更优雅地管理样式优先级：

/* 避免使用 !important */
.button {
  background-color: blue !important;
}

/* 更好的方式：使用层叠层 */
@layer base, components, utilities;

@layer utilities {
  .bg-blue {
    background-color: blue;
  }
}

@layer components {
  .button {
    background-color: gray;
  }
}

5. 测试和回退策略

始终测试不同浏览器的行为，并提供合适的回退策略：

/* 基础样式（所有浏览器） */
.layout {
  /* 基础布局 */
}

/* 测试多种特性组合 */
@supports (display: grid) and (gap: 1rem) {
  .layout {
    /* 完全支持现代 Grid 布局 */
  }
}

@supports (display: grid) and not (gap: 1rem) {
  .layout {
    /* 支持 Grid 但不支持 gap 属性 */
  }
}

参考资源

总结

CSS 条件规则和特性查询是现代 CSS 中不可或缺的工具，它们使开发者能够：

  1. 创建适应性强的布局：根据设备特性和浏览器能力调整样式
  2. 实现渐进增强：为支持现代特性的浏览器提供更好的体验
  3. 提供优雅降级：为不支持某些特性的浏览器提供替代方案
  4. 更好地组织样式：通过层叠层管理样式优先级和组织结构

随着 Web 平台的不断发展，条件规则和特性查询将继续发挥重要作用，帮助开发者应对日益复杂的浏览器环境和用户需求。掌握这些技术，将使您能够创建更加健壮、灵活和面向未来的 CSS 代码。