HTML&CSS历代版本新特性

# 前言

HTML 诞生于1991年,由 Tim Berners-Lee 创建,是构建 Web 的基石。CSS 诞生于1996年,由 Håkon Wium Lie 提出,负责 Web 页面的样式呈现。

HTML 从最初简单的文档标记语言,发展到今天支持富媒体、语义化的强大标准。CSS 从基础的样式定义,演进为支持复杂布局、动画和响应式设计的完整样式系统。

本文系统梳理了 HTML 和 CSS 各个版本的核心特性和发展历程。对于每个版本,我们会重点介绍那些影响深远的特性和重要的改进。

阅读建议:

标记为粗体的特性通常是该版本最重要的改进
HTML5 和 CSS3 是两个里程碑版本,建议重点关注
代码示例可以帮助你快速理解新特性的用法

# Web 标准发布流程

HTML 和 CSS 标准由 W3C(World Wide Web Consortium)和 WHATWG(Web Hypertext Application Technology Working Group)制定。

# 关键组织

# W3C

国际性标准组织
负责制定 Web 技术规范
包括 HTML、CSS、SVG、WCAG 等标准

# WHATWG

2004 年由 Apple、Mozilla、Opera 等浏览器厂商因不满 W3C 转向 XHTML 而成立。由浏览器厂商主导(Apple、Google、Mozilla、Microsoft)
维护 HTML Living Standard，没有“HTML5”“HTML6”这种固定版本，而是持续更新的单一文档。网址：https://html.spec.whatwg.org/
采用持续更新模式,而非版本号
从 2019 年起，W3C 与 WHATWG 达成协议：WHATWG 负责 HTML 的主要发展，W3C 不再独立发布新版本，而是定期对 WHATWG 的 Living Standard 进行快照并发布为“W3C 推荐标准”（但实际开发以 WHATWG 为准）

# 标准制定流程

# 1. 编辑草案(Editor's Draft)

编辑随时更新的工作文档
最新的想法和提案

# 2. 工作草案(Working Draft)

首次正式发布的草案
征求公众意见

# 3. 候选推荐标准(Candidate Recommendation)

技术设计基本完成
需要实现经验验证

# 4. 提议推荐标准(Proposed Recommendation)

已有充分实现
提交给 W3C 会员审查

# 5. 推荐标准(Recommendation)

正式标准
建议广泛采用

# Living Standard 模式

WHATWG 采用 Living Standard(活标准)模式:

持续更新,没有版本号
功能完成后立即添加到标准
浏览器渐进式实现
更贴近实际开发需求

# HTML 版本演进

# HTML 1.0 (1991-1993)

第一个 HTML 版本,定义了基础的文档结构。

# 核心特性

# 基础标签

最初的18个标签:

<html>
<head>
  <title>我的第一个网页</title>
</head>
<body>
  <h1>标题</h1>
  <p>段落文本</p>
  <a href="page.html">链接</a>
  <ul>
    <li>列表项</li>
  </ul>
</body>
</html>

# 超链接

Web 的核心概念:

<a href="http://example.com">访问示例网站</a>

# HTML 2.0 (1995年11月)

第一个正式的 HTML 标准,由 IETF 发布。

# 核心特性

# 表单

引入交互式表单:

<form action="/submit" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

# 图片支持

<img> 标签:

<img src="photo.jpg" alt="照片描述">

# HTML 3.2 (1997年1月)

W3C 发布的第一个 HTML 标准。

# 核心特性

# 表格

用于数据展示(后被滥用于布局):

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

# 脚本支持

引入 <script> 标签:

<script language="javascript">
  alert('Hello World');
</script>

# 样式支持

引入 <style> 标签和 style 属性:

<style>
  p { color: blue; }
</style>
<p style="font-size: 14px;">文本</p>

# HTML 4.01 (1999年12月)

成熟的 HTML 标准,广泛使用超过10年。

# 核心特性

# 语言国际化

支持多语言和字符集:

<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

# 样式表

推荐使用 CSS 而非样式属性:

<link rel="stylesheet" href="styles.css">

# 框架集

<frameset>(已废弃):

<frameset cols="25%,75%">
  <frame src="menu.html">
  <frame src="content.html">
</frameset>

# 更丰富的表单元素

新增表单控件:

<select name="city">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
</select>
<textarea name="comment" rows="4" cols="50"></textarea>

# 三种文档类型

Strict:严格模式,不包含废弃元素
Transitional:过渡模式,包含废弃元素
Frameset:框架集模式

# XHTML 1.0 (2000年1月)

将 HTML 4.01 重构为 XML 应用。

# 核心特性

# XML 语法严格性

必须符合 XML 规则:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>XHTML 页面</title>
</head>
<body>
  <!-- 所有标签必须小写 -->
  <p>所有标签必须正确闭合</p>
  <br />
  <img src="photo.jpg" alt="图片" />
</body>
</html>

# 严格要求

所有标签必须小写
所有标签必须正确闭合
所有属性值必须用引号
空元素必须自闭合

# HTML5 (2014年10月)

革命性的版本,现代 Web 的基础。

# 核心特性

# 语义化标签

更好的文档结构:

<header>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>文章标题</h1>
    <section>
      <h2>章节标题</h2>
      <p>内容...</p>
    </section>
  </article>
  
  <aside>
    侧边栏
  </aside>
</main>

<footer>
  <p>&copy; 2025 版权所有</p>
</footer>

# 多媒体支持

原生音视频播放:

<!-- 视频 -->
<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持 video 标签
</video>

<!-- 音频 -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持 audio 标签
</audio>

# Canvas 绘图

2D 图形绘制:

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // 绘制矩形
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 100, 50);
  
  // 绘制圆形
  ctx.beginPath();
  ctx.arc(200, 150, 50, 0, 2 * Math.PI);
  ctx.stroke();
</script>

# SVG 支持

可缩放矢量图形:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue" />
  <rect x="150" y="150" width="40" height="40" fill="red" />
</svg>

# 增强的表单

新的输入类型和属性:

<form>
  <!-- 新输入类型 -->
  <input type="email" required placeholder="邮箱">
  <input type="url" placeholder="网址">
  <input type="tel" placeholder="电话">
  <input type="number" min="0" max="100">
  <input type="range" min="0" max="100" value="50">
  <input type="date">
  <input type="time">
  <input type="color">
  <input type="search" placeholder="搜索...">
  
  <!-- 新属性 -->
  <input type="text" pattern="[0-9]{6}" title="请输入6位数字">
  <input type="text" autocomplete="off">
  <input type="file" accept="image/*" multiple>
  
  <button type="submit">提交</button>
</form>

# 本地存储

客户端数据存储:

// localStorage - 持久化存储
localStorage.setItem('username', '张三');
const username = localStorage.getItem('username');

// sessionStorage - 会话存储
sessionStorage.setItem('token', 'abc123');

// IndexedDB - 大数据量存储
const request = indexedDB.open('MyDatabase', 1);

# Web Workers

后台线程运行 JavaScript:

// 主线程
const worker = new Worker('worker.js');
worker.postMessage('开始计算');
worker.onmessage = (e) => {
  console.log('计算结果:', e.data);
};

// worker.js
self.onmessage = (e) => {
  // 执行耗时计算
  const result = complexCalculation();
  self.postMessage(result);
};

# WebSocket

双向通信:

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {
  console.log('连接已建立');
  socket.send('Hello Server');
};

socket.onmessage = (event) => {
  console.log('收到消息:', event.data);
};

# Geolocation API

地理位置获取:

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log('纬度:', position.coords.latitude);
    console.log('经度:', position.coords.longitude);
  },
  (error) => {
    console.error('定位失败:', error);
  }
);

# 拖放 API

原生拖放支持:

<div draggable="true" ondragstart="drag(event)">
  拖动我
</div>
<div ondrop="drop(event)" ondragover="allowDrop(event)">
  放置区域
</div>

<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>

# 简化的 DOCTYPE

更简洁的文档类型声明:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5 页面</title>
</head>
<body>
  内容
</body>
</html>

# 移除的元素

<font> - 使用 CSS 代替
<center> - 使用 CSS 代替
<frame>、<frameset> - 使用 iframe 或现代布局
<big> - 使用 CSS 代替

# HTML 5.1 (2016年11月)

HTML5 的增量更新。

# 主要改进

# `<picture>` 元素

响应式图片:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>

# `<details>` 和 `<summary>`

可折叠内容:

<details>
  <summary>点击展开</summary>
  <p>这是隐藏的内容</p>
</details>

# `<dialog>` 元素

原生对话框:

<dialog id="myDialog">
  <p>这是一个对话框</p>
  <button onclick="document.getElementById('myDialog').close()">关闭</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">打开对话框</button>

# HTML 5.2 (2017年12月)

# 主要改进

# 原生支付请求 API

Payment Request API 标准化:

const request = new PaymentRequest(
  [{
    supportedMethods: 'basic-card'
  }],
  {
    total: {
      label: '总计',
      amount: { currency: 'CNY', value: '99.00' }
    }
  }
);

request.show().then(response => {
  // 处理支付
});

# `<style>` 可用于 `<body>`

之前 <style> 只能在 <head> 中:

<body>
  <style>
    .component { color: red; }
  </style>
  <div class="component">内容</div>
</body>

# HTML 5.3 (2021年1月)

# 主要改进

规范清理和澄清
移除过时特性
与 WHATWG Living Standard 对齐

# HTML Living Standard (持续更新)

WHATWG 维护的活标准,持续演进。

# 近期重要特性

# `<lazy>` 加载

原生懒加载:

<img src="photo.jpg" loading="lazy" alt="懒加载图片">
<iframe src="page.html" loading="lazy"></iframe>

# `<input type="date">` 改进

更好的日期选择器支持。

# `inert` 属性

使元素不可交互:

<div inert>
  <button>无法点击的按钮</button>
</div>

原生弹出层:

<button popovertarget="my-popover">打开弹出层</button>
<div id="my-popover" popover>
  <p>这是弹出层内容</p>
</div>

# CSS 版本演进

# CSS 1 (1996年12月)

第一个 CSS 标准,由 W3C 发布。

# 核心特性

# 基础样式

字体、颜色、间距:

/* 字体和文本 */
p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  color: #333;
  text-align: center;
  text-decoration: underline;
}

/* 盒模型 */
div {
  margin: 10px;
  padding: 20px;
  border: 1px solid black;
  width: 300px;
  height: 200px;
}

/* 背景 */
body {
  background-color: white;
  background-image: url('bg.jpg');
}

# 类和 ID 选择器

.class-name {
  color: red;
}

#id-name {
  color: blue;
}

# 伪类

基础伪类:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

# CSS 2 (1998年5月)

大幅扩展的版本。

# 核心特性

# 定位

绝对和相对定位:

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}

# 浮动

用于布局:

.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

# z-index

层叠顺序控制:

.layer1 {
  position: absolute;
  z-index: 1;
}

.layer2 {
  position: absolute;
  z-index: 2;
}

# 媒体类型

针对不同设备的样式:

@media print {
  body {
    font-size: 12pt;
  }
}

@media screen {
  body {
    font-size: 16px;
  }
}

# 伪元素

p::before {
  content: "前缀 - ";
}

p::after {
  content: " - 后缀";
}

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

p::first-line {
  color: blue;
}

# CSS 2.1 (2011年6月)

修正和澄清 CSS 2。

# 主要改进

修复错误和不一致
移除不广泛支持的特性
更精确的规范描述

# CSS 3 (2011年起,模块化发布)

CSS 3 采用模块化方式发布,每个模块独立演进。

# 核心模块

# 选择器 Level 3

更强大的选择器:

/* 属性选择器 */
input[type="text"] { }
a[href^="https"] { }  /* 以 https 开头 */
a[href$=".pdf"] { }   /* 以 .pdf 结尾 */
a[href*="example"] { } /* 包含 example */

/* 伪类 */
li:first-child { }
li:last-child { }
li:nth-child(2) { }
li:nth-child(odd) { }
li:nth-child(even) { }
li:nth-child(3n+1) { }

p:not(.special) { }
input:disabled { }
input:checked { }
input:focus { }

/* 兄弟选择器 */
h1 + p { } /* 相邻兄弟 */
h1 ~ p { } /* 通用兄弟 */

# 颜色 Level 3

更多颜色表示:

/* RGBA */
div {
  background-color: rgba(255, 0, 0, 0.5);
}

/* HSL */
div {
  color: hsl(120, 100%, 50%);
}

/* HSLA */
div {
  background-color: hsla(240, 100%, 50%, 0.5);
}

/* 新增颜色关键字 */
div {
  color: rebeccapurple;
}

# 边框和背景 Level 3

圆角、阴影、渐变:

/* 圆角 */
.box {
  border-radius: 10px;
  border-top-left-radius: 20px;
}

/* 盒阴影 */
.box {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* 多重背景 */
.multi-bg {
  background-image: 
    url('top.png'),
    url('bottom.png');
  background-position: 
    top left,
    bottom right;
}

/* 背景尺寸 */
.bg {
  background-size: cover;
  background-size: contain;
  background-size: 50% auto;
}

/* 线性渐变 */
.gradient {
  background: linear-gradient(to right, red, blue);
  background: linear-gradient(45deg, red, yellow, blue);
}

/* 径向渐变 */
.radial {
  background: radial-gradient(circle, red, blue);
}

# 文本效果 Level 3

阴影、换行:

/* 文本阴影 */
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 文本溢出 */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 换行控制 */
.break {
  word-wrap: break-word;
  word-break: break-all;
}

# 变换(Transform)

2D 和 3D 变换:

/* 2D 变换 */
.transform {
  transform: translate(50px, 100px);
  transform: rotate(45deg);
  transform: scale(1.5);
  transform: skew(10deg, 20deg);
  
  /* 组合变换 */
  transform: translate(50px, 100px) rotate(45deg) scale(1.2);
}

/* 3D 变换 */
.transform-3d {
  transform: rotateX(45deg);
  transform: rotateY(45deg);
  transform: rotateZ(45deg);
  transform: perspective(500px) rotateY(45deg);
}

/* 变换原点 */
.origin {
  transform-origin: top left;
  transform-origin: 50% 50%;
}

# 过渡(Transition)

平滑过渡效果:

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: red;
}

/* 多个属性过渡 */
.box {
  transition: 
    width 0.3s ease,
    height 0.3s ease,
    background-color 0.5s linear;
}

/* 所有属性过渡 */
.all {
  transition: all 0.3s ease;
}

# 动画(Animation)

关键帧动画:

@keyframes slide {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

.animated {
  animation: slide 2s ease-in-out infinite;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

/* 简写 */
.animated-short {
  animation: slide 2s ease-in-out 1s infinite alternate forwards;
}

# 弹性盒子(Flexbox)

一维布局系统:

.container {
  display: flex;
  
  /* 主轴方向 */
  flex-direction: row;        /* 水平 */
  flex-direction: column;     /* 垂直 */
  
  /* 换行 */
  flex-wrap: wrap;
  
  /* 主轴对齐 */
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  
  /* 交叉轴对齐 */
  align-items: center;
  align-items: flex-start;
  align-items: flex-end;
  align-items: stretch;
  
  /* 多行对齐 */
  align-content: center;
  
  /* 间距 */
  gap: 10px;
  row-gap: 10px;
  column-gap: 10px;
}

.item {
  /* 伸缩 */
  flex: 1;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
  
  /* 单独对齐 */
  align-self: center;
  
  /* 顺序 */
  order: 2;
}

# 网格布局(Grid)

二维布局系统:

.grid-container {
  display: grid;
  
  /* 定义列 */
  grid-template-columns: 200px 1fr 2fr;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  
  /* 定义行 */
  grid-template-rows: 100px auto 100px;
  
  /* 间距 */
  gap: 20px;
  row-gap: 10px;
  column-gap: 15px;
  
  /* 对齐 */
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.grid-item {
  /* 跨列 */
  grid-column: 1 / 3;
  grid-column: span 2;
  
  /* 跨行 */
  grid-row: 1 / 3;
  grid-row: span 2;
  
  /* 区域 */
  grid-area: header;
}

/* 命名区域 */
.grid-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

# 媒体查询 Level 3

响应式设计:

/* 宽度查询 */
@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}

@media (max-width: 767px) {
  .menu {
    display: none;
  }
}

/* 高度查询 */
@media (min-height: 600px) {
  .sidebar {
    height: 100vh;
  }
}

/* 方向查询 */
@media (orientation: landscape) {
  .image {
    width: 100%;
  }
}

/* 分辨率查询 */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
  }
}

/* 组合查询 */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    width: 90%;
  }
}

# 多列布局

报纸式多列:

.columns {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
  column-width: 200px;
}

.no-break {
  break-inside: avoid;
}

# 自定义属性(CSS 变量)

可复用的变量:

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --spacing: 16px;
  --font-size: 14px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
  font-size: var(--font-size);
}

/* 带默认值 */
.text {
  color: var(--text-color, #333);
}

/* 响应式变量 */
@media (min-width: 768px) {
  :root {
    --font-size: 16px;
  }
}

# CSS Level 4 模块(2018年起,持续演进)

CSS 没有统一的 "CSS 4" 版本,而是各模块独立升级到 Level 4。以下是主要 Level 4 模块的核心特性。

# 重要 Level 4 模块概览

模块名称	状态	浏览器支持	重要性
Selectors Level 4	WD	`:is()`、`:where()` 已支持,`:has()` 2023年全面支持	⭐⭐⭐⭐⭐
Color Level 4	CR	`oklch()`、`lab()` 2023年起支持	⭐⭐⭐⭐
Cascade Level 4	CR	`@layer` 2022年起全面支持	⭐⭐⭐⭐
Media Queries Level 4	CR	范围查询 2023年起支持	⭐⭐⭐
Text Level 4	WD	部分特性支持	⭐⭐⭐
Values Level 4	WD	`clamp()`、`min()`、`max()` 已支持	⭐⭐⭐⭐⭐

状态说明: WD(工作草案)、CR(候选推荐标准)、REC(正式推荐标准)

# 选择器 Level 4 (Working Draft,2022)

# 逻辑组合伪类

简化选择器编写:

/* :is() - 匹配任一选择器 */
:is(h1, h2, h3, h4, h5, h6) {
  color: blue;
  margin-block: 1em;
}

/* 等价于传统写法 */
h1, h2, h3, h4, h5, h6 {
  color: blue;
  margin-block: 1em;
}

/* :is() 的强大之处 - 避免重复 */
:is(.dark-theme, .high-contrast) :is(button, a) {
  border: 2px solid currentColor;
}

/* :where() - 零特异性版本的 :is() */
/* 可以轻松被覆盖,适合做基础样式 */
:where(ul, ol) :where(ul, ol) {
  padding-left: 1.5em;
}

/* 以下样式可以轻松覆盖上面的样式 */
.custom-list ul {
  padding-left: 2em;
}

# 关系伪类

:has() - CSS 的"父选择器"(2023年全面支持):

/* 包含图片的文章使用网格布局 */
article:has(> img) {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

/* 包含错误的表单样式 */
form:has(.error) {
  border: 2px solid red;
}

/* 选择没有子元素的 div */
div:not(:has(*)) {
  display: none;
}

/* 选择紧跟着标题的段落 */
h2:has(+ p) {
  margin-bottom: 0.5em;
}

# 增强的伪类

/* :not() 现在支持选择器列表 */
button:not(.primary, .secondary, .danger) {
  background: gray;
}

/* 过滤的 :nth-child() */
:nth-child(odd of .visible) {
  background: #f0f0f0;
}

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

/* :focus-within - 内部有焦点时的样式 */
form:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

# 用户交互伪类

/* 表单状态 */
input:user-valid {
  border-color: green;
}

input:user-invalid {
  border-color: red;
}

input:placeholder-shown {
  font-style: italic;
}

input:autofill {
  background-color: #e8f0fe;
}

/* 媒体元素状态 */
video:playing {
  border: 2px solid green;
}

video:paused {
  opacity: 0.7;
}

# 颜色 Level 4 (Candidate Recommendation,2022)

# 新颜色空间

更精确、感知均匀的颜色:

/* oklch() - 推荐使用,感知均匀的颜色空间 */
:root {
  --primary: oklch(60% 0.15 250);  /* 蓝色 */
  --success: oklch(70% 0.15 140);  /* 绿色 */
  --danger: oklch(55% 0.20 25);    /* 红色 */
}

.button {
  background: var(--primary);
  /* oklch 的优势:调整亮度不会改变色相 */
  &:hover {
    background: oklch(from var(--primary) calc(l + 0.1) c h);
  }
}

/* lab() - 实验室色彩空间 */
.color-lab {
  color: lab(50% 40 59.5);
}

/* lch() - 柱面坐标的 lab */
.color-lch {
  color: lch(50% 70 240);
}

/* color() - 支持不同色彩空间 */
.wide-gamut {
  color: color(display-p3 1 0.5 0);  /* Display P3 色域 */
}

# 相对颜色语法

基于现有颜色创建新颜色:

:root {
  --brand-color: oklch(60% 0.15 250);
}

.variations {
  /* 调亮 10% */
  --lighter: oklch(from var(--brand-color) calc(l + 0.1) c h);
  
  /* 调暗 10% */
  --darker: oklch(from var(--brand-color) calc(l - 0.1) c h);
  
  /* 降低饱和度 */
  --muted: oklch(from var(--brand-color) l calc(c * 0.5) h);
  
  /* 半透明 */
  --transparent: oklch(from var(--brand-color) l c h / 0.5);
}

# 层叠与继承 Level 4 (Cascade Layers)

# @layer - 控制样式优先级

解决 CSS 优先级管理难题:

/* 声明层的顺序(后声明的优先级更高) */
@layer reset, base, theme, components, utilities;

/* reset 层 - 最低优先级 */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

/* base 层 - 基础样式 */
@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    color: #333;
  }
  
  a {
    color: blue;
    text-decoration: none;
  }
}

/* theme 层 - 主题样式 */
@layer theme {
  :root {
    --primary-color: #007bff;
    --spacing: 1rem;
  }
}

/* components 层 - 组件样式 */
@layer components {
  .button {
    padding: var(--spacing);
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
  }
}

/* utilities 层 - 工具类,最高优先级 */
@layer utilities {
  .mt-1 { margin-top: 0.25rem; }
  .mt-2 { margin-top: 0.5rem; }
  .text-center { text-align: center; }
}

/* 未分层的样式优先级高于所有层 */
.override {
  color: red !important;
}

# 嵌套层

@layer framework {
  @layer reset {
    * { margin: 0; }
  }
  
  @layer components {
    .button { padding: 10px; }
  }
}

# 媒体查询 Level 4

# 范围查询

更简洁的语法:

/* 传统写法 */
@media (min-width: 768px) and (max-width: 1024px) {
  .container { width: 90%; }
}

/* Level 4 范围语法(2023年起支持) */
@media (768px <= width <= 1024px) {
  .container { width: 90%; }
}

@media (width >= 768px) {
  .container { max-width: 1200px; }
}

# 新媒体特性

/* 用户偏好 */
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: white; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

@media (prefers-contrast: high) {
  .button { border: 2px solid currentColor; }
}

/* 显示模式 */
@media (display-mode: standalone) {
  /* PWA 全屏模式 */
  .app-header { padding-top: env(safe-area-inset-top); }
}

# 值与单位 Level 4

# 数学函数

已广泛支持:

.responsive {
  /* clamp() - 响应式字体大小的最佳实践 */
  font-size: clamp(1rem, 2.5vw, 2rem);
  
  /* min() */
  width: min(100%, 1200px);
  
  /* max() */
  padding: max(1rem, 3%);
  
  /* calc() 增强 */
  margin: calc(1rem + 2vw);
}

# 其他已实现的 Level 4 特性

# 容器查询 (Container Queries,2022年起)

基于父容器的响应式设计:

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

/* 基于容器宽度查询 */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

@container sidebar (min-width: 300px) {
  .widget {
    font-size: 1.2em;
  }
}

/* 容器查询单位 */
.card-title {
  font-size: clamp(1rem, 5cqi, 2rem);  /* cqi = container query inline */
}

# 逻辑属性 (Logical Properties)

支持不同书写方向:

.box {
  /* 逻辑内边距(自动适应 LTR/RTL) */
  padding-inline-start: 20px;  /* 起始边 */
  padding-inline-end: 20px;    /* 结束边 */
  padding-block-start: 10px;   /* 块开始 */
  padding-block-end: 10px;     /* 块结束 */
  
  /* 简写 */
  padding-inline: 20px;
  padding-block: 10px;
  
  /* 逻辑边框 */
  border-inline-start: 2px solid black;
  
  /* 逻辑尺寸 */
  inline-size: 100%;   /* 相当于 width(LTR) 或 height(竖排) */
  block-size: 200px;   /* 相当于 height(LTR) 或 width(竖排) */
}

# Subgrid (2023年起全面支持)

网格嵌套对齐:

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

.grid-item {
  display: grid;
  /* 继承父网格的列定义 */
  grid-template-columns: subgrid;
  grid-column: span 2;
}

# accent-color

自定义表单控件主题色:

:root {
  accent-color: #007bff;
}

/* 影响 checkbox、radio、range 等 */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--primary-color);
}

# aspect-ratio

宽高比控制:

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.square {
  aspect-ratio: 1;
}

.thumbnail {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

# gap 用于 Flexbox (2021年起全面支持)

.flex-container {
  display: flex;
  gap: 20px;
  row-gap: 10px;
  column-gap: 15px;
}

# CSS 其他实用特性

# 已广泛支持的现代特性

# `inset` - 定位简写

简化定位代码:

.absolute {
  position: absolute;
  inset: 0; /* 等价于 top:0; right:0; bottom:0; left:0 */
  inset: 10px 20px; /* 等价于 top:10px; bottom:10px; left:20px; right:20px */
}

# `backdrop-filter` - 背景模糊

毛玻璃效果:

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(180%);
}

.modal-backdrop {
  backdrop-filter: brightness(0.5);
}

# 滚动捕捉 (Scroll Snap)

轮播图、全屏滚动:

.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

.scroll-item {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

# `overscroll-behavior` - 滚动边界

防止滚动穿透:

.modal {
  overscroll-behavior: contain;  /* 阻止滚动链 */
}

body {
  overscroll-behavior-y: none;  /* 禁用下拉刷新 */
}

# `@supports` - 特性检测

渐进增强:

@supports (display: grid) {
  .container {
    display: grid;
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
  }
}

/* 检测多个特性 */
@supports (display: grid) and (gap: 1rem) {
  .modern-grid {
    display: grid;
    gap: 1rem;
  }
}

# CSS 模块化学习策略

从 CSS3 开始,CSS 采用模块化演进,每个模块独立发展。面对众多模块,建议按以下优先级学习:

# 核心必学(⭐⭐⭐⭐⭐)

布局系统:Flexbox、Grid、Container Queries
选择器增强::is()、:where()、:has()
值与单位:clamp()、min()、max()、CSS 变量
响应式设计:媒体查询、容器查询

# 重要推荐(⭐⭐⭐⭐)

颜色系统:oklch()、相对颜色语法
层叠管理:@layer
视觉效果:变换、过渡、动画
逻辑属性:支持多语言和书写方向

# 进阶选学(⭐⭐⭐)

文本排版:Text Level 4、多列布局
表单增强:accent-color、新伪类
性能优化:content-visibility、contain
实用工具:aspect-ratio、inset、gap

学习原则:

关注已在主流浏览器实现的特性
优先学习解决实际问题的模块
通过 Can I Use (opens new window) 查看浏览器支持情况
使用 @supports 做渐进增强

# 总结

HTML 和 CSS 的演进历程:

# HTML 重要里程碑

HTML 1.0（1991）:Web 的起点,基础标签
HTML 4.01（1999）:成熟稳定,广泛使用
XHTML 1.0（2000）:XML 化尝试
HTML5（2014）:革命性升级,现代 Web 基础
Living Standard（持续）:持续演进的活标准

# CSS 重要里程碑

CSS 1（1996）:样式与内容分离
CSS 2（1998）:定位和布局
CSS 3（2011起）:模块化,Flexbox、Grid、动画
Level 4 模块（2018起）::has()、容器查询、层叠层、oklch() 等现代特性

# 参考资料

祝你变得更强!

编辑

#HTML版本新特性 #CSS版本新特性 #Web标准

上次更新: 2025/11/07

← DOM操作与浏览器模型

HTML&CSS历代版本新特性

# 前言

# Web 标准发布流程

# 关键组织

# W3C

# WHATWG

# 标准制定流程

# 1. 编辑草案(Editor's Draft)

# 2. 工作草案(Working Draft)

# 3. 候选推荐标准(Candidate Recommendation)

# 4. 提议推荐标准(Proposed Recommendation)

# 5. 推荐标准(Recommendation)

# Living Standard 模式

# HTML 版本演进

# HTML 1.0 (1991-1993)

# 核心特性

# 基础标签

# 超链接

# HTML 2.0 (1995年11月)

# 核心特性

# 表单

# 图片支持

# HTML 3.2 (1997年1月)

# 核心特性

# 表格

# 脚本支持

# 样式支持

# HTML 4.01 (1999年12月)

# 核心特性

# 语言国际化

# 样式表

# 框架集

# 更丰富的表单元素

# 三种文档类型

# XHTML 1.0 (2000年1月)

# 核心特性

# XML 语法严格性

# 严格要求

# HTML5 (2014年10月)

# 核心特性

# 语义化标签

# 多媒体支持

# Canvas 绘图

# SVG 支持

# 增强的表单

# 本地存储

# Web Workers

# WebSocket

# Geolocation API

# 拖放 API

# 简化的 DOCTYPE

# 移除的元素

# HTML 5.1 (2016年11月)

# 主要改进

# <picture> 元素

# <details> 和 <summary>

# <dialog> 元素

# HTML 5.2 (2017年12月)

# 主要改进

# 原生支付请求 API

# <style> 可用于 <body>

# HTML 5.3 (2021年1月)

# 主要改进

# HTML Living Standard (持续更新)

# 近期重要特性

# <lazy> 加载

# <input type="date"> 改进

# inert 属性

# Popover API

# CSS 版本演进

# CSS 1 (1996年12月)

# 核心特性

# 基础样式

# 类和 ID 选择器

# 伪类

# CSS 2 (1998年5月)

# 核心特性

# 定位

# 浮动

# z-index

# `<picture>` 元素

# `<details>` 和 `<summary>`

# `<dialog>` 元素

# `<style>` 可用于 `<body>`

# `<lazy>` 加载

# `<input type="date">` 改进

# `inert` 属性

# `inset` - 定位简写

# `backdrop-filter` - 背景模糊

# `overscroll-behavior` - 滚动边界

# `@supports` - 特性检测