CSS新特性

目录

1. CSS 2023 新特性

2. CSS 2024 新特性

前言：这些新特性通常兼容性较差，在生产环境中谨慎使用！！！

1. CSS 2023 新特性

• 容器查询（Container Queries）：允许在容器尺寸而非视口尺寸的基础上应用不同的样式，提升了响应式设计的灵活性。

  /* 定义一个容器查询 会根据 .container 的宽度是否超过 500px 来切换 .item 的背景色。*/
  .container {
    container-type: inline-size;
  }
  
  .container > .item {
    background-color: lightblue;
  }
  
  @container (min-width: 500px) {
    .container > .item {
      background-color: lightcoral;
    }
  }
  

• 子网格（Subgrid）：进一步增强了网格布局，使嵌套网格继承父级网格的轨道，从而解决了复杂布局中的对齐问题。

  .container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
  }
  
  .subgrid-container {
    display: grid;
    grid-template-columns: subgrid; /* 子网格继承父网格 */
  }
  /* .subgrid-container 会继承 .container 的列定义，使布局更加一致。 */

• @scope 规则：通过限制样式影响范围，避免样式意外污染其他区域，增强组件的可维护性。

  @scope (.card) {
    .title {
      color: blue;
    }
  }
  /* .title 样式仅在 .card 内生效，其他地方不会被影响 */

• 样式查询（Style Queries）：结合容器查询，允许基于样式属性（如字体、颜色）进行查询，丰富了响应式设计的条件。

  @container style(color-scheme: dark) {
    .container {
      background-color: black;
      color: white;
    }
  }
  
  /* 根据父容器的 color-scheme 是否为 dark 模式来调整 .container 的背景色和字体颜色。 */

2. CSS 2024 新特性

• () 伪类支持：使 CSS 能选中包含特定内容的父元素，进一步扩展了选择器的能力，比如为包含错误输入的表单高亮其父元素。

  /* 当 `.form-group` 内有 `.input-error` 时，应用红色边框 */
  .form-group:has(.input-error) {
    border: 2px solid red;
  }
  
  /* 当 `.container` 中包含选中的复选框时，将背景色变为绿色 */
  .container:has(input[type="checkbox"]:checked) {
    background-color: lightgreen;
  }
  

• 颜色级联（CSS Color Level 5）：支持更多颜色空间（如 Lab、LCH），并引入相对颜色功能，让颜色计算更自然，尤其适用于暗模式。

  /* 使用 Lab 颜色空间来调整颜色的亮度和色调 */
  body {
    background-color: lab(80% -20 20);
    color: lch(70% 30 50);
  }
  
  /* 使用相对颜色调整：将暗模式下背景色变暗 */
  body {
    background-color: color-mix(in lch, #fff, #000 30%);
  }
  

• CSS Nesting：简化样式编写，类似于预处理器，支持嵌套规则，以便管理层级和组件结构。

  /* CSS 原生嵌套 */
  .card {
    padding: 20px;
    background-color: #fff;
  
    & .title {
      font-size: 24px;
      color: #333;
    }
  
    & .content {
      font-size: 16px;
      color: #666;
    }
  
    &:hover {
      background-color: #f5f5f5;
    }
  }
  

• 优先级调节：通过引入特定属性控制样式优先级，避免了 !important 滥用，使样式覆盖和继承更合理。

  @layer defaults {
    .button {
      background-color: lightgray;
      color: black;
    }
  }
  
  @layer overrides {
    .button {
      color: white;
      background-color: blue;
    }
  }