2020-2025年CSS新特性

MagicMoon
117 阅读1小时+

2020-2025年CSS新特性

特性总览表

特性发布年份Chrome支持版本Firefox支持版本Safari支持版本Edge支持版本
CSS Houdini API (增强)2020Chrome 66+部分支持 (需要启用标志)部分支持 (需要启用标志)Edge 79+ (基于Chromium)
CSS Scroll Snap (完善)2020Chrome 69+Firefox 68+ (完整支持)Safari 11+ (部分支持，2021年完全支持)Edge 79+ (基于Chromium)
CSS clamp() 函数2020Chrome 79+Firefox 75+ (完整支持)Safari 13.1+ (完整支持)Edge 79+ (基于Chromium)
CSS mask 属性2020Chrome 85+Firefox 53+ (完整支持，但部分属性需要前缀)Safari 15.4+ (完整支持)Edge 85+ (基于Chromium)
CSS text-underline-offset 和 text-decoration-thickness2020Chrome 87+Firefox 70+ (完整支持)Safari 12.1+ (完整支持)Edge 87+ (基于Chromium)
CSS Logical Properties (增强)2021Chrome 89+Firefox 63+ (完整支持)Safari 12.1+ (完整支持)Edge 89+ (基于Chromium)
CSS Aspect Ratio2021Chrome 88+Firefox 89+ (完整支持)Safari 15+ (完整支持)Edge 88+ (基于Chromium)
CSS :is() 和 :where() 伪类2021Chrome 88+Firefox 78+ (完整支持)Safari 14+ (完整支持)Edge 88+ (基于Chromium)
CSS ::target-text 伪元素2021Chrome 89+Firefox 不支持Safari 不支持Edge 89+ (基于Chromium)
CSS Ruby 排版2021Chrome 90+Firefox 38+ (完整支持)Safari 12.1+ (完整支持)Edge 90+ (基于Chromium)
CSS accent-color2021Chrome 93+Firefox 92+ (完整支持)Safari 15.4+ (完整支持)Edge 93+ (基于Chromium)
CSS Scrollbar-Gutter 和 Scrollbar-Color2021Chrome 94+Firefox 97+ (完整支持，但scrollbar-color需要前缀)Safari 不支持scrollbar-gutter，scrollbar-color部分支持Edge 94+ (基于Chromium)
CSS @layer规则2022Chrome 99+Firefox 97+ (完整支持)Safari 15.4+ (完整支持)Edge 99+ (基于Chromium)
CSS Individual Transform Properties2022Chrome 104+Firefox 104+ (完整支持)Safari 14.1+ (完整支持)Edge 104+ (基于Chromium)
CSS Container Queries2022Chrome 105+Firefox 110+ (完整支持)Safari 16+ (完整支持)Edge 105+ (基于Chromium)
CSS :has() 伪类2022Chrome 105+Firefox 121+ (完整支持)Safari 15.4+ (完整支持)Edge 105+ (基于Chromium)
CSS Text Wrap Balancing2022Chrome 108+Firefox 不支持Safari 不支持Edge 108+ (基于Chromium)
CSS Color Spaces and Functions2023Chrome 110+Firefox 113+ (完整支持)Safari 16.2+ (完整支持)Edge 110+ (基于Chromium)
CSS Nesting2023Chrome 112+Firefox 117+ (完整支持)Safari 16.5+ (完整支持)Edge 112+ (基于Chromium)
CSS 相对颜色语法与 light-dark() 函数2023Chrome 111+Firefox 113+ (完整支持)Safari 16.4+ (完整支持)Edge 111+ (基于Chromium)
CSS Animation Timeline2023Chrome 115+Firefox 113+ (完整支持)Safari 17.2+ (完整支持)Edge 115+ (基于Chromium)
CSS Subgrid2023Chrome 117+Firefox 115+ (完整支持)Safari 16.6+ (完整支持)Edge 117+ (基于Chromium)
HTML <details> 元素增强2024Chrome 121+Firefox 118+ (完整支持)Safari 15.4+ (完整支持)Edge 121+ (基于Chromium)
CSS Anchor Positioning2024Chrome 125+Firefox 125+ (完整支持)Safari 不支持Edge 125+ (基于Chromium)
CSS Motion Path (增强)2024Chrome 126+Firefox 122+ (完整支持)Safari 17.2+ (完整支持)Edge 126+ (基于Chromium)
CSS Container Queries (增强)2025Chrome 135+Firefox 不支持Safari 不支持Edge 135+ (基于Chromium)
CSS Scroll-Linked Animations (完善)2025Chrome 135+Firefox 不支持Safari 不支持Edge 135+ (基于Chromium)
CSS Overflow 5 (轮播特效)2025Chrome 135+Firefox 不支持Safari 不支持Edge 135+ (基于Chromium)

CSS Houdini API (增强)

  • 描述：CSS Houdini是一组底层API，允许开发者扩展浏览器的CSS渲染引擎，包括Paint API、Layout API、Animation Worklet等
  • Chrome支持版本：Chrome 66+ (2018年开始逐步支持，2020年有更多完善)
  • 浏览器兼容性：
    • Chrome: 66+ (完整支持)
    • Firefox: 部分支持 (需要启用标志)
    • Safari: 部分支持 (需要启用标志)
    • Edge: 79+ (基于Chromium)
  • 技术原理：Houdini API通过提供低级钩子，使开发者能够直接访问浏览器的CSS渲染引擎。它主要包括：
    • Paint API：自定义CSS绘制函数
    • Layout API：自定义布局算法
    • Animation Worklet：高性能动画
    • Typed OM：类型化CSS对象模型
  • 语法示例： 
    /* 注册自定义属性 */
@property --custom-color {
  syntax: '<color>';
  initial-value: #c00;
  inherits: false;
}

/* 使用自定义属性 */
.element {
  background: --custom-color;
  transition: --custom-color 0.3s ease;
}

    // 注册Paint Worklet
CSS.paintWorklet.addModule('paint-worklet.js');

    // paint-worklet.js
registerPaint('circle', class {
  static get inputProperties() { return ['--circle-color']; }
  paint(ctx, size, props) {
    const color = props.get('--circle-color').toString();
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(size.width / 2, size.height / 2, Math.min(size.width, size.height) / 2, 0, 2 * Math.PI);
    ctx.fill();
  }
});

    /* 使用自定义绘制 */
.circle-background {
  background-image: paint(circle);
  --circle-color: #ff6b6b;
}
  • 实际应用场景：
    1. 自定义图形和背景：创建复杂的几何图形、渐变效果，无需额外的图片资源
    2. 动态主题系统：通过自定义属性实现主题切换，减少CSS重复代码
    3. 性能优化：将复杂绘制逻辑移至渲染线程，提高动画性能
    4. 响应式设计：根据容器尺寸动态调整绘制内容
  • 注意事项：
    • Houdini API仍在发展中，不同浏览器支持程度不同
    • 使用前需要检查浏览器支持情况，提供降级方案
    • Paint Worklet运行在独立线程中，无法直接访问DOM
    • 复杂的Houdini实现可能影响页面性能，需进行适当测试

CSS Scroll Snap (完善)

  • 描述：提供了一种在滚动容器中精确定位滚动位置的方法，用于创建流畅的轮播和分页效果
  • Chrome支持版本：Chrome 69+ (2018年)，2020年有更多完善
  • 浏览器兼容性：
    • Chrome: 69+ (完整支持)
    • Firefox: 68+ (完整支持)
    • Safari: 11+ (部分支持，2021年完全支持)
    • Edge: 79+ (基于Chromium)
    • iOS Safari: 11+ (部分支持，2021年完全支持)
  • 技术原理：Scroll Snap通过定义滚动容器的捕捉类型和子元素的捕捉对齐方式，使滚动操作在特定位置"吸附"。它解决了传统JavaScript实现的轮播组件性能问题，提供了更流畅的原生滚动体验。
  • 语法示例： 
    /* 基础水平滚动捕捉 */
.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.scroll-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* 垂直滚动捕捉 */
.vertical-scroll {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}

.vertical-item {
  height: 100vh;
  scroll-snap-align: start;
}

/* 2D滚动捕捉 */
.grid-scroll {
  overflow: auto;
  scroll-snap-type: both mandatory;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.grid-item {
  scroll-snap-align: center;
}

/* 捕捉停止位置控制 */
.scroll-container {
  scroll-snap-stop: always; /* 或 normal */
}

/* 捕捉填充控制 */
.scroll-container {
  scroll-padding: 50px; /* 为捕捉位置添加偏移 */
}
  • 实际应用场景：
    1. 图片轮播：创建流畅的图片轮播组件，支持触摸滑动
    2. 全屏页面滚动：实现类似演示文稿的全屏页面滚动效果
    3. 产品展示：在电商网站中创建产品列表的横向滚动展示
    4. 时间轴导航：创建垂直时间轴，自动捕捉到关键时间点
    5. 卡片式布局：在移动端实现卡片式内容的横向滚动浏览
  • 性能优势：
    • 使用浏览器原生滚动机制，比JavaScript实现更流畅
    • 减少事件监听器和动画计算，降低CPU使用率
    • 在移动设备上与触摸手势完美集成
  • 注意事项：
    • scroll-snap-type: mandatory 强制捕捉，proximity 在接近捕捉点时才捕捉
    • 在混合方向滚动时，确保容器尺寸设置正确
    • 考虑添加scroll-padding为固定元素(如导航栏)留出空间
    • 在iOS设备上可能需要添加-webkit-overflow-scrolling: touch以获得更好体验

CSS clamp() 函数

  • 描述：用于创建流体布局，接受三个参数：最小值、首选值和最大值，实现响应式设计
  • Chrome支持版本：Chrome 79+ (2020年)
  • 浏览器兼容性：
    • Chrome: 79+ (完整支持)
    • Firefox: 75+ (完整支持)
    • Safari: 13.1+ (完整支持)
    • Edge: 79+ (基于Chromium)
    • iOS Safari: 13.4+ (完整支持)
  • 技术原理：clamp()函数是CSS数学函数的一部分，它将值限制在一个指定的范围内。语法为clamp(MIN, VAL, MAX)，其中：
    • MIN：最小值
    • VAL：首选值（通常是相对单位如vw、vh等）
    • MAX：最大值 当VAL小于MIN时，使用MIN；当VAL大于MAX时，使用MAX；否则使用VAL。
  • 语法示例： 
    /* 响应式字体大小 */
.fluid-text {
  /* 最小1rem，首选2.5vw，最大2rem */
  font-size: clamp(1rem, 2.5vw, 2rem);
}

/* 响应式标题 */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: clamp(1.8, 1.2, 2.5);
}

/* 响应式间距 */
.container {
  padding: clamp(1rem, 5vw, 3rem);
  margin: clamp(0.5rem, 2vw, 1.5rem);
}

/* 响应式宽度 */
.content {
  width: clamp(300px, 80%, 1200px);
  margin: 0 auto;
}

/* 响应式网格间距 */
.grid {
  display: grid;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 25vw, 300px), 1fr));
}

/* 复杂计算 */
.element {
  /* 结合calc()使用 */
  width: clamp(200px, calc(100% - 2rem), 800px);
  
  /* 结合其他数学函数 */
  height: clamp(100px, min(50vh, 400px), 500px);
}

/* 媒体查询替代方案 */
.responsive-box {
  /* 替代多个媒体查询 */
  padding: clamp(1rem, 5vw, 2rem);
  font-size: clamp(0.875rem, 2vw, 1.125rem);
}
  • 实际应用场景：
    1. 流体排版：创建随视口大小平滑变化的字体大小，避免断点跳跃
    2. 响应式间距：根据屏幕尺寸动态调整元素间距，保持视觉平衡
    3. 自适应容器：创建在不同屏幕尺寸下都有合适宽度的内容区域
    4. 弹性布局：实现组件尺寸的平滑过渡，提升用户体验
    5. 性能优化：减少媒体查询数量，简化CSS代码
  • 性能优势：
    • 减少媒体查询数量，简化CSS代码
    • 提供平滑的过渡效果，避免布局跳跃
    • 降低CSS复杂度，提高维护效率
  • 注意事项：
    • 确保MIN ≤ VAL ≤ MAX，否则函数将无效
    • 在使用视口单位时，考虑极端情况（如横竖屏切换）
    • 对于复杂计算，测试不同屏幕尺寸下的表现
    • 在旧版浏览器中需要提供降级方案或使用polyfill

CSS mask 属性

  • 描述：用于创建复杂的遮罩效果，控制元素的可见区域
  • Chrome支持版本：Chrome 85+ (2020年)
  • 浏览器兼容性：
    • Chrome: 85+ (完整支持)
    • Firefox: 53+ (完整支持，但部分属性需要前缀)
    • Safari: 15.4+ (完整支持)
    • Edge: 85+ (基于Chromium)
    • iOS Safari: 15.4+ (完整支持)
  • 技术原理：CSS mask属性允许使用图像或渐变作为元素的遮罩层，遮罩的透明部分会使元素对应区域变为透明，不透明部分则保持可见。这与clip-path不同，clip-path是基于路径的裁剪，而mask是基于像素的透明度控制。
  • 语法示例： 
    /* 基础遮罩 */
.masked-element {
  mask-image: url('mask.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* 渐变遮罩 */
.gradient-mask {
  mask-image: linear-gradient(to bottom, transparent, black);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black);
}

/* 径向渐变遮罩 */
.radial-mask {
  mask-image: radial-gradient(circle, transparent 30%, black 70%);
  -webkit-mask-image: radial-gradient(circle, transparent 30%, black 70%);
}

/* 多重遮罩 */
.multi-mask {
  mask-image: 
    url('pattern1.svg'),
    linear-gradient(45deg, transparent, black);
  mask-composite: add; /* 或 subtract, intersect, exclude */
}

/* 遮罩模式 */
.mask-mode {
  mask-image: url('image.png');
  mask-mode: luminance; /* 或 alpha */
}

/* 遮罩边界 */
.mask-border {
  mask-border-source: url('border.png');
  mask-border-slice: 30;
  mask-border-repeat: round;
}

/* 遮罩类型 */
.mask-type {
  mask-type: luminance; /* 或 alpha */
}

/* 简写属性 */
.shorthand-mask {
  mask: url('mask.svg') center / cover no-repeat;
}

/* 动态遮罩效果 */
.animated-mask {
  mask-image: linear-gradient(45deg, transparent, black, transparent);
  mask-size: 300% 300%;
  animation: maskMove 3s infinite;
}

@keyframes maskMove {
  0% { mask-position: 0% 0%; }
  50% { mask-position: 100% 100%; }
  100% { mask-position: 0% 0%; }
}
  • 实际应用场景：
    1. 创意文本效果：为文本添加渐变或图案遮罩，创建独特的标题效果
    2. 图片过渡效果：使用遮罩实现图片之间的创意过渡动画
    3. 不规则形状：创建非矩形的元素形状，如圆形、星形等
    4. 加载动画：制作有趣的加载动画效果，如旋转遮罩、渐变遮罩等
    5. 背景融合：使前景元素与背景自然融合，创造深度感
  • 性能考虑：
    • 复杂的遮罩可能影响渲染性能，特别是在动画中
    • SVG遮罩通常比位图遮罩性能更好，且可缩放
    • 使用简单的几何遮罩比复杂图像遮罩性能更高
  • 注意事项：
    • WebKit内核浏览器需要-webkit-前缀
    • 遮罩图像与元素尺寸比例会影响最终效果
    • 遮罩不会影响元素的布局，仅影响视觉效果
    • 在某些情况下，可能需要为旧版浏览器提供降级方案
    • mask-border属性目前浏览器支持有限，需谨慎使用

CSS text-underline-offset 和 text-decoration-thickness

  • 描述：用于自定义下划线样式，包括偏移量和厚度
  • Chrome支持版本：Chrome 87+ (2020年)
  • 浏览器兼容性：
    • Chrome: 87+ (完整支持)
    • Firefox: 70+ (完整支持)
    • Safari: 12.1+ (完整支持)
    • Edge: 87+ (基于Chromium)
    • iOS Safari: 12.2+ (完整支持)
  • 技术原理：这些属性扩展了CSS文本装饰的能力，允许精确控制下划线（或其他装饰线）的位置和粗细。传统的text-decoration属性只能控制线条的存在与否，而这些新属性提供了更精细的控制。
  • 语法示例： 
    /* 基础下划线自定义 */
.custom-underline {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
  text-decoration-line: underline;
}

/* 使用不同单位 */
.underline-units {
  text-underline-offset: 0.3em; /* 相对于字体大小 */
  text-decoration-thickness: 0.05em; /* 相对于字体大小 */
}

/* 与text-decoration-color结合 */
.colored-underline {
  text-decoration: underline wavy #ff6b6b;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 3px;
}

/* 不同装饰线的偏移 */
.multiple-decorations {
  text-decoration: underline overline line-through;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}

/* 响应式下划线 */
.responsive-underline {
  text-underline-offset: clamp(0.1em, 0.05em + 0.2vw, 0.3em);
  text-decoration-thickness: clamp(1px, 0.5vw, 3px);
}

/* 悬停效果 */
.hover-underline {
  text-decoration: none;
  position: relative;
}

.hover-underline:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 2px;
  transition: text-underline-offset 0.2s ease, text-decoration-thickness 0.2s ease;
}

/* 特殊效果 */
.double-underline {
  text-decoration: underline;
  text-underline-offset: 0.1em;
  text-decoration-thickness: 1px;
  text-decoration-style: double;
}

/* 与字体大小结合 */
.scaled-underline {
  font-size: 1.2rem;
  text-underline-offset: calc(0.1em + 2px);
  text-decoration-thickness: calc(0.05em + 1px);
}
  • 实际应用场景：
    1. 品牌一致性：根据品牌指南精确调整链接下划线的位置和粗细
    2. 可读性提升：为小字号文本增加下划线偏移，避免与字符重叠
    3. 视觉层次：通过不同粗细的下划线区分不同级别的链接或强调文本
    4. 创意排版：创建独特的文本装饰效果，增强设计感
    5. 响应式设计：根据屏幕尺寸调整下划线样式，保持最佳视觉效果
  • 设计考虑：
    • 下划线偏移应足够大，避免与字符下降部（如g、p、q）重叠
    • 下划线厚度应与字体粗细和大小成比例
    • 对于小字号文本，可能需要更大的偏移和更细的下划线
    • 考虑颜色对比度，确保下划线在不同背景下都清晰可见
  • 注意事项：
    • 这些属性只影响下划线，不影响overline或line-through
    • 在某些字体中，可能需要根据字体特性调整偏移值
    • 在RTL（从右到左）文本中，下划线行为可能不同
    • 旧版浏览器可能不支持这些属性，需要提供降级方案
    • 与text-decoration-skip-ink属性结合使用可以避免下划线穿过字符下降部

2021年

CSS Logical Properties (增强)

  • 描述：基于逻辑方向而非物理方向的属性，如inline-start、block-end等，用于支持不同书写模式
  • Chrome支持版本：Chrome 89+ (2021年)
  • 浏览器兼容性：
    • Chrome: 89+ (完整支持)
    • Firefox: 63+ (完整支持)
    • Safari: 12.1+ (完整支持)
    • Edge: 89+ (基于Chromium)
    • iOS Safari: 12.2+ (完整支持)
  • 技术原理：CSS逻辑属性基于文档的书写方向而非物理方向，使布局能够适应不同的书写模式（如从左到右、从右到左、从上到下等）。这与传统的物理属性（如left、right、top、bottom）不同，逻辑属性会根据书写模式自动调整。
  • 语法示例： 
    /* 基础逻辑属性 */
.element {
  /* 替代 margin-left 和 margin-right */
  margin-inline: 1rem 2rem;
  
  /* 替代 margin-top 和 margin-bottom */
  margin-block: 0.5rem 1rem;
  
  /* 替代 padding-left 和 padding-right */
  padding-inline-start: 1.5rem;
  padding-inline-end: 1rem;
  
  /* 替代 border-top-width 和 border-bottom-width */
  border-block-width: 2px;
}

/* 尺寸属性 */
.sized-element {
  /* 替代 width 和 height */
  inline-size: 300px;
  block-size: 200px;
  
  /* 最大尺寸 */
  max-inline-size: 500px;
  max-block-size: 400px;
  
  /* 最小尺寸 */
  min-inline-size: 200px;
  min-block-size: 150px;
}

/* 定位属性 */
.positioned {
  position: absolute;
  inset-inline-start: 20px; /* 替代 left 或 right */
  inset-block-start: 30px;  /* 替代 top 或 bottom */
}

/* 文本对齐 */
.text-aligned {
  text-align: start; /* 替代 left 或 right */
  text-align: end;   /* 替代 right 或 left */
}

/* 浮动 */
.floated {
  float: inline-start; /* 替代 left 或 right */
  float: inline-end;   /* 替代 right 或 left */
}

/* 清除浮动 */
.cleared {
  clear: inline-start;
  clear: inline-end;
  clear: both;
}

/* 与writing-mode结合 */
.vertical-text {
  writing-mode: vertical-rl;
  margin-block: 1rem 2rem; /* 垂直方向的上下边距 */
}

/* 与direction结合 */
.rtl-text {
  direction: rtl;
  padding-inline-start: 2rem; /* 在RTL中相当于padding-right */
}
  • 实际应用场景：
    1. 国际化网站：创建支持多种语言和书写模式的布局，无需重写CSS
    2. 响应式设计：在不同屏幕方向上保持一致的布局逻辑
    3. 组件库开发：创建可适应不同书写模式的可复用组件
    4. 多语言内容：处理混合语言内容时的布局问题
    5. 创意布局：利用垂直书写模式创建独特的页面布局
  • 设计优势：
    • 减少为不同语言创建单独样式表的需要
    • 提高代码的可维护性和可重用性
    • 使布局更加语义化和逻辑化
    • 简化多语言网站的CSS管理
  • 注意事项：
    • 在混合使用逻辑属性和物理属性时，注意可能的冲突
    • 某些旧版浏览器可能需要前缀或polyfill
    • 在团队开发中，确保所有开发者理解逻辑属性的概念
    • 测试不同书写模式下的布局效果，确保一致性
    • 考虑使用CSS自定义属性简化逻辑属性的应用

CSS Aspect Ratio

  • 描述：允许元素保持固定的宽高比，无需使用padding技巧
  • Chrome支持版本：Chrome 88+ (2021年)
  • 浏览器兼容性：
    • Chrome: 88+ (完整支持)
    • Firefox: 89+ (完整支持)
    • Safari: 15+ (完整支持)
    • Edge: 88+ (基于Chromium)
    • iOS Safari: 15+ (完整支持)
  • 技术原理：aspect-ratio属性允许直接指定元素的宽高比，浏览器会自动调整元素的尺寸以保持这个比例。这替代了传统的"padding-top百分比"技巧，使代码更加直观和易于维护。
  • 语法示例： 
    /* 基础宽高比 */
.aspect-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #f0f0f0;
}

/* 正方形 */
.square {
  width: 200px;
  aspect-ratio: 1 / 1;
}

/* 竖向比例 */
.portrait {
  width: 300px;
  aspect-ratio: 3 / 4;
}

/* 与max-width结合 */
.responsive-video {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
}

/* 与flexbox结合 */
.flex-container {
  display: flex;
  gap: 1rem;
}

.flex-item {
  flex: 1;
  aspect-ratio: 1 / 1;
}

/* 与grid结合 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.grid-item {
  aspect-ratio: 16 / 9;
}

/* 自动尺寸 */
.auto-aspect {
  aspect-ratio: 2 / 1;
  /* 只设置高度，宽度自动计算 */
  height: 100px;
}

/* 与object-fit结合 */
.image-container {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 响应式宽高比 */
.responsive-aspect {
  width: 100%;
  aspect-ratio: 16 / 9;
}

@media (max-width: 768px) {
  .responsive-aspect {
    aspect-ratio: 4 / 3;
  }
}

/* 最小/最大尺寸与宽高比 */
.constrained-aspect {
  width: 100%;
  min-width: 300px;
  max-width: 600px;
  aspect-ratio: 16 / 9;
}
  • 实际应用场景：
    1. 视频嵌入：保持视频的原始宽高比，避免变形
    2. 图片画廊：创建统一尺寸的图片缩略图网格
    3. 卡片布局：确保所有卡片保持一致的宽高比
    4. 响应式设计：在不同屏幕尺寸下保持元素比例
    5. 地图嵌入：保持地图区域的适当比例
  • 性能优势：
    • 替代复杂的padding-top技巧，简化CSS代码
    • 减少不必要的包装元素
    • 提高代码可读性和可维护性
    • 更好的浏览器优化和渲染性能
  • 注意事项：
    • 当同时设置width、height和aspect-ratio时，浏览器会优先保持宽高比
    • 在flex容器中，flex属性可能与aspect-ratio产生冲突
    • 对于替换元素（如img、video），aspect-ratio的行为可能略有不同
    • 在旧版浏览器中需要提供降级方案或使用polyfill
    • 与min-width/max-width/min-height/max-height结合使用时需注意优先级

CSS :is() 和 :where() 伪类

  • 描述：用于简化选择器，:is() 伪类会影响选择器的优先级，而 :where() 伪类不会
  • Chrome支持版本：Chrome 88+ (2021年)
  • 浏览器兼容性：
    • Chrome: 88+ (完整支持)
    • Firefox: 78+ (完整支持)
    • Safari: 14+ (完整支持)
    • Edge: 88+ (基于Chromium)
    • iOS Safari: 14+ (完整支持)
  • 技术原理：:is()和:where()伪类（最初分别称为:matches()和:has()）允许将多个选择器组合在一起，减少重复代码。主要区别在于：
    • :is()伪类会保持其内部选择器的优先级
    • :where()伪类的优先级总是0，无论内部选择器多么具体
  • 语法示例： 
    /* 基础用法 */
/* 等价于 header h1, main h1, footer h1 */
:is(header, main, footer) h1 {
  color: blue;
}

/* :where() 不会增加优先级 */
:where(header, main, footer) h2 {
  color: red;
}

/* 嵌套使用 */
:is(article, section) :is(h1, h2, h3) {
  margin-top: 1rem;
}

/* 与伪元素结合 */
:is(.dark, .high-contrast) ::selection {
  background-color: yellow;
}

/* 与伪类结合 */
:is(a, button):hover {
  opacity: 0.8;
}

/* 复杂选择器组合 */
:is(.card, .panel) > :is(.header, .title) {
  font-weight: bold;
}

/* 优先级比较 */
/* 这个选择器优先级为 (0,1,0) - 一个类选择器 */
.container :is(.item) {
  color: green;
}

/* 这个选择器优先级为 (0,0,0) - :where()不增加优先级 */
.container :where(.item) {
  color: blue;
}

/* 实际应用：覆盖样式 */
/* 即使有更具体的选择器，:where()也可以被轻松覆盖 */
.component :where(.button) {
  background: #eee;
}

.component .button.primary {
  background: #007bff;
}

/* 与属性选择器结合 */
:is([type="text"], [type="email"], [type="password"]) {
  border: 1px solid #ccc;
}

/* 与:not()结合 */
:is(div, section):not(.hidden) {
  display: block;
}
  • 实际应用场景：
    1. 组件库开发：减少重复的选择器代码，提高可维护性
    2. 主题系统：使用:where()创建基础样式，允许轻松覆盖
    3. 表单样式：统一处理不同类型的表单元素
    4. 响应式设计：简化媒体查询中的选择器
    5. CSS重置：创建可被轻松覆盖的基础样式
  • 性能考虑：
    • :is()和:where()可以提高CSS的可读性和可维护性
    • 浏览器对这些选择器进行了优化，性能影响通常很小
    • 在极端情况下，非常复杂的选择器可能影响性能
  • 注意事项：
    • :is()和:where()不能在伪元素中使用
    • 在:is()和:where()内部，伪元素无效
    • 对于旧版浏览器，可能需要提供降级方案
    • 在团队开发中，明确使用:is()还是:where()的约定
    • 注意:where()的优先级为0可能导致意外的样式覆盖问题

CSS accent-color

  • 描述：用于自定义表单控件（如复选框、单选按钮等）的颜色
  • Chrome支持版本：Chrome 93+ (2021年)
  • 浏览器兼容性：
    • Chrome: 93+ (完整支持)
    • Firefox: 92+ (完整支持)
    • Safari: 15.4+ (完整支持)
    • Edge: 93+ (基于Chromium)
    • iOS Safari: 15.4+ (完整支持)
  • 技术原理：accent-color属性允许开发者自定义表单控件的强调色，这个颜色主要用于控件的激活状态、选中状态等。它提供了一种简单的方式来统一表单控件的视觉风格，而无需复杂的样式重写。
  • 语法示例： 
    /* 全局设置强调色 */
:root {
  accent-color: #0066cc;
}

/* 特定元素设置 */
.checkbox {
  accent-color: #ff6b6b;
}

/* 不同表单元素 */
input[type="checkbox"] {
  accent-color: #4caf50;
}

input[type="radio"] {
  accent-color: #2196f3;
}

input[type="range"] {
  accent-color: #ff9800;
}

input[type="progress"] {
  accent-color: #9c27b0;
}

/* 结合其他属性 */
.custom-form {
  accent-color: #673ab7;
  border: 2px solid #673ab7;
  border-radius: 4px;
}

/* 响应式强调色 */
@media (prefers-color-scheme: dark) {
  :root {
    accent-color: #64b5f6;
  }
}

/* 不同状态 */
.form-element {
  accent-color: #3f51b5;
}

.form-element:disabled {
  accent-color: #9e9e9e;
  opacity: 0.7;
}

/* 与CSS变量结合 */
.theme-blue {
  --accent-color: #2196f3;
}

.theme-green {
  --accent-color: #4caf50;
}

.themed-form {
  accent-color: var(--accent-color);
}

/* 表单组统一样式 */
.form-group {
  accent-color: #607d8b;
}

.form-group input[type="checkbox"],
.form-group input[type="radio"],
.form-group input[type="range"] {
  accent-color: inherit;
}
  • 实际应用场景：
    1. 品牌一致性：将表单控件颜色与品牌色彩保持一致
    2. 主题系统：创建不同主题的表单样式，如亮色/暗色主题
    3. 表单分组：为不同功能的表单组设置不同的强调色
    4. 状态指示：使用不同颜色表示表单元素的不同状态
    5. 无障碍设计：提高表单元素的可视性，帮助用户识别交互元素
  • 设计优势：
    • 简化表单样式定制，无需复杂的CSS技巧
    • 保持表单元素的原生行为和可访问性
    • 减少对图片或自定义SVG的依赖
    • 提高表单在不同浏览器和操作系统间的一致性
  • 注意事项：
    • accent-color不会影响所有表单元素，主要针对checkbox、radio、range和progress
    • 在某些浏览器中，颜色的应用方式可能略有不同
    • 对于复杂的自定义表单样式，可能仍需要其他CSS属性
    • 考虑颜色对比度，确保可访问性
    • 在高对比度模式下，用户设置可能覆盖accent-color

CSS Scrollbar-Gutter 和 Scrollbar-Color

  • 描述：scrollbar-gutter用于在滚动开始前预留滚动条空间，防止布局位移；scrollbar-color用于自定义滚动条颜色
  • Chrome支持版本：Chrome 94+ (2021年)
  • 浏览器兼容性：
    • Chrome: 94+ (完整支持)
    • Firefox: 97+ (完整支持，但scrollbar-color需要前缀)
    • Safari: 不支持scrollbar-gutter，scrollbar-color部分支持
    • Edge: 94+ (基于Chromium)
    • iOS Safari: 不支持
  • 技术原理：
    • scrollbar-gutter：为滚动条预留空间，防止内容出现或消失时的布局跳动
    • scrollbar-color：自定义滚动条的颜色，包括轨道和滑块 这两个属性解决了长期存在的滚动条相关布局问题，提高了用户体验。
  • 语法示例： 
    /* scrollbar-gutter基础用法 */
.stable-scroll {
  scrollbar-gutter: stable;
}

/* 两侧都预留空间 */
.both-edges-scroll {
  scrollbar-gutter: stable both-edges;
}

/* 自动模式 */
.auto-scroll {
  scrollbar-gutter: auto;
}

/* 结合overflow */
.scroll-container {
  overflow: auto;
  scrollbar-gutter: stable;
  height: 300px;
}

/* scrollbar-color基础用法 */
.custom-scrollbar {
  scrollbar-color: #ff6b6b #f0f0f0; /* 滑块颜色 轨道颜色 */
}

/* 使用系统颜色 */
.system-scrollbar {
  scrollbar-color: auto;
}

/* 与其他滚动属性结合 */
.enhanced-scroll {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  scrollbar-color: #4285f4 #f1f3f4;
  scrollbar-width: thin; /* Firefox */
}

/* 响应式滚动条 */
.responsive-scroll {
  scrollbar-gutter: stable;
}

@media (max-width: 768px) {
  .responsive-scroll {
    scrollbar-gutter: auto;
  }
}

/* 暗色主题滚动条 */
.dark-theme {
  scrollbar-color: #555 #222;
}

/* 与CSS变量结合 */
.themed-scrollbar {
  --thumb-color: #2196f3;
  --track-color: #f5f5f5;
  scrollbar-color: var(--thumb-color) var(--track-color);
}

/* 固定高度容器 */
.fixed-height-scroll {
  height: 400px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* 动态内容容器 */
.dynamic-content {
  max-height: 300px;
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}
  • 实际应用场景：
    1. 固定布局：防止内容变化导致页面布局跳动
    2. 模态框：确保模态框内容溢出时布局稳定
    3. 数据表格：在表格内容变化时保持列宽稳定
    4. 聊天界面：防止新消息导致布局跳动
    5. 品牌一致性：自定义滚动条颜色与品牌风格保持一致
  • 性能优势：
    • 减少布局重排和重绘，提高渲染性能
    • 避免JavaScript监听滚动条变化的复杂逻辑
    • 提供更流畅的用户体验
  • 注意事项：
    • scrollbar-gutter在Safari中不支持，需要考虑降级方案
    • scrollbar-color在WebKit内核浏览器中支持有限
    • 在Firefox中，scrollbar-color可能需要-moz-前缀
    • 自定义滚动条可能影响用户习惯，需谨慎使用
    • 在高对比度模式下，用户设置可能覆盖自定义颜色
    • scrollbar-gutter会增加元素的实际占用空间，需考虑布局影响

CSS ::target-text 伪元素

  • 描述：突出显示内部链接所指向的文本，提高用户体验
  • Chrome支持版本：Chrome 89+ (2021年)
  • 浏览器兼容性：
    • Chrome: 89+ (完整支持)
    • Firefox: 不支持
    • Safari: 不支持
    • Edge: 89+ (基于Chromium)
    • iOS Safari: 不支持
  • 技术原理：::target-text伪元素允许样式化URL片段指向的文本。当URL包含文本片段（如#:~:text=example）时，浏览器会滚动到并高亮匹配的文本。这个伪元素使开发者能够自定义高亮样式，提供更好的视觉反馈。
  • 语法示例： 
    /* 基础目标文本样式 */
::target-text {
  background-color: yellow;
  color: black;
}

/* 更复杂的高亮效果 */
::target-text {
  background: linear-gradient(90deg, #ffeb3b, #ffc107);
  color: #333;
  padding: 2px 4px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* 暗色主题样式 */
@media (prefers-color-scheme: dark) {
  ::target-text {
    background-color: #333;
    color: #ffeb3b;
    border: 1px solid #ffeb3b;
  }
}

/* 动画效果 */
::target-text {
  background-color: #ffeb3b;
  animation: highlight-fade 2s ease-out;
}

@keyframes highlight-fade {
  0% {
    background-color: #fff;
    transform: scale(1.05);
  }
  100% {
    background-color: #ffeb3b;
    transform: scale(1);
  }
}

/* 不同元素内的目标文本 */
article ::target-text {
  background-color: #e3f2fd;
  color: #0d47a1;
}

aside ::target-text {
  background-color: #f3e5f5;
  color: #4a148c;
}

/* 结合其他伪类 */
::target-text:hover {
  cursor: pointer;
  text-decoration: underline;
}

/* 与CSS变量结合 */
:root {
  --highlight-bg: #ffeb3b;
  --highlight-color: #333;
}

::target-text {
  background-color: var(--highlight-bg);
  color: var(--highlight-color);
}

/* 响应式高亮 */
@media (max-width: 768px) {
  ::target-text {
    background-color: transparent;
    border-bottom: 2px solid #ffeb3b;
    color: inherit;
  }
}
  • 实际应用场景：
    1. 文档系统：在技术文档或教程中突出显示特定术语或段落
    2. 搜索引擎结果：直接链接到页面中的特定文本并高亮显示
    3. 协作编辑：在协作工具中指向特定文本内容
    4. 教育平台：在课程内容中突出显示关键概念
    5. 法律文档：精确指向合同或法规中的特定条款
  • URL片段语法：
    • 基础语法：#:~:text=要搜索的文本
    • 精确匹配：#:~:text=prefix-,text,suffix
    • 上下文匹配：#:~:text=prefix-,text,-suffix
    • 多个匹配：#:~:text=文本1&text=文本2
  • 注意事项：
    • 目前浏览器支持有限，主要在基于Chromium的浏览器中可用
    • 文本片段区分大小写，但可以通过语法控制
    • 对于不支持此特性的浏览器，需要提供降级方案
    • 文本片段不会影响页面的DOM结构或JavaScript行为
    • 考虑隐私问题，避免通过URL片段暴露敏感信息
    • 在SPA（单页应用）中可能需要特殊处理才能正常工作

CSS Ruby 排版 (ruby-align 和 ruby-position)

  • 描述：用于控制简短注释（ruby文本）相对于主文本的位置和对齐方式，支持多语言排版
  • Chrome支持版本：Chrome 90+ (2021年)
  • 浏览器兼容性：
    • Chrome: 90+ (完整支持)
    • Firefox: 38+ (完整支持)
    • Safari: 12.1+ (完整支持)
    • Edge: 90+ (基于Chromium)
    • iOS Safari: 12.2+ (完整支持)
  • 技术原理：Ruby文本是一种排版注释，主要用于东亚文字的注音和释义。它由基础文本（base text）和注释文本（ruby text）组成，注释文本通常显示在基础文本的上方或旁边。CSS提供了多种属性来控制Ruby文本的显示方式。
  • 语法示例： 
    <!-- 基础HTML结构 -->
<ruby>
  漢<rt>かん</rt>
  字<rt>じ</rt>
</ruby>

<!-- 复杂Ruby结构 -->
<ruby>
  <rb>漢字</rb>
  <rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>

    /* ruby-align属性 */
ruby {
  /* 居中对齐 */
  ruby-align: center;
  
  /* 靠左对齐 */
  ruby-align: start;
  
  /* 靠右对齐 */
  ruby-align: end;
  
  /* 两端对齐 */
  ruby-align: space-between;
  
  /* 分散对齐 */
  ruby-align: space-around;
}

/* ruby-position属性 */
ruby {
  /* 注释在上方（默认） */
  ruby-position: over;
  
  /* 注释在下方 */
  ruby-position: under;
  
  /* 注释在两侧 */
  ruby-position: inter-character;
}

/* 不同语言的Ruby样式 */
.japanese-ruby {
  ruby-align: center;
  ruby-position: over;
  font-size: 1.2em;
}

.chinese-ruby {
  ruby-align: center;
  ruby-position: over;
  font-size: 1.1em;
}

/* Ruby文本样式 */
rt {
  font-size: 0.7em;
  color: #666;
  line-height: 1.2;
}

/* 响应式Ruby */
@media (max-width: 768px) {
  ruby {
    ruby-position: under;
  }
  rt {
    font-size: 0.6em;
  }
}

/* 特殊效果 */
.highlighted-ruby rt {
  color: #ff5722;
  font-weight: bold;
}

/* 复杂排版示例 */
.dictionary-entry {
  ruby-align: space-between;
  ruby-position: over;
}

.dictionary-entry rt {
  font-size: 0.6em;
  color: #03a9f4;
}

/* 与其他排版属性结合 */
ruby {
  letter-spacing: 0.05em;
  line-height: 1.8;
  text-indent: 0;
}

/* 多行Ruby处理 */
.multiline-ruby {
  ruby-align: center;
  ruby-position: over;
}

.multiline-ruby rt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
  • 实际应用场景：
    1. 语言学习：为外语单词添加注音或翻译
    2. 古籍出版：为古文字添加现代注音和释义
    3. 儿童教育：为儿童读物添加拼音注音
    4. 专业文献：为专业术语添加解释或音标
    5. 多语言网站：为不同语言提供适当的排版支持
  • 国际排版考虑：
    • 日语：主要用于振假名（furigana），提供汉字读音
    • 中文：用于拼音注音，帮助学习汉字发音
    • 韩语：用于谚文注音，标注汉字读音
    • 越南语：用于喃字注音，标注拉丁字母读音
  • 注意事项：
    • 在不支持Ruby的浏览器中，使用标签提供替代内容
    • 考虑不同语言的排版习惯和阅读方向
    • 对于长文本，可能需要特殊处理以避免换行问题
    • 在响应式设计中，考虑小屏幕上的可读性
    • 测试不同字体和字号下的Ruby显示效果
    • 注意Ruby文本与主文本的颜色对比度，确保可读性

2022年

CSS Container Queries

  • 描述：允许根据父容器的尺寸而非视口尺寸应用样式，解决了响应式设计的局限性
  • Chrome支持版本：Chrome 105+ (2022年)
  • 浏览器兼容性：
    • Chrome: 105+ (完整支持)
    • Firefox: 110+ (完整支持)
    • Safari: 16+ (完整支持)
    • Edge: 105+ (基于Chromium)
    • iOS Safari: 16+ (完整支持)
  • 技术原理：容器查询允许基于父容器的尺寸而非视口尺寸应用样式，解决了组件在不同上下文中的响应式问题。传统媒体查询基于视口尺寸，而容器查询基于容器尺寸，使组件能够根据其可用空间自适应调整。
  • 语法示例： 
    /* 定义容器 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 基础容器查询 */
@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

/* 使用容器名称 */
@container card (min-width: 600px) {
  .card-title {
    font-size: 1.5rem;
  }
}

/* 复杂容器查询 */
@container card (min-width: 300px) and (max-width: 600px) {
  .card {
    padding: 1rem;
    border-radius: 8px;
  }
}

/* 容器类型 */
.size-container {
  container-type: size; /* 监听宽度和高度变化 */
}

.inline-size-container {
  container-type: inline-size; /* 只监听内联方向尺寸变化 */
}

/* 嵌套容器查询 */
.outer-container {
  container-type: inline-size;
  container-name: outer;
}

.inner-container {
  container-type: inline-size;
  container-name: inner;
}

@container outer (min-width: 500px) {
  @container inner (min-width: 300px) {
    .nested-component {
      background: #f0f0f0;
    }
  }
}

/* 容器查询与媒体查询结合 */
@media (min-width: 768px) {
  .responsive-container {
    container-type: inline-size;
  }
}

@container (min-width: 400px) {
  .responsive-component {
    grid-template-columns: 1fr 1fr;
  }
}

/* 容器查询长度单位 */
@container (min-width: 400px) {
  .responsive-text {
    font-size: 2cqw; /* 容器查询宽度的2% */
    padding: 1cqi;  /* 容器查询内联尺寸的1% */
    margin: 0.5cqb; /* 容器查询块级尺寸的0.5% */
  }
}

/* 容器样式查询 */
@container style(--theme: dark) {
  .themed-component {
    background: #333;
    color: #fff;
  }
}

/* 实际应用示例 */
.card-layout {
  container-type: inline-size;
  container-name: card-layout;
}

/* 小容器布局 */
@container card-layout (max-width: 300px) {
  .card {
    display: block;
  }
  .card-image {
    width: 100%;
    height: 150px;
  }
  .card-content {
    padding: 1rem;
  }
}

/* 中等容器布局 */
@container card-layout (min-width: 301px) and (max-width: 600px) {
  .card {
    display: flex;
    flex-direction: column;
  }
  .card-image {
    width: 100%;
    height: 200px;
  }
}

/* 大容器布局 */
@container card-layout (min-width: 601px) {
  .card {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .card-image {
    width: 200px;
    height: 150px;
    flex-shrink: 0;
  }
  .card-content {
    flex: 1;
    padding: 1.5rem;
  }
}
  • 实际应用场景：
    1. 组件库开发：创建真正自适应的组件，根据容器尺寸调整布局
    2. 卡片布局：在不同大小的容器中调整卡片的排列方式
    3. 侧边栏组件：根据侧边栏宽度调整内容布局
    4. 网格系统：创建基于容器而非视口的响应式网格
    5. 混合布局：在同一页面中使用不同尺寸的组件容器
  • 设计优势：
    • 组件真正独立于页面布局，提高可重用性
    • 减少对特定断点的依赖，创建更灵活的响应式设计
    • 简化组件开发，无需考虑其在页面中的具体位置
    • 提高代码可维护性，组件样式更加内聚
  • 注意事项：
    • 容器查询不能在媒体查询中使用
    • 容器查询不支持容器外部的元素
    • 容器查询的性能影响取决于容器变化的频率
    • 在旧版浏览器中需要提供降级方案或使用polyfill
    • 避免过度嵌套容器查询，可能导致维护困难
    • 考虑容器查询的回退策略，确保在不支持的情况下仍可正常显示

CSS :has() 伪类

  • 描述：允许选择包含特定后代的元素，实现了父选择器的功能
  • Chrome支持版本：Chrome 105+ (2022年)
  • 浏览器兼容性：
    • Chrome: 105+ (完整支持)
    • Firefox: 121+ (完整支持)
    • Safari: 15.4+ (完整支持)
    • Edge: 105+ (基于Chromium)
    • iOS Safari: 15.4+ (完整支持)
  • 技术原理：:has()伪类被称为"父选择器"，它允许选择包含特定子元素的父元素。这个选择器接受一个相对选择器作为参数，当父元素包含匹配该选择器的后代时，父元素就会被选中。这解决了CSS中长期存在的无法基于子元素状态选择父元素的问题。
  • 语法示例： 
    /* 基础用法：选择包含img的figure */
figure:has(img) {
  border: 1px solid #ccc;
  padding: 1rem;
}

/* 选择包含特定类名的元素 */
.card:has(.card-image) {
  display: flex;
  flex-direction: column;
}

/* 选择包含特定元素的表单 */
form:has(input:invalid) {
  border: 2px solid #ff5252;
}

/* 复杂选择器 */
.grid:has(.featured-item) {
  grid-template-columns: 2fr 1fr;
}

/* 多个条件 */
.container:has(h1):has(p) {
  margin-bottom: 2rem;
}

/* 与伪类结合 */
.menu:has(.item:hover) {
  background-color: #f5f5f5;
}

/* 与伪元素结合 */
.card:has(::before) {
  position: relative;
}

/* 否定伪类 */
.container:has(:not(.active)) {
  opacity: 0.7;
}

/* 表单验证示例 */
.form-group:has(input:required) .label::after {
  content: " *";
  color: #ff5252;
}

.form-group:has(input:invalid) {
  border-color: #ff5252;
}

.form-group:has(input:valid) {
  border-color: #4caf50;
}

/* 响应式布局 */
.sidebar:has(.widget) {
  width: 300px;
}

.sidebar:has(.widget):has(.ad) {
  width: 350px;
}

/* 条件样式 */
.card:has(.badge) {
  position: relative;
}

.card:has(.badge.new) {
  border-left: 4px solid #4caf50;
}

.card:has(.badge.sale) {
  border-left: 4px solid #ff5252;
}

/* 复杂嵌套 */
.navigation:has(.dropdown:hover) .dropdown-menu {
  display: block;
}

/* 状态管理 */
.accordion:has(.panel.active) .panel-header {
  background-color: #e3f2fd;
}

/* 布局调整 */
.grid-container:has(.large-item) {
  grid-template-columns: 2fr 1fr 1fr;
}

.grid-container:has(.wide-item) {
  grid-template-columns: 1fr 2fr 1fr;
}

/* 与容器查询结合 */
.card-container:has(.featured) {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card:has(.image) {
    display: flex;
  }
}
  • 实际应用场景：
    1. 表单验证：根据输入状态设置表单组样式
    2. 条件布局：基于内容类型调整布局结构
    3. 状态管理：根据子元素状态设置父元素样式
    4. 组件增强：为包含特定内容的组件添加特殊样式
    5. 响应式设计：根据内容结构调整响应式布局
  • 性能考虑：
    • :has()选择器可能比其他选择器性能更低，因为需要检查子元素
    • 避免过度使用复杂的:has()选择器，特别是在大型DOM中
    • 浏览器对:has()进行了优化，但复杂选择器仍可能影响性能
  • 注意事项：
    • :has()不能在伪元素中使用
    • 在:has()内部使用伪元素有限制
    • 避免创建循环依赖，如:has(:has(...))
    • 在旧版浏览器中需要提供降级方案
    • 谨慎使用全局:has()选择器，可能影响性能
    • 考虑使用JavaScript处理复杂逻辑，而不是过度依赖:has()

CSS @layer规则

  • 描述：允许开发者控制CSS规则的优先级，避免样式冲突
  • Chrome支持版本：Chrome 99+ (2022年)
  • 浏览器兼容性：
    • Chrome: 99+ (完整支持)
    • Firefox: 97+ (完整支持)
    • Safari: 15.4+ (完整支持)
    • Edge: 99+ (基于Chromium)
    • iOS Safari: 15.4+ (完整支持)
  • 技术原理：@layer规则（CSS级联层）提供了一种管理CSS优先级的新方法。通过将样式规则组织到不同的层中，开发者可以控制样式的级联顺序，而不依赖于选择器的特异性。这解决了第三方库、框架和自定义样式之间的冲突问题。
  • 语法示例： 
    /* 定义层顺序 */
@layer reset, base, components, utilities;

/* 在层中定义规则 */
@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    color: #333;
  }
  
  h1, h2, h3 {
    margin-top: 0;
  }
}

@layer components {
  .card {
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.25rem;
    background-color: #007bff;
    color: white;
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }
  
  .mt-1 {
    margin-top: 0.25rem;
  }
}

/* 匿名层 */
@layer {
  .anonymous-layer-style {
    font-weight: bold;
  }
}

/* 嵌套层 */
@layer components {
  @layer buttons {
    .btn-primary {
      background-color: #007bff;
    }
    
    .btn-secondary {
      background-color: #6c757d;
    }
  }
  
  @layer forms {
    .form-input {
      border: 1px solid #ccc;
      padding: 0.5rem;
    }
  }
}

/* 未命名规则添加到第一个层 */
@layer base;

/* 未命名规则添加到最后一个层 */
@layer utilities;

/* 在层外定义的规则具有最高优先级 */
.high-priority {
  color: red;
}

/* 使用!important可以覆盖层优先级 */
@layer base {
  .important-style {
    color: blue !important;
  }
}

/* 与媒体查询结合 */
@layer components {
  @media (min-width: 768px) {
    .card {
      padding: 1.5rem;
    }
  }
}

/* 与CSS变量结合 */
@layer theme {
  :root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
  }
}

@layer components {
  .button {
    background-color: var(--primary-color);
  }
}

/* 导入样式到特定层 */
@import url("reset.css") layer(reset);
@import url("components.css") layer(components);

/* 实际应用示例 */
/* 1. 重置层 */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

/* 2. 基础层 */
@layer base {
  html {
    font-size: 16px;
  }
  
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
  }
}

/* 3. 组件层 */
@layer components {
  .card {
    padding: 1rem;
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
}

/* 4. 主题层 */
@layer theme {
  .card {
    background: var(--card-bg);
    color: var(--card-text);
  }
}

/* 5. 工具类层 */
@layer utilities {
  .absolute {
    position: absolute;
  }
  
  .relative {
    position: relative;
  }
}

/* 6. 覆盖层（最高优先级） */
@layer overrides {
  .card {
    border: 1px solid var(--card-border);
  }
}
  • 实际应用场景：
    1. 第三方库集成：将第三方样式隔离在特定层中，防止冲突
    2. 组件库开发：组织基础样式、组件样式和主题样式
    3. 主题系统：分离基础样式和主题样式，便于主题切换
    4. CSS架构：建立清晰的样式层次结构，提高可维护性
    5. 样式重置：确保重置样式不会意外覆盖其他样式
  • 设计优势：
    • 提供更直观的级联控制，减少对特异性的依赖
    • 简化第三方库和自定义样式的集成
    • 创建更可预测和可维护的CSS架构
    • 减少样式冲突和!important的使用
  • 注意事项：
    • 层的顺序很重要，后定义的层具有更高优先级
    • 层外的规则优先级高于层内规则
    • !important仍然可以覆盖层优先级
    • 在旧版浏览器中需要提供降级方案
    • 过度使用层可能导致架构复杂化
    • 考虑团队的CSS工作流程，确保一致使用层

CSS Individual Transform Properties

  • 描述：允许单独设置transform的各个属性，如translate、rotate、scale等
  • Chrome支持版本：Chrome 104+ (2022年)
  • 浏览器兼容性：
    • Chrome: 104+ (完整支持)
    • Firefox: 104+ (完整支持)
    • Safari: 14.1+ (完整支持)
    • Edge: 104+ (基于Chromium)
    • iOS Safari: 14.5+ (完整支持)
  • 技术原理：传统的transform属性需要将所有变换（平移、旋转、缩放等）组合在一个字符串中，而单独的transform属性允许开发者独立控制每种变换类型。这不仅提高了代码的可读性，还使得动画和过渡更加精确和高效。
  • 语法示例： 
    /* 基础单独变换属性 */
.transformed-element {
  /* 平移 */
  translate: 100px 50px; /* X轴 Y轴 */
  translate: 100px 50px 20px; /* X轴 Y轴 Z轴 */
  
  /* 旋转 */
  rotate: 45deg;
  rotate: 1.5rad; /* 弧度 */
  rotate: 0.25turn; /* 圈数 */
  
  /* 缩放 */
  scale: 1.5; /* 等比缩放 */
  scale: 1.5 0.8; /* X轴 Y轴 */
  scale: 1.5 0.8 0.5; /* X轴 Y轴 Z轴 */
}

/* 与传统transform属性对比 */
.traditional-transform {
  transform: translateX(100px) translateY(50px) rotate(45deg) scale(1.5);
}

.individual-transform {
  translate: 100px 50px;
  rotate: 45deg;
  scale: 1.5;
}

/* 单轴变换 */
.single-axis {
  translate-x: 100px;
  translate-y: 50px;
  translate-z: 20px;
  
  scale-x: 1.5;
  scale-y: 0.8;
  scale-z: 0.5;
}

/* 3D变换 */
.transform-3d {
  translate: 100px 50px 20px;
  rotate: 45deg 30deg 10deg; /* X轴 Y轴 Z轴 */
  scale: 1.5 0.8 0.5;
}

/* 动画和过渡 */
.animated-element {
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
  transition: 
    translate 0.3s ease,
    rotate 0.3s ease,
    scale 0.3s ease;
}

.animated-element:hover {
  translate: 20px 10px;
  rotate: 10deg;
  scale: 1.1;
}

/* 关键帧动画 */
@keyframes slide-in {
  from {
    translate: -100% 0;
    rotate: -10deg;
    scale: 0.8;
  }
  to {
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }
}

.slide-in {
  animation: slide-in 0.5s ease-out;
}

/* 组合使用 */
.complex-transform {
  translate: 50px 30px;
  rotate: 15deg;
  scale: 1.2;
  /* 仍然可以使用传统transform属性 */
  transform: skewX(5deg);
}

/* 响应式变换 */
.responsive-transform {
  translate: 20px 10px;
  rotate: 5deg;
}

@media (max-width: 768px) {
  .responsive-transform {
    translate: 10px 5px;
    rotate: 2deg;
  }
}

/* 与CSS变量结合 */
.dynamic-transform {
  translate: var(--translate-x, 0) var(--translate-y, 0);
  rotate: var(--rotate, 0deg);
  scale: var(--scale, 1);
}

/* 交互示例 */
.card {
  translate: 0 0;
  scale: 1;
  transition: translate 0.2s ease, scale 0.2s ease;
}

.card:hover {
  translate: 0 -5px;
  scale: 1.05;
}

/* 3D透视变换 */
.perspective-container {
  perspective: 1000px;
}

.flip-card {
  transform-style: preserve-3d;
  rotate: 0deg;
  transition: rotate 0.6s;
}

.flip-card.flipped {
  rotate: 180deg;
}
  • 实际应用场景：
    1. 微交互：创建平滑的悬停效果和过渡动画
    2. 页面转场：实现页面元素之间的流畅过渡
    3. 3D效果：创建卡片翻转、立方体等3D效果
    4. 响应式布局：根据屏幕尺寸调整元素变换
    5. 游戏界面：实现游戏元素的移动和旋转
  • 性能优势：
    • 浏览器可以优化单独的变换属性，提高渲染性能
    • 减少字符串解析和计算开销
    • 更精确的动画控制，减少不必要的重绘
    • 简化复杂动画的代码结构
  • 注意事项：
    • 单独变换属性与传统transform属性可以混合使用
    • 变换的顺序仍然重要，可能影响最终结果
    • 在旧版浏览器中需要提供降级方案
    • 3D变换需要设置适当的perspective
    • 过度使用变换可能影响性能，特别是在移动设备上
    • 考虑使用will-change属性优化动画性能

CSS Text Wrap Balancing

  • 描述：允许文本在多行中均匀分布，提高可读性
  • Chrome支持版本：Chrome 108+ (2022年)
  • 浏览器兼容性：
    • Chrome: 108+ (完整支持)
    • Firefox: 不支持
    • Safari: 不支持
    • Edge: 108+ (基于Chromium)
    • iOS Safari: 不支持
  • 技术原理：text-wrap: balance属性允许浏览器自动平衡文本在多行中的分布，使每行长度尽可能接近，提高文本块的整体美观度和可读性。这对于标题、引用和短段落特别有用，可以避免最后一行过短的问题。

2023年

CSS Subgrid

  • 描述：允许嵌套网格继承父网格的列/行定义，实现更复杂的网格布局
  • Chrome支持版本：Chrome 117+ (2023年)
  • 浏览器兼容性：
    • Chrome: 117+ (完整支持)
    • Firefox: 115+ (完整支持)
    • Safari: 16.6+ (完整支持)
    • Edge: 117+ (基于Chromium)
    • iOS Safari: 16.6+ (完整支持)
  • 技术原理：Subgrid允许嵌套网格继承父网格的列/行定义，使子网格可以与父网格对齐，创建更复杂和灵活的网格布局。这解决了传统网格布局中嵌套网格需要重新定义列/行的问题。
  • 语法示例： 
    /* 父网格定义 */
.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1rem;
}

/* 子网格继承父网格列 */
.child-grid {
  display: grid;
  grid-template-columns: subgrid; /* 继承父网格的列定义 */
  grid-template-rows: subgrid;  /* 继承父网格的行定义 */
  grid-column: 2 / span 2; /* 占用父网格的第2-3列 */
}

/* 部分继承 */
.partial-inherit {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr auto; /* 只继承行，列自定义 */
}

/* 与命名网格线结合 */
.named-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 1rem;
}

.subgrid-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-row: header-start / header-end; /* 对齐到父网格的命名行 */
}
  • 实际应用场景：
    1. 复杂表单布局：创建表单中的标签和输入字段网格，子网格可以与主表单网格对齐
    2. 卡片组件：设计卡片组件，其中内容区域使用子网格布局，适应不同的内容结构
    3. 数据表格：实现复杂的数据表格，其中表头和表体使用不同的网格系统
    4. 仪表板界面：创建仪表板布局，小部件可以使用子网格与主网格对齐
    5. 响应式画廊：构建图片画廊，其中每行或每列可以独立调整
  • 性能优势：
    • 减少网格嵌套的复杂性，无需重新定义网格线
    • 提高代码可读性和可维护性
    • 更灵活的布局控制，子网格可以选择性继承父网格属性
    • 更好的浏览器优化，网格布局计算更加高效
  • 注意事项：
    • 子网格不能定义新的网格轨道，只能继承父网格的轨道
    • 子网格的隐式网格线与父网格对齐
    • 在子网格中，margin和padding的行为与常规网格略有不同
    • 考虑使用grid-auto-flow属性控制子网格的布局方向
    • 在旧版浏览器中需要提供降级方案或使用polyfill

CSS Nesting

  • 描述：允许在CSS中嵌套选择器，类似于Sass等预处理器的功能
  • Chrome支持版本：Chrome 112+ (2023年)
  • 浏览器兼容性：
    • Chrome: 112+ (完整支持)
    • Firefox: 117+ (完整支持)
    • Safari: 16.5+ (完整支持)
    • Edge: 112+ (基于Chromium)
    • iOS Safari: 16.5+ (完整支持)
  • 技术原理：CSS嵌套允许开发者将相关选择器组织在一起，减少代码重复并提高可读性。嵌套规则会被浏览器解析为标准的CSS选择器，使开发者能够以更直观的方式编写样式。
  • 语法示例： 
    /* 基础嵌套 */
.card {
  color: #333;
  
  .title {
    color: #007bff;
    font-size: 1.5rem;
  }
  
  .content {
    padding: 1rem;
    
    p {
      line-height: 1.6;
      margin-bottom: 1rem;
    }
    
    a {
      color: #007bff;
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

/* 与伪类结合 */
.nav {
  list-style: none;
  display: flex;
  
  li {
    position: relative;
    
    &.active {
      background-color: #f0f0f0;
      
      a {
        color: #333;
      }
    }
  }
}

/* 与伪元素结合 */
.button {
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
  }
}

/* 媒体查询中的嵌套 */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    
    .widget {
      margin-bottom: 1rem;
      
      &.compact {
        padding: 0.5rem;
      }
    }
  }
}

/* 与CSS变量结合 */
.theme {
  --primary-color: #007bff;
  --text-color: #333;
  
  .header {
    background-color: var(--primary-color);
    color: var(--text-color);
    
    .logo {
      max-width: 100px;
    }
  }
}
  • 实际应用场景：
    1. 组件样式封装：创建自包含的组件，所有相关样式嵌套在组件类内
    2. 状态管理：使用嵌套选择器管理不同状态下的样式，如悬停、激活等
    3. 响应式设计：在媒体查询中使用嵌套，保持相关样式的组织结构
    4. 主题系统：结合CSS变量和嵌套，创建可定制的主题组件
    5. 复杂布局：使用嵌套处理复杂的网格和弹性布局结构
  • 性能优势：
    • 减少CSS文件大小，通过消除重复的选择器
    • 提高样式可读性和可维护性
    • 减少样式冲突，通过更好的作用域隔离
    • 更好的开发体验，无需预处理器即可使用嵌套语法
  • 注意事项：
    • 嵌套深度过深可能影响性能，建议控制在合理范围内
    • 在嵌套选择器中使用&符号引用父选择器
    • 避免在嵌套中使用通用选择器，可能导致意外匹配
    • 考虑CSS特异性，嵌套可能产生更高特异性的选择器
    • 在旧版浏览器中需要提供降级方案或使用polyfill
    • 与BEM等命名约定结合使用，可以更好地组织样式结构

CSS Color Spaces and Functions

  • 描述：支持更现代的颜色空间和函数，如OKLCH、LCH、color-mix()等
  • Chrome支持版本：Chrome 110+ (2023年)
  • 浏览器兼容性：
    • Chrome: 110+ (完整支持)
    • Firefox: 113+ (完整支持)
    • Safari: 16.2+ (完整支持)
    • Edge: 110+ (基于Chromium)
    • iOS Safari: 16.2+ (完整支持)
  • 技术原理：现代颜色空间和函数提供了更广泛、更精确的颜色控制能力。OKLCH和LCH颜色空间基于人类视觉感知，提供更均匀的颜色分布；color-mix()函数允许在CSS中直接混合颜色，无需预处理器。
  • 语法示例： 
    /* OKLCH颜色空间 */
.element {
  background-color: oklch(70% 0.2 260);
  color: oklch(30% 0.1 200);
}

/* LCH颜色空间 */
.element {
  background-color: lch(70% 30% 260);
  color: lch(30% 20% 200);
}

/* color-mix()函数 */
.element {
  background-color: color-mix(in srgb, #ff0000 20%, #0000ff 80%);
  color: color-mix(in lch, red 50%, blue 50%);
}

/* 相对颜色语法 */
.element {
  background-color: hsl(from var(--base-color) h 20);
  color: hsl(from var(--text-color) s 20%);
}

/* light-dark()函数 */
.element {
  background-color: light-dark(#fff, #333);
  color: light-dark(#000, #fff);
}

/* 与CSS变量结合 */
:root {
  --primary: oklch(70% 0.2 260);
  --secondary: oklch(50% 0.1 200);
  --accent: color-mix(in var(--primary) 80%, white);
}

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

/* 媒体查询中的颜色调整 */
@media (prefers-color-scheme: dark) {
  .element {
    background-color: oklch(90% 0.1 230);
    color: oklch(98% 0.1 230);
  }
}

/* 渐变中的现代颜色 */
.gradient {
  background: linear-gradient(in oklch, oklch(70% 0.2 260), oklch(50% 0.1 200));
}
  • 实际应用场景：
    1. 设计系统：使用OKLCH和LCH创建更一致、更可访问的颜色系统
    2. 主题切换：利用light-dark()函数实现自动主题切换
    3. 动态颜色：使用color-mix()创建基于用户交互的动态颜色变化
    4. 品牌一致性：通过现代颜色空间确保品牌颜色在不同设备上的一致性
    5. 数据可视化：使用更精确的颜色空间创建更准确的数据可视化
  • 性能优势：
    • 更精确的颜色控制，减少颜色不一致问题
    • 更好的可访问性，符合WCAG对比度要求
    • 减少对预处理器的依赖，直接在CSS中处理颜色
    • 更高效的渐变和过渡效果
    • 更好的颜色插值和平滑过渡
  • 注意事项：
    • 现代颜色空间在旧版浏览器中支持有限，需要提供降级方案
    • OKLCH和LCH颜色可能在不同浏览器中显示略有差异
    • color-mix()函数不支持颜色空间转换，需要确保颜色在同一空间
    • 考虑颜色对比度，特别是在使用现代颜色空间时
    • 测试在不同设备和浏览器上的颜色显示效果
    • 了解颜色空间的限制，如某些颜色在sRGB空间中无法表示

CSS Animation Timeline

  • 描述：允许动画使用滚动或其他时间线作为触发条件，实现滚动驱动动画
  • Chrome支持版本：Chrome 115+ (2023年)
  • 浏览器兼容性：
    • Chrome: 115+ (完整支持)
    • Firefox: 113+ (完整支持)
    • Safari: 17.2+ (完整支持)
    • Edge: 115+ (基于Chromium)
    • iOS Safari: 17.2+ (完整支持)
  • 技术原理：动画时间线允许将动画的进度与滚动位置或其他时间线关联，而不是仅依赖于时间。这使得开发者可以创建基于用户交互的复杂动画序列，如滚动触发的视差效果。
  • 语法示例： 
    /* 基础滚动时间线 */
.element {
  animation: slide-in;
  animation-timeline: scroll(root);
}

/* 命名滚动时间线 */
.container {
  scroll-timeline-name: --my-scroll;
}

.element {
  animation: fade-in;
  animation-timeline: --my-scroll;
}

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

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

/* 元素可见性时间线 */
.element {
  animation: grow;
  animation-timeline: view(70% 0%);
}

@keyframes grow {
  from { transform: scale(0.8); }
  to { transform: scale(1); }
}

/* 与CSS变量结合 */
:root {
  --scroll-duration: 1s;
  --scroll-easing: ease-out;
}

.element {
  animation: slide-in var(--scroll-duration) var(--scroll-easing);
  animation-timeline: scroll(root);
}

/* 多个时间线 */
.element {
  animation: 
    rotate-in var(--duration) linear,
    scale-in var(--duration) ease-in;
  animation-timeline: 
    scroll(root block),
    view(inline 0%);
}

/* 进度范围 */
.element {
  animation: progress;
  animation-timeline: scroll(root);
  animation-range: 0% 20%, 80% 100%;
}

@keyframes progress {
  0% { width: 0%; }
  20% { width: 20%; }
  80% { width: 80%; }
  100% { width: 100%; }
}
  • 实际应用场景：
    1. 滚动触发动画：创建随页面滚动而触发的动画，如视差滚动效果
    2. 进度指示器：基于滚动进度显示动画，如阅读进度条
    3. 视口动画：当元素进入或离开视口时触发动画
    4. 交互式故事：创建基于用户滚动位置的交互式叙事体验
    5. 数据可视化：根据滚动位置展示数据图表或图形
  • 性能优势：
    • 使用浏览器原生动画API，性能优于JavaScript动画
    • 减少JavaScript事件监听，降低CPU使用率
    • 与GPU加速更好地集成，提供更流畅的动画
    • 更精确的动画控制，可以基于滚动位置精确调整
    • 减少布局抖动，动画与滚动同步进行
  • 注意事项：
    • 确保时间线名称在CSS和JavaScript中保持一致
    • 考虑动画性能，避免过于复杂的动画效果
    • 提供适当的降级方案，在不支持的浏览器中仍可使用
    • 测试不同滚动速度下的动画效果
    • 注意动画的可访问性，提供适当的动画控制选项
    • 考虑使用will-change属性优化动画性能

CSS 相对颜色语法与 light-dark() 函数

  • 描述：相对颜色语法允许基于现有颜色调整属性；light-dark()函数用于根据系统主题自动切换颜色
  • Chrome支持版本：Chrome 111+ (2023年)
  • 浏览器兼容性：
    • Chrome: 111+ (完整支持)
    • Firefox: 113+ (完整支持)
    • Safari: 16.4+ (完整支持)
    • Edge: 111+ (基于Chromium)
    • iOS Safari: 16.4+ (完整支持)
  • 技术原理：相对颜色语法允许基于现有颜色创建新颜色，如rgb(from red h 30)；light-dark()函数根据用户的系统主题设置自动选择颜色，简化了主题切换的实现。
  • 语法示例： 
    /* 相对颜色语法 */
.element {
  background-color: hsl(from var(--base-color) h 20);
  color: hsl(from var(--text-color) s 20%);
}

/* light-dark()函数 */
.element {
  background-color: light-dark(#fff, #333);
  color: light-dark(#000, #fff);
}

/* 与CSS变量结合 */
:root {
  --primary: oklch(70% 0.2 260);
  --secondary: oklch(50% 0.1 230);
}

.themed-element {
  background-color: var(--primary);
  color: light-dark(var(--primary), var(--secondary));
}

/* 媒体查询中的相对颜色 */
@media (prefers-color-scheme: dark) {
  .element {
    background-color: oklch(from var(--primary) l*0.8);
    color: oklch(from var(--text-color) l*0.8);
  }
}

/* 颜色空间转换 */
.element {
  background-color: oklch(70% 0.2 260);
  color: oklch(50% 0.1 230);
}
  • 实际应用场景：
    1. 主题系统：使用light-dark()函数创建自动适应系统主题的界面
    2. 动态颜色：基于用户操作或环境因素动态调整颜色
    3. 品牌一致性：使用相对颜色语法确保品牌颜色在不同上下文中的一致性
    4. 可访问性：通过现代颜色空间提供更好的对比度和可读性
    5. 数据可视化：使用更精确的颜色空间创建更准确的数据可视化
  • 性能优势：
    • 减少JavaScript中的颜色处理逻辑
    • 更好的浏览器优化和硬件加速
    • 减少颜色不一致问题
    • 提高主题切换的性能
    • 更精确的颜色控制和过渡效果
  • 注意事项：
    • 相对颜色语法不支持颜色空间转换，需要确保在同一颜色空间
    • light-dark()函数依赖于浏览器的主题检测，可能需要提供手动切换选项
    • 在旧版浏览器中需要提供降级方案
    • 考虑颜色对比度，特别是在使用现代颜色空间时
    • 测试不同设备和浏览器上的颜色显示效果
    • 了解颜色空间的限制，如某些颜色在sRGB空间中无法表示

2024年

CSS Anchor Positioning

  • 描述：允许元素相对于其他元素进行定位，类似于CSS Grid和Flexbox的增强。这个特性解决了长期以来CSS定位的难题，使得开发者可以轻松实现元素之间的精确定位，如工具提示、下拉菜单等，而不需要复杂的JavaScript计算。
  • Chrome支持版本：Chrome 125+ (2024年)
  • 浏览器兼容性：
    • Chrome: 125+ (完整支持)
    • Firefox: 125+ (完整支持)
    • Safari: 不支持
    • Edge: 125+ (基于Chromium)
    • iOS Safari: 不支持
  • 技术原理：锚点定位通过定义锚点元素和定位元素之间的关系，使定位元素可以相对于锚点元素的位置进行定位。这类似于CSS Grid中的网格项定位，但更加灵活，适用于任何布局上下文。

CSS Motion Path (增强)

  • 描述：允许元素沿着自定义路径移动，实现复杂的动画效果。这个特性使得开发者可以创建更自然、更流畅的动画，如物体沿着曲线移动、人物沿着路径行走等，增强了页面的动态效果。
  • Chrome支持版本：Chrome 126+ (2024年)
  • 浏览器兼容性：
    • Chrome: 126+ (完整支持)
    • Firefox: 122+ (完整支持)
    • Safari: 17.2+ (完整支持)
    • Edge: 126+ (基于Chromium)
    • iOS Safari: 17.2+ (完整支持)
  • 技术原理：运动路径允许元素沿着SVG路径或基本形状进行移动，通过offset-path属性定义路径，offset-distance和offset-rotate属性控制元素在路径上的位置和方向。这提供了比传统transform更精确的动画控制。

HTML <details> 元素增强

  • 描述：使用HTML <details> 元素结合CSS实现手风琴效果，无需JavaScript
  • Chrome支持版本：Chrome 121+ (2024年)
  • 浏览器兼容性：
    • Chrome: 121+ (完整支持)
    • Firefox: 118+ (完整支持)
    • Safari: 15.4+ (完整支持)
    • Edge: 121+ (基于Chromium)
    • iOS Safari: 15.4+ (完整支持)
  • 技术原理：<details>和<summary>元素是HTML5原生的折叠/展开组件，现代CSS增强使得开发者可以仅使用CSS创建美观的手风琴效果，无需依赖JavaScript，提高了性能和可访问性。
  • 语法示例： 
    /* 基础手风琴 */
details {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 1rem;
}

summary {
  padding: 0.5rem 1rem;
  background-color: #f5f5f5;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
}

summary:hover {
  background-color: #e9e9e9;
}

/* 自定义箭头 */
summary {
  list-style: none;
  padding-right: 1rem;
  position: relative;
}

summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  border-left: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #666;
  transform: rotate(45deg);
}

/* 多层嵌套手风琴 */
.accordion {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.accordion-item {
  border-bottom: 1px solid #eee;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-item[open] summary {
  background-color: #f0f0f0;
}

/* 动画过渡 */
details {
  transition: all 0.3s ease;
}

summary {
  transition: background-color 0.2s ease;
}

/* 响应式手风琴 */
@media (max-width: 768px) {
  .accordion {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  
  summary {
    padding: 0.75rem 0.75rem;
  }
}

/* 与表单结合 */
.form-group details {
  margin-bottom: 1rem;
}

.form-group summary {
  font-size: 1.1rem;
  color: #333;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  padding: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
}

/* 与图标结合 */
summary {
  padding-left: 2rem;
  position: relative;
}

summary::before {
  content: '▶';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}
  • 实际应用场景：
    1. FAQ页面：创建常见问题解答的折叠/展开区域
    2. 产品规格：展示产品详细信息的可折叠部分
    3. 导航菜单：实现响应式导航菜单，在小屏幕上折叠
    4. 内容管理：创建可折叠的内容区域，如文章章节
    5. 设置面板：构建应用程序设置中的可折叠选项
  • 性能优势：
    • 无需JavaScript，减少页面加载时间和资源消耗
    • 更好的可访问性，原生HTML元素支持键盘导航
    • 更好的SEO，内容始终存在于DOM中，便于搜索引擎索引
    • 更流畅的动画，使用CSS过渡而非JavaScript动画
    • 更好的移动设备支持，原生组件在移动设备上表现一致
  • 注意事项：
    • 确保summary元素具有足够的点击区域，提高可用性
    • 考虑添加aria属性增强可访问性
    • 在不支持details元素的浏览器中提供JavaScript降级方案
    • 测试键盘导航和屏幕阅读器的兼容性
    • 注意在嵌套手风琴中的焦点管理
    • 考虑使用CSS变量控制手风琴的样式和行为

2025年

CSS Container Queries (增强)

  • 描述：进一步增强容器查询功能，支持更多容器类型和查询条件。2025年的增强版本可能包括支持更多容器尺寸类型、更复杂的查询条件以及更好的性能优化，使开发者能够创建更灵活、更强大的响应式组件。
  • Chrome支持版本：Chrome 135+ (2025年)
  • 浏览器兼容性：
    • Chrome: 135+ (完整支持)
    • Firefox: 不支持
    • Safari: 不支持
    • Edge: 135+ (基于Chromium)
    • iOS Safari: 不支持
  • 技术原理：增强的容器查询可能包括样式查询（基于容器计算值）、尺寸查询（基于容器尺寸）和状态查询（基于容器状态），提供更全面的容器上下文响应能力。
  • 语法示例： 
    /* 样式查询 */
@container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

/* 尺寸查询 */
@container (min-width: 400px) {
  .component {
    grid-template-columns: 1fr 1fr;
  }
}

@container (min-width: 600px) {
  .component {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* 状态查询 */
@container state(--loading: true) {
  .component {
    opacity: 0.7;
    pointer-events: none;
  }
}

/* 容器类型 */
.size-container {
  container-type: size;
  container-name: size;
}

.inline-size-container {
  container-type: inline-size;
  container-name: inline;
}

/* 嵌套容器查询 */
@container size(min-width: 300px) {
  @container (min-width: 200px) {
    .nested-component {
      padding: 1rem;
    }
  }
}
  • 实际应用场景：
    1. 自适应组件：创建根据容器大小自动调整布局的组件
    2. 主题感知组件：根据容器状态应用不同样式
    3. 复杂布局系统：使用嵌套容器查询处理多层响应式设计
    4. 数据可视化：根据容器尺寸调整图表和图形显示
    5. 内容管理系统：根据容器类型应用不同编辑器样式
  • 性能优势：
    • 更精确的响应式控制，基于实际容器而非视口
    • 减少JavaScript媒体查询逻辑，提高性能
    • 更好的组件封装，减少全局样式依赖
    • 更灵活的布局系统，适应各种容器上下文
    • 更好的浏览器优化，容器查询计算更高效
  • 注意事项：
    • 容器查询不能在媒体查询中使用
    • 容器查询不支持容器外部的元素
    • 避免过度嵌套容器查询，可能影响性能
    • 确保容器名称在CSS和JavaScript中保持一致
    • 在旧版浏览器中需要提供降级方案或使用polyfill
    • 考虑容器查询的性能影响，特别是在复杂布局中
    • 使用适当的容器类型（size或inline-size）优化性能

CSS Scroll-Linked Animations (完善)

  • 描述：完善滚动链接动画功能，支持更多触发条件和动画类型。2025年的版本可能包括更精细的滚动控制、更多的时间线类型以及更好的性能表现，使开发者能够创建更复杂、更流畅的滚动驱动动画。
  • Chrome支持版本：Chrome 135+ (2025年)
  • 浏览器兼容性：
    • Chrome: 135+ (完整支持)
    • Firefox: 不支持
    • Safari: 不支持
    • Edge: 135+ (基于Chromium)
    • iOS Safari: 不支持
  • 技术原理：完善的滚动链接动画可能提供更精确的滚动控制、更丰富的时间线类型（如基于元素可见性的时间线）以及更好的性能优化，使滚动驱动的动画更加流畅和高效。
  • 语法示例： 
    /* 基础滚动时间线 */
.element {
  animation: slide-in;
  animation-timeline: scroll(root);
}

/* 命名滚动时间线 */
.container {
  scroll-timeline-name: --my-scroll;
}

.element {
  animation: fade-in;
  animation-timeline: --my-scroll;
}

/* 元素可见性时间线 */
.element {
  animation: grow;
  animation-timeline: view(70% 0%);
}

/* 进度范围 */
.element {
  animation: progress;
  animation-timeline: scroll(root);
  animation-range: 0% 20%, 80% 100%;
}

/* 与CSS变量结合 */
:root {
  --scroll-duration: 1s;
  --scroll-easing: ease-out;
}

.element {
  animation: slide-in var(--scroll-duration) var(--scroll-easing);
  animation-timeline: scroll(root);
}

/* 多个时间线 */
.element {
  animation: 
    rotate-in var(--duration) linear,
    scale-in var(--duration) ease-in;
  animation-timeline: 
    scroll(root block),
    view(inline 0%);
}
  • 实际应用场景：
    1. 滚动触发动画：创建随页面滚动而触发的动画，如视差滚动效果
    2. 进度指示器：基于滚动进度显示动画，如阅读进度条
    3. 视口动画：当元素进入或离开视口时触发动画
    4. 交互式故事：创建基于用户滚动位置的交互式叙事体验
    5. 数据可视化：根据滚动位置展示数据图表或图形
  • 性能优势：
    • 使用浏览器原生动画API，性能优于JavaScript动画
    • 减少JavaScript事件监听，降低CPU使用率
    • 与GPU加速更好地集成，提供更流畅的动画
    • 更精确的动画控制，可以基于滚动位置精确调整
    • 减少布局抖动，动画与滚动同步进行
  • 注意事项：
    • 确保时间线名称在CSS和JavaScript中保持一致
    • 考虑动画性能，避免过于复杂的动画效果
    • 提供适当的降级方案，在不支持的浏览器中仍可使用
    • 测试不同滚动速度下的动画效果
    • 注意动画的可访问性，提供适当的动画控制选项
    • 考虑使用will-change属性优化动画性能

CSS Overflow 5 (轮播特效)

  • 描述：借助CSS Overflow 5规范，单靠CSS就能实现多种轮播特效，无需JavaScript。这个特性扩展了CSS的溢出控制能力，允许创建流畅的轮播效果，包括自动播放、无限滚动等，极大简化了轮播组件的实现。
  • Chrome支持版本：Chrome 135+ (2025年)
  • 浏览器兼容性：
    • Chrome: 135+ (完整支持)
    • Firefox: 不支持
    • Safari: 不支持
    • Edge: 135+ (基于Chromium)
    • iOS Safari: 不支持
  • 技术原理：CSS Overflow 5通过新的overflow属性和值，允许更精细的溢出控制，包括自动滚动方向、滚动捕捉和滚动行为控制，使纯CSS轮播成为可能。
  • 语法示例： 
    /* 基础轮播 */
.carousel {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* 自动播放轮播 */
.auto-carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  animation: auto-play 10s infinite;
}

.auto-carousel:hover {
  animation-play-state: paused;
}

@keyframes auto-play {
  to { scroll-snap-align: end; }
}

/* 无限滚动轮播 */
.infinite-carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
}

/* 垂直轮播 */
.vertical-carousel {
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
}

/* 分页轮播 */
.paginated-carousel {
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
}

.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* 带指示器的轮播 */
.carousel-with-indicators {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.carousel-item::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 50%;
}

.carousel-item.active::before {
  background-color: currentColor;
  transform: scale(1.2);
}
  • 实际应用场景：
    1. 产品展示：创建无需JavaScript的产品轮播
    2. 图片画廊：实现自动播放的图片轮播
    3. 故事轮播：创建带导航的故事轮播
    4. ** testimonials轮播**：展示客户评价的轮播
    5. 教程步骤：创建步骤指示的教程轮播
    6. 新闻头条：实现自动滚动的新闻标题轮播
    7. 卡片式导航：创建卡片式导航轮播
  • 性能优势：
    • 无需JavaScript，减少页面加载时间和资源消耗
    • 使用浏览器原生滚动，性能优于JavaScript实现
    • 更好的移动设备支持，触摸滚动更流畅
    • 更好的可访问性，原生HTML元素支持键盘导航
    • 更好的SEO，内容始终存在于DOM中，便于搜索引擎索引
    • 减少布局抖动，CSS滚动提供更稳定的体验
  • 注意事项：
    • 确保轮播内容具有足够的点击区域，提高可用性
    • 考虑添加aria属性增强可访问性
    • 在不支持Overflow 5的浏览器中提供JavaScript降级方案
    • 测试不同设备和浏览器上的轮播行为
    • 注意轮播的自动播放行为，可能需要提供暂停/播放控制
    • 考虑使用CSS变量控制轮播的行为和样式
    • 确保轮播指示器与当前幻灯片同步
avatar
文章
阅读
粉丝