CSS 发展史
03-css2026/11/14
前 CSS 时代：Web 的“蛮荒时期”（1994 年之前）
- 特点：HTML 承担了所有内容、结构和表现的任务。
- 方法：使用
<font>、<center>、<b>等标签定义样式，使用bgcolor、align等属性。 - 问题：
- 内容与表现严重耦合：修改样式需要逐个修改标签，维护是噩梦。
- 代码冗余：相同的样式需要在多个地方重复定义。
- 功能极其有限：无法实现复杂布局（如多栏、精确定位）。
1996：CSS1 正式发布（W3C 推荐标准）
1994 年：哈肯·维姆·莱(Håkon Wium Lie)提出了 CSS 的最初想法。他的目标是解决 HTML 在表现力上的不足，将内容与样式分离。
1996 年 12 月：W3C 发布了 CSS 1.0 规范。这是一个里程碑。
- 核心特性：字体、颜色、背景、文本属性（对齐、装饰）、外边距、边框、内边距等。
- 局限：没有定位机制，布局能力仍然很弱。
1998：CSS2 发布
1998 年 5 月：W3C 发布了 CSS 2.0 规范。
意义：CSS 2.0 为复杂网页布局奠定了基础，催生了“DIV+CSS”的布局时代，彻底告别了表格布局。
- 定位模型：引入了 position: absolute/relative/fixed，实现了元素在页面上的精确定位。
- 媒体类型：为不同的输出设备（如屏幕、打印机）指定样式。
- 盒模型：明确定义了内容、内边距、边框、外边距之间的关系。
- z-index：引入了层叠上下文的概念。
2004：CSS 2.1（最重要的经典版本）
背景：CSS 2.0 过于宏大，部分特性不清晰，浏览器实现不一致，导致严重的兼容性问题。
CSS 2.1：发布于 2004 年作为草案，2011 年才成为正式推荐标准。它是对 CSS 2.0 的修正和子集，删除了浏览器未实现或实现不一致的特性，成为了 Web 开发的“事实标准”。
这个时期的痛点：
- 浏览器战争：IE 6/7/8 与 Firefox、Chrome 早期版本存在巨大差异。
- Hack 与技巧：开发者需要大量使用“CSS Hack”和“滤镜”来让页面在不同浏览器中表现一致（如 *html、_height、!important 技巧等）。
- 布局难题：实现等高栏、垂直居中、多栏流体布局非常困难，催生了大量的“奇技淫巧”。
2005–2010：CSS3 分模块化（现代 CSS 的起点）
CSS3 不是一次性的“版本”，而是：
- 将 CSS 分成“模块（module）”
- 每个模块独立制定、发布和升级
比如：
- 选择器模块（Selectors Level 3）
- 背景和边框（Backgrounds and Borders）
- 动画（Animations）
- 转换（Transforms）
- 弹性布局（Flexbox）
- 网格布局（Grid）
这个阶段是 CSS 现代化的转折点。
2009–2014：现代布局兴起（Flexbox、Grid）
2009：Flexbox 最初版本
提供了：
- 弹性子项
- 水平/垂直居中变得容易
- 自适应排版
2012–2015 年逐步标准化。
2011：CSS Grid 提案
2017 年正式成为标准。
开启真正意义上的网页二维布局。
2015–现在：CSS 的现代功能爆发
这段时期 CSS 的发展速度极快，新特性大量出现。
版式布局（Layout）
- Flexbox（单轴）
- Grid（双轴）
- Multi-column（多栏布局）
- Writing Modes（竖排/横排）