CSS 现代特性完全指南

概述

现代 CSS 引入了许多强大的新特性，极大地扩展了 CSS 的能力，让开发者能够创建更复杂、更灵活的布局和效果。

容器查询

1. 基础用法

/* 定义容器 */
.container {
  container-type: inline-size;
  container-name: card-container;
}

/* 基于容器尺寸的查询 */
@container card-container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
  }
  
  .card-image {
    width: 100%;
    height: auto;
  }
  
  .card-content {
    padding: 20px;
  }
}

@container card-container (min-width: 600px) {
  .card {
    grid-template-columns: 1fr 3fr;
  }
  
  .card-title {
    font-size: 24px;
  }
}

2. 实际应用

/* 响应式卡片组件 */
.card {
  container-type: inline-size;
}

.card-content {
  padding: 15px;
}

/* 小尺寸卡片 */
@container (max-width: 300px) {
  .card {
    display: flex;
    flex-direction: column;
  }
  
  .card-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
  
  .card-title {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .card-description {
    display: none; /* 小尺寸隐藏描述 */
  }
}

/* 中等尺寸卡片 */
@container (min-width: 301px) and (max-width: 500px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 15px;
  }
  
  .card-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
  }
  
  .card-title {
    font-size: 18px;
  }
  
  .card-description {
    font-size: 14px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* 大尺寸卡片 */
@container (min-width: 501px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 25px;
    align-items: center;
  }
  
  .card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
  }
  
  .card-title {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  .card-description {
    font-size: 16px;
    line-height: 1.6;
  }
}

层叠层

1. 基础概念

/* 定义层叠层 */
@layer base, components, utilities;

/* 创建层 */
@layer base {
  /* 基础样式 */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
  }
}

@layer components {
  /* 组件样式 */
  .button {
    display: inline-block;
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
  }
}

@layer utilities {
  /* 工具类 */
  .text-center { text-align: center; }
  .mt-1 { margin-top: 0.25rem; }
  .mb-2 { margin-bottom: 0.5rem; }
}

/* 未分层的样式优先级最高 */
.unlayered {
  color: red; /* 优先级高于所有层 */
}

2. 层管理

/* 导入外部样式到指定层 */
@import url('reset.css') layer(base);
@import url('components.css') layer(components);

/* 条件层 */
@layer theme.dark {
  /* 暗色主题样式 */
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f8f9fa;
  }
}

@layer theme.light {
  /* 亮色主题样式 */
  :root {
    --bg-color: #ffffff;
    --text-color: #333333;
  }
}

/* 动态激活层 */
[data-theme="dark"] {
  @layer theme.dark;
}

[data-theme="light"] {
  @layer theme.light;
}

子网格

1. 基础用法

/* 父网格 */
.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

/* 子网格 */
.child-grid {
  display: grid;
  grid-template-columns: subgrid; /* 继承父网格列 */
  grid-template-rows: subgrid;    /* 继承父网格行 */
  grid-column: span 2;           /* 跨越两列 */
  
  /* 子网格内部布局 */
  gap: 10px;
}

/* 子网格项目 */
.child-item {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
}

/* 复杂布局示例 */
.complex-grid {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: auto 1fr auto;
  gap: 25px;
  min-height: 100vh;
}

.sidebar {
  grid-column: 1;
  grid-row: 1 / -1;
}

.content {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.widget {
  grid-column: 3;
  grid-row: 2;
  display: grid;
  grid-template-rows: subgrid;
}

现代颜色函数

1. color-mix()

/* 颜色混合 */
.mixed-color {
  /* 混合两种颜色 */
  color: color-mix(in srgb, #007bff 50%, white);
  background-color: color-mix(in lch, red 30%, blue 70%);
}

/* 实际应用 */
.button {
  --color-primary: #007bff;
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 80%, black);
  --color-primary-active: color-mix(in srgb, var(--color-primary) 60%, black);
  
  background-color: var(--color-primary);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: var(--color-primary-hover);
}

.button:active {
  background-color: var(--color-primary-active);
}

/* 创建颜色变体 */
:root {
  --color-base: #3498db;
  --color-light: color-mix(in srgb, var(--color-base) 20%, white);
  --color-dark: color-mix(in srgb, var(--color-base) 20%, black);
  --color-muted: color-mix(in srgb, var(--color-base) 50%, gray);
}

2. color-contrast()

/* 自动选择对比度足够的颜色 */
.auto-contrast {
  background-color: var(--bg-color, #333);
  color: color-contrast(var(--bg-color) vs white, black);
}

/* 实际应用 */
.theme-card {
  --card-bg: #f8f9fa;
  
  background-color: var(--card-bg);
  color: color-contrast(var(--card-bg) vs #333, #666, #999, white);
  padding: 20px;
  border-radius: 8px;
}

/* 动态主题 */
[data-theme="dark"] .theme-card {
  --card-bg: #2d3748;
}

[data-theme="light"] .theme-card {
  --card-bg: #ffffff;
}

3. 相对颜色语法

/* 基于现有颜色创建新颜色 */
.relative-colors {
  --primary: #007bff;
  --primary-light: rgb(from var(--primary) r g b / 0.8);
  --primary-dark: rgb(from var(--primary) calc(r * 0.8) calc(g * 0.8) calc(b * 0.8));
  
  /* 使用HSL调整 */
  --primary-hsl: hsl(from var(--primary) h s l);
  --primary-lighter: hsl(from var(--primary) h s calc(l + 10%));
  --primary-darker: hsl(from var(--primary) h s calc(l - 10%));
}

/* 实际应用 */
.color-system {
  --base-hue: 210; /* 蓝色系 */
  --base-saturation: 70%;
  --base-lightness: 50%;
  
  --color-primary: hsl(var(--base-hue) var(--base-saturation) var(--base-lightness));
  --color-secondary: hsl(calc(var(--base-hue) + 30) var(--base-saturation) var(--base-lightness));
  --color-accent: hsl(calc(var(--base-hue) + 60) var(--base-saturation) var(--base-lightness));
  
  /* 创建调色板 */
  --color-50: hsl(from var(--color-primary) h s 95%);
  --color-100: hsl(from var(--color-primary) h s 90%);
  --color-200: hsl(from var(--color-primary) h s 80%);
  --color-300: hsl(from var(--color-primary) h s 70%);
  --color-400: hsl(from var(--color-primary) h s 60%);
  --color-500: hsl(from var(--color-primary) h s 50%);
  --color-600: hsl(from var(--color-primary) h s 40%);
  --color-700: hsl(from var(--color-primary) h s 30%);
  --color-800: hsl(from var(--color-primary) h s 20%);
  --color-900: hsl(from var(--color-primary) h s 10%);
}

现代布局函数

1. min(), max(), clamp()

/* 响应式字体 */
.responsive-text {
  font-size: clamp(16px, 2vw, 24px);
  line-height: clamp(1.4, 2vw, 1.6);
}

/* 响应式间距 */
.responsive-spacing {
  padding: clamp(15px, 3vw, 30px);
  margin: clamp(10px, 2vw, 20px);
}

/* 复杂布局 */
.complex-layout {
  width: min(100%, 1200px);
  height: max(500px, 50vh);
  font-size: clamp(14px, calc(1vw + 0.5rem), 18px);
}

/* 实际应用 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(15px, 3vw, 30px);
  padding: clamp(20px, 4vw, 40px);
}

2. calc() 增强

/* 现代calc用法 */
.enhanced-calc {
  /* 支持更多单位 */
  width: calc(100% - 2rem);
  height: calc(100vh - 60px);
  font-size: calc(1rem + 0.5vw);
  
  /* 支持三角函数 */
  --angle: 45deg;
  transform: rotate(calc(sin(var(--angle)) * 1rad));
  
  /* 支持指数函数 */
  --scale: 2;
  transform: scale(calc(pow(var(--scale), 2)));
}

现代选择器

1. :is() 和 :where()

/* 简化选择器 */
.simplified-selectors {
  /* 传统写法 */
  .header h1,
  .header h2,
  .header h3 {
    margin-bottom: 1rem;
  }
  
  /* 现代写法 */
  .header :is(h1, h2, h3) {
    margin-bottom: 1rem;
  }
  
  /* :where() 优先级为0 */
  .header :where(h1, h2, h3) {
    color: #333;
  }
}

/* 实际应用 */
.card :is(.title, .subtitle) {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.form :where(input, textarea, select) {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
}

2. :has() 父选择器

/* 根据子元素选择父元素 */
.parent-selector {
  /* 选择包含img的.card */
  .card:has(img) {
    border: 2px solid #007bff;
  }
  
  /* 选择包含.active的.nav-item */
  .nav-item:has(.active) {
    background-color: #f8f9fa;
  }
  
  /* 选择包含特定文本的元素 */
  .message:has(.error) {
    border-color: #dc3545;
  }
}

/* 实际应用 */
/* 当表单有错误时改变样式 */
.form:has(.error) {
  border-color: #dc3545;
  background-color: #fff5f5;
}

/* 当卡片有特定标签时 */
.card:has(.tag-premium) {
  box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3);
}

/* 响应式布局调整 */
.grid-item:has(.video) {
  grid-column: span 2;
}

现代动画与过渡

1. @scroll-timeline

/* 滚动时间线动画 */
@scroll-timeline scroll-animation {
  source: selector(#scroller);
  orientation: vertical;
  scroll-offsets: 0%, 100%;
}

@keyframes fade-in-on-scroll {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-element {
  animation: fade-in-on-scroll 1s ease forwards;
  animation-timeline: scroll-animation;
}

2. 视图过渡API

/* 视图过渡动画 */
@view-transition {
  navigation: auto;
}

/* 自定义过渡 */
::view-transition-old(root) {
  animation: fade-out 0.3s ease;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

性能与兼容性

1. 特性检测

/* 检测现代特性支持 */
@supports (container-type: inline-size) {
  .modern-layout {
    container-type: inline-size;
  }
}

@supports (color: color-mix(in srgb, red, blue)) {
  .modern-colors {
    color: color-mix(in srgb, #007bff 50%, white);
  }
}

@supports selector(:has(a)) {
  .modern-selectors {
    .parent:has(.child) {
      border-color: #007bff;
    }
  }
}

2. 渐进增强

/* 基础样式（所有浏览器） */
.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

/* 增强样式（支持现代特性的浏览器） */
@supports (color: color-mix(in srgb, red, blue)) {
  .button {
    --color-primary: #007bff;
    background-color: color-mix(in srgb, var(--color-primary) 90%, white);
  }
  
  .button:hover {
    background-color: color-mix(in srgb, var(--color-primary) 70%, black);
  }
}

工具与资源

1. 开发工具

Chrome DevTools：容器查询调试、层叠层检查
Firefox DevTools：现代CSS特性支持
Can I Use：浏览器兼容性查询

2. 学习资源

MDN Web Docs：现代CSS文档
CSS-Tricks：现代特性教程
Modern CSS：最新CSS技术分享

总结

现代 CSS 特性为前端开发带来了革命性的变化：

更强大的布局能力：容器查询、子网格
更好的样式管理：层叠层、作用域样式
更灵活的颜色系统：颜色函数、相对颜色
更智能的选择器：:has()、:is()、:where()
更丰富的交互效果：视图过渡、滚动动画

随着浏览器支持的不断完善，这些现代特性正在成为 Web 开发的新标准。建议开发者积极学习和采用这些技术，提升开发效率和用户体验。

创建时间：2022-08-22 最后更新：2022-08-22 作者：前端开发团队 标签：CSS, 现代CSS, 容器查询, 层叠层, 子网格, 颜色函数

CSS 现代特性完全指南#

#概述

#容器查询

#1. 基础用法

#2. 实际应用

#层叠层

#1. 基础概念

#2. 层管理

#子网格

#1. 基础用法

#现代颜色函数

#1. color-mix()

#2. color-contrast()

#3. 相对颜色语法

#现代布局函数

#1. min(), max(), clamp()

#2. calc() 增强

#现代选择器

#1. :is() 和 :where()

#2. :has() 父选择器

#现代动画与过渡

#1. @scroll-timeline

#2. 视图过渡API

#性能与兼容性

#1. 特性检测

#2. 渐进增强

#工具与资源

#1. 开发工具

#2. 学习资源

#总结

CSS 现代特性完全指南

概述

容器查询

1. 基础用法

2. 实际应用

层叠层

1. 基础概念

2. 层管理

子网格

1. 基础用法

现代颜色函数

1. color-mix()

2. color-contrast()

3. 相对颜色语法

现代布局函数

1. min(), max(), clamp()

2. calc() 增强

现代选择器

1. :is() 和 :where()

2. :has() 父选择器

现代动画与过渡

1. @scroll-timeline

2. 视图过渡API

性能与兼容性

1. 特性检测

2. 渐进增强

工具与资源

1. 开发工具

2. 学习资源

总结