目录
前言:这些新特性通常兼容性较差,在生产环境中谨慎使用!!!
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; } }