CSS 发展 - 前端知识体系

CSS1 1996 年 12 月

首个标准

核心特性

字体属性（font-family, font-size, font-style, font-weight）
文本属性（color, text-align, text-decoration, line-height）
颜色和背景（color, background-color, background-image）
盒模型基础（margin, border, padding, width, height）
类选择器和 ID 选择器
伪类（:link, :visited, :active, :hover, :first-child）

解决的问题

❌ HTML 标签既负责结构又负责样式，代码混乱难以维护

✅ 首次实现内容与样式分离，引入外部样式表概念

body {
  font-family: Arial, sans-serif;
  color: #333;
  margin: 20px;
}

CSS2 1998 年 5 月

重大更新

核心特性

定位（position）：static, relative, absolute, fixed
z-index 层叠控制
媒体类型（media types）：screen, print, projection
双向文本支持
改进的选择器（子选择器、相邻兄弟选择器、属性选择器）
overflow 属性
cursor 属性

解决的问题

❌ 无法精确控制元素位置，无法实现复杂布局

✅ 引入定位机制，支持精确的元素定位和层叠控制

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
}

CSS2.1 2011 年 6 月

修订版本

主要改进

修复 CSS2 中的错误和歧义
移除浏览器支持差的功能
明确盒模型计算规则
改进浮动和清除机制
定义 :hover 适用于所有元素（不仅限于链接）
添加 content 和 counter 相关属性

解决的问题

❌ CSS2 规范存在歧义，浏览器实现不一致

✅ 澄清规范细节，提高浏览器兼容性

CSS3 2010 年起陆续发布

模块化时代

CSS3 不再是一个单一规范，而是拆分为多个独立模块，每个模块有自己的版本号和发布节奏。以下是主要 CSS3 模块：

📐 选择器模块（Selectors Level 3）

属性选择器、伪类、伪元素增强

📦 盒模型模块

border-radius, box-shadow, border-image

🎨 背景和边框模块

多背景、渐变、背景尺寸控制

📝 文本和字体模块

@font-face, text-shadow, word-wrap

🔄 2D/3D 变换模块

transform, transform-origin, perspective

🎬 过渡和动画模块

transition, animation, keyframes

📱 弹性盒子模块（Flexbox）

一维布局，自适应排列

⬛ 网格布局模块（Grid）

二维布局系统

📺 媒体查询模块

响应式设计基础

🎭 多列布局模块

报纸式分列布局

选择器 Level 3 2011 年

模块

新增选择器

属性选择器：[attr^=value], [attr$=value], [attr*=value]
伪类：:nth-child(), :nth-last-child(), :first-of-type, :last-of-type
伪类：:only-child, :only-of-type, :empty, :target
伪类：:enabled, :disabled, :checked, :not()
伪元素：::before, ::after, ::first-line, ::first-letter
通用兄弟选择器：~

/* 选择所有以 https 开头的链接 */
a[href^="https"] { color: green; }

/* 选择第 3n+1 个子元素 */
li:nth-child(3n+1) { background: #f0f0f0; }

/* 选择未选中的复选框 */
input[type="checkbox"]:not(:checked) { opacity: 0.5; }

盒模型增强 2011-2013 年

模块

新增属性

border-radius：圆角边框
box-shadow：盒阴影
border-image：图像边框
box-sizing：盒模型计算方式
outline-offset：轮廓偏移

解决的问题

❌ 实现圆角、阴影需要图片或复杂 hack

✅ 原生支持圆角和阴影，简化设计实现

.card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  box-sizing: border-box; /* 包含 padding 和 border */
}

背景和渐变 2012 年

模块

新增特性

多背景：background-image 支持多个图像
background-size：控制背景尺寸（cover, contain）
background-origin：背景定位区域
background-clip：背景裁剪区域
linear-gradient()：线性渐变
radial-gradient()：径向渐变
repeating-gradient()：重复渐变

.hero {
  /* 多背景 */
  background-image: url(overlay.png), url(hero.jpg);
  background-size: cover, 100% auto;
  
  /* 渐变背景 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

文本和字体 2012-2013 年

模块

新增特性

@font-face：自定义 Web 字体
text-shadow：文本阴影
text-overflow：文本溢出处理（ellipsis）
word-wrap / overflow-wrap：长单词换行
word-break：单词断行规则
white-space：空白处理方式

解决的问题

❌ 只能使用用户系统安装的字体

✅ @font-face 允许加载自定义字体，丰富设计选择

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}

body {
  font-family: 'MyFont', sans-serif;
}

.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

2D/3D 变换 2012 年

模块

新增特性

transform：2D/3D 变换
translateX/Y/Z, scaleX/Y/Z, rotate, rotateX/Y/Z
skewX/Y, matrix, matrix3d
transform-origin：变换原点
perspective：透视效果
transform-style: preserve-3d：3D 空间
backface-visibility：背面可见性

.card {
  transform: rotateY(180deg);
  transform-origin: center;
  transition: transform 0.6s;
}

.scene {
  perspective: 1000px;
}

过渡和动画 2012-2013 年

模块

新增特性

transition：属性过渡
transition-property, transition-duration
transition-timing-function, transition-delay
animation：关键帧动画
@keyframes：定义动画关键帧
animation-name, animation-duration, animation-delay
animation-iteration-count, animation-direction
animation-fill-mode, animation-play-state

解决的问题

❌ 实现动画需要 JavaScript 或 Flash

✅ 纯 CSS 实现平滑过渡和复杂动画

/* 过渡 */
.btn {
  transition: all 0.3s ease;
}
.btn:hover {
  transform: scale(1.05);
}

/* 动画 */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.modal {
  animation: slideIn 0.3s ease-out;
}

媒体查询 2012 年

模块

新增特性

@media：条件应用样式
width / min-width / max-width
height / min-height / max-height
orientation (portrait/landscape)
resolution (DPI/DPPX)
prefers-color-scheme (light/dark)
prefers-reduced-motion

解决的问题

❌ 无法针对不同设备提供不同样式

✅ 响应式设计成为可能，一套代码适配多端

/* 移动端优先 */
.container {
  padding: 16px;
}

/* 平板 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #fff;
  }
}

弹性盒子 (Flexbox) 2012-2018 年

布局革命

容器属性

display: flex / inline-flex
flex-direction: row / column
flex-wrap: nowrap / wrap
justify-content: flex-start / center / space-between
align-items: stretch / center / flex-end
align-content, gap

项目属性

flex: grow shrink basis
order, align-self

解决的问题

❌ 传统布局（浮动、定位）复杂且脆弱

✅ 一维布局变得简单，自动分配空间，轻松对齐

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.nav-item {
  flex: 1;
}

网格布局 (Grid) 2017 年

布局革命

容器属性

display: grid / inline-grid
grid-template-columns / grid-template-rows
grid-template-areas
gap / grid-column-gap / grid-row-gap
justify-items / align-items
justify-content / align-content
grid-auto-columns / grid-auto-rows
grid-auto-flow

项目属性

grid-column / grid-row
grid-area
justify-self / align-self

解决的问题

❌ 复杂二维布局需要嵌套多个容器或使用框架

✅ 原生二维布局系统，行列控制精确灵活

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.header {
  grid-column: 1 / -1;
}

多列布局 2013 年

模块

新增属性

column-count：列数
column-width：列宽
column-gap：列间距
column-rule：列分隔线
column-span：元素跨列
column-fill：列填充方式

.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid #ccc;
}

.title {
  column-span: all;
}

CSS4+ 2015 年至今

持续演进

CSS4 不是一个正式版本，而是指 CSS3 之后新增的模块和功能。以下是近年来引入的重要特性：

🎯 选择器 Level 4

:is(), :where(), :has(), :focus-visible

🎨 颜色 Level 4/5

oklch(), lab(), color-mix()

📐 容器查询

@container, container-type

📦 层叠层

@layer, 层优先级控制

🔧 逻辑属性

margin-inline, padding-block

📝 滚动控制

scroll-behavior, scroll-snap

🎭 滤镜和混合

filter, backdrop-filter, mix-blend-mode

📱 视口单位

dvh, dvw, svh, svw, lvh, lvw

选择器 Level 4 2018 年起

模块

新增选择器

:is()：匹配选择器列表中任意一个
:where()：类似:is()，但优先级为 0
:has()：父级选择器（关系选择器）
:focus-visible：键盘聚焦时显示轮廓
:focus-within：元素或其后代获得焦点
:not()增强：支持多个参数
::backdrop：对话框背景

解决的问题

❌ 无法根据子元素选择父元素

✅ :has() 实现"父级选择器"功能

/* 简化重复选择器 */
:is(h1, h2, h3, h4, h5, h6) {
  color: #333;
}

/* 低优先级重置 */
:where(*) {
  margin: 0;
  padding: 0;
}

/* 父级选择器 */
.card:has(img) {
  border: none;
}

/* 仅键盘聚焦时显示轮廓 */
a:focus-visible {
  outline: 2px solid blue;
}

颜色 Level 4/5 2020 年起

模块

新增颜色空间

oklch()：感知均匀的颜色空间
lab()：CIE Lab 颜色空间
lch()：CIE Lch 颜色空间
color-mix()：颜色混合
oklab()：OKLab 颜色空间
hwb()：色相 - 白度 - 黑度

解决的问题

❌ RGB/HSL 颜色调整不直观，难以生成协调色

✅ 感知均匀的颜色空间，调整更直观

/* OKLCH - 调整亮度保持色相 */
.button {
  background: oklch(60% 0.2 250);
}
.button:hover {
  background: oklch(70% 0.2 250);
}

/* 颜色混合 */
.overlay {
  background: color-mix(in srgb, blue 50%, transparent);
}

/* HWB - 更容易生成柔和颜色 */
.soft {
  background: hwb(200 40% 20%);
}

容器查询 2023 年

新范式

新增特性

container-type：定义容器查询类型
container-name：命名容器
@container：容器查询条件
支持 size, style, state 查询

解决的问题

❌ 媒体查询基于视口，组件无法根据自身尺寸调整

✅ 组件响应容器尺寸，真正可复用的响应式组件

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 200px;
  }
}

@container (max-width: 300px) {
  .title {
    font-size: 1rem;
  }
}

层叠层 (Cascade Layers) 2022 年

模块

新增特性

@layer：定义层叠层
层优先级控制
匿名层和命名层
层嵌套

解决的问题

❌ 样式冲突难以解决，!important 滥用

✅ 显式定义层优先级，减少特异性竞争

/* 定义层优先级 */
@layer reset, base, components, utilities;

/* 重置层 - 最低优先级 */
@layer reset {
  * { margin: 0; }
}

/* 基础层 */
@layer base {
  body { font-family: system-ui; }
}

/* 组件层 */
@layer components {
  .btn { padding: 8px 16px; }
}

/* 工具层 - 最高优先级 */
@layer utilities {
  .hidden { display: none; }
}

逻辑属性 2020 年起

模块

新增属性

margin-inline / margin-inline-start / margin-inline-end
margin-block / margin-block-start / margin-block-end
padding-inline / padding-block
border-inline / border-block
inset / inset-inline / inset-block
inline-size / block-size

解决的问题

❌ 多语言（RTL/LTR）支持困难

✅ 逻辑属性自动适应书写方向

/* 替代 margin-left / margin-right */
.card {
  margin-inline: 16px;
}

/* 替代 padding-top / padding-bottom */
.section {
  padding-block: 24px;
}

/* 替代 width / height */
.box {
  inline-size: 100%;
  block-size: 200px;
}

滚动控制 2020 年起

模块

新增属性

scroll-behavior：平滑滚动
scroll-snap-type：滚动捕捉
scroll-snap-align：捕捉对齐
scroll-padding：滚动内边距
overscroll-behavior：越界行为
scrollbar-width / color：滚动条样式

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 滚动捕捉 */
.gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
}

.gallery-item {
  scroll-snap-align: center;
}

/* 自定义滚动条 */
.scrollbox {
  scrollbar-width: thin;
  scrollbar-color: #666 #f0f0f0;
}

滤镜和混合 2018 年起

模块

新增属性

filter：图形滤镜
blur(), brightness(), contrast(), grayscale()
hue-rotate(), invert(), opacity(), saturate()
backdrop-filter：背景滤镜
mix-blend-mode：混合模式
background-blend-mode：背景混合

/* 毛玻璃效果 */
.modal {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.5);
}

/* 图片滤镜 */
.image:hover {
  filter: brightness(1.1) contrast(1.05);
}

/* 混合模式 */
.overlay {
  mix-blend-mode: multiply;
}

视口单位 2023 年

模块

新增单位

dvh / dvw：动态视口（考虑 UI 栏）
svh / svw：小视口（UI 栏展开）
lvh / lvw：大视口（UI 栏收起）

解决的问题

❌ 移动端浏览器地址栏导致 100vh 计算不准确

✅ 动态视口单位自动适应 UI 栏变化

/* 传统方式 - 移动端有问题 */
.fullscreen {
  height: 100vh; /* 地址栏影响 */
}

/* 新方式 - 动态适应 */
.fullscreen {
  height: 100dvh; /* 动态视口高度 */
}

/* 确保最小高度 */
.content {
  min-height: 100svh;
}

核心特性

解决的问题

核心特性

解决的问题

主要改进

解决的问题

📐 选择器模块（Selectors Level 3）

📦 盒模型模块

🎨 背景和边框模块

📝 文本和字体模块

🔄 2D/3D 变换模块

🎬 过渡和动画模块

📱 弹性盒子模块（Flexbox）

⬛ 网格布局模块（Grid）

📺 媒体查询模块

🎭 多列布局模块

新增选择器

新增属性

解决的问题

新增特性

新增特性

解决的问题

新增特性

新增特性

解决的问题

新增特性

解决的问题

容器属性

项目属性

解决的问题

容器属性

项目属性

解决的问题

新增属性

🎯 选择器 Level 4

🎨 颜色 Level 4/5

📐 容器查询

📦 层叠层

🔧 逻辑属性

📝 滚动控制

🎭 滤镜和混合

📱 视口单位

新增选择器

解决的问题

新增颜色空间

解决的问题

新增特性

解决的问题

新增特性

解决的问题

新增属性

解决的问题

新增属性

新增属性

新增单位

解决的问题

📊 CSS 演进总结

27+

80+

500+

100%