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;
  }
}
相关推荐
泷羽Sec-静安1 天前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
一只学java的小汉堡1 天前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
九皇叔叔1 天前
HTML与CSS基础入门:从语法到页面结构全解析
css·html·1024程序员节
_殊途1 天前
HTML-CSS项目练习
前端·css·html
β添砖java2 天前
vivo响应式官网
前端·css·html·1024程序员节
jingling5552 天前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css
Gee Explorer2 天前
第一篇使用HTML写一个随机点名网页
css·html5·1024程序员节
前端橙一陈2 天前
彻底理解 Bootstrap 的响应式断点机制:从 CSS 到 SCSS 的实现原理
css·bootstrap·scss
神膘护体小月半2 天前
css 的 clip-path 属性,绘制气泡
css
代码改变世界100862 天前
像素塔防游戏:像素守卫者
css·游戏·css3·1024程序员节