CSS（Cascading Style Sheets，层叠样式表）的标准演进是一个从简单文本样式 → 复杂布局 → 现代化原生能力的过程。以下是到2026年初为止的主要历史脉络与关键节点总结：
CSS 标准主要阶段时间线
| 时间 | 版本/阶段 | 主要里程碑与核心特性 | 浏览器支持情况（当时主流） | 备注 |
|---|---|---|---|---|
| 1994 | 概念提出 | Håkon Wium Lie 提出 CSS 想法（CERN） | — | 最早草案已包含媒体查询雏形 |
| 1996.12 | CSS Level 1 (CSS1) | 字体、颜色、背景、文本、盒模型基础、class/id选择器 | IE3/4、Netscape 4 开始部分支持 | 第一个正式推荐标准 |
| 1998.5 | CSS Level 2 (CSS2) | 定位（position）、z-index、媒体类型、伪类: hover 等 | IE5/6、Netscape 6+ 逐步支持 | 引入现代布局基础，但实现混乱 |
| 2000s 早期 | — | 浏览器战争后遗症：盒模型bug、float布局黄金时代 | IE6 长期霸占市场 | 实际开发大量 hack |
| ~2005–2011 | CSS 2.1 | 修复 CSS2 大量错误与不一致，规范化盒模型 | 几乎所有现代浏览器完整支持（2011推荐） | 至今仍是很多代码的实际基础 |
| 2009–2012 | CSS3 模块化开端 | 边框圆角、阴影、渐变、transition、animation、transform、多列布局、flexbox初稿 | Chrome/Safari 领先，Firefox 跟进 | 不再是一个大版本，而是模块独立推进 |
| 2012–2017 | CSS3 大爆发期 | Flexbox 成熟（2012）、Grid 初稿、CSS Variables（自定义属性）、calc()、@supports | 2016–2017 年基本全家桶可用 | 前端进入“CSS3 时代” |
| 2017–2020 | 现代化布局成熟 | Grid Layout 正式推荐（2017）、Writing Modes、Logical Properties、Houdini初探 | 全现代浏览器支持 | 宣告 float 布局彻底过时 |
| 2021–2023 | 新一代原生能力 | :has() 选择器（2022）、Container Queries（2023）、Cascade Layers（@layer）、Color Level 4/5（oklch、color-mix）、Nesting（早期草案） | Chrome/Edge/Safari 快速跟进 | 极大减少对预处理器的依赖 |
| 2023–2025 | 语法与功能大跃进 | 原生 Nesting（2023–2024 陆续稳定）、@scope、宽高比 aspect-ratio、text-wrap: balance/pretty、anchor positioning、popover、@starting-style、light-dark() | 2025 年基本全浏览器覆盖 | 开发体验接近 SCSS/Less/Tailwind |
| 2025–2026 当前 | 正在标准化/早期实现 | Scroll-driven Animations、View Transitions（Level 2）、Masonry Layout、text-box、@property 增强、CSS Toggles、if() 函数、@scope 完善 | Chrome/Edge 领先，Safari/Firefox 加速跟进 | 2026 年很多特性已可安全使用 |
重要特性出现的大致顺序（开发视角）
- 1996–2000：字体、颜色、背景、边框、浮动（float）、position（相对/绝对）
- 2000–2010：媒体查询（Media Queries）、伪元素 ::before/::after、rgba、opacity
- 2010–2015：border-radius、box-shadow、linear-gradient、flexbox（早期语法很混乱）、2D/3D transform、transition、animation
- 2015–2020：CSS Variables、Grid Layout、calc() 增强、object-fit、clip-path、滤镜 filter、writing-mode、logical properties
- 2020–2023：aspect-ratio、:is()/:where()、:has()、accent-color、container queries、color-mix、oklch/oklab
- 2023–2026：原生 nesting、@layer、@scope、anchor-positioning、light-dark()、if()/when()、scroll-driven animations、view-transitions、text-box、masonry
当前（2026年）最值得关注的演进方向
- 原生能力追赶预处理器：nesting、@scope、@layer、if()、@property 让很多项目可以逐步抛弃 Sass/Less
- 响应式新范式：container queries + masonry + anchor positioning + view transitions
- 颜色与主题：oklch、color-mix()、light-dark()、system color tokens
- 动画革命：scroll-timeline、@starting-style、individual transform properties
- 组件化友好：@scope、:has()、layer、states (@state)
一句话总结 CSS 近30年演进的核心逻辑：
从「让文字好看一点」→ 「让布局能脱离 table」→ 「让动画不需要 JS」→ 「让响应式不需要媒体查询写死断点」→ 「让 CSS 自己就能写逻辑、作用域、状态」
