CSS新特性

CSS容器查询

容器查询允许开发者基于父容器尺寸而非视口尺寸应用样式。通过@container规则实现,需先使用container-type定义查询基准:

css 复制代码
.parent {
  container-type: inline-size;
}
@container (min-width: 600px) {
  .child { font-size: 1.2rem; }
}

层叠层(Cascade Layers)

通过@layer控制样式优先级,解决特异性冲突。可创建明确的分层结构:

css 复制代码
@layer base, components, utilities;
@layer base {
  button { background: red; }
}
@layer utilities {
  .btn { background: blue; } /* 最终生效 */
}

子网格(Subgrid)

扩展CSS Grid功能,允许嵌套网格继承父网格轨道。在grid布局中声明:

css 复制代码
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.child {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid; /* 继承父级列轨道 */
}

颜色函数更新

新增oklch()oklab()等感知均匀的颜色空间函数:

css 复制代码
.element {
  background: oklch(70% 0.3 150); /* 亮度 色度 色相 */
  color: oklab(0.6 -0.1 -0.2);
}

视口单位扩展

新增动态视口单位适应移动端浏览器UI变化:

  • dvw/dvh:考虑动态工具栏的视口尺寸
  • svw/svh:最小可见视口尺寸
  • lvw/lvh:最大可见视口尺寸

文本换行控制

text-wrap属性提供更精细的排版控制:

css 复制代码
p {
  text-wrap: pretty; /* 自动优化换行避免孤行 */
  text-wrap: balance; /* 平衡多行文本宽度 */
}

滚动驱动动画

通过scroll-timeline关联滚动位置与动画:

css 复制代码
@keyframes fade {
  to { opacity: 0 }
}
.scroller {
  scroll-timeline: --scroll-track;
}
.target {
  animation: fade auto linear;
  animation-timeline: --scroll-track;
}

嵌套语法

原生CSS支持类似预处理器嵌套写法:

css 复制代码
.parent {
  & .child { color: red; }
  @media (width >= 600px) {
    padding: 2rem;
  }
}
相关推荐
清灵xmf18 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
面向星辰1 天前
css选择器(继承补充)
前端·css
敲代码的嘎仔1 天前
JavaWeb零基础学习Day1——HTML&CSS
java·开发语言·前端·css·学习·html·学习方法
Tachyon.xue1 天前
Vue 3 项目集成 Element Plus + Tailwind CSS 详细教程
前端·css·vue.js
β添砖java2 天前
CSS网格布局
前端·css·html
EveryPossible3 天前
带有渐变光晕
前端·javascript·css
qianmo20213 天前
基于any2web+deepseek实现对三角函数定义的理解
css·html·css3
zhangxuyu11183 天前
flex布局学习记录
前端·css·学习
C+ 安口木4 天前
CSS通用优惠券样式
前端·css
蓝莓味的口香糖4 天前
【CSS】flex布局
前端·css