目录
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;} }