W3C 那些你不知道的冷知识

作为一个在CSS、HTML等标准上摸爬滚打多年的老兵，今天我想和大家聊聊一些W3C规范里的冷知识。这些东西可能你平时没怎么用过，但一旦掌握，可能会让你的前端开发事半功倍。

1. CSS 的 writing-mode：竖排不是梦

CSS 早就支持竖排了，不需要什么复杂的库或 hack。writing-mode 属性可以让文本从上到下排列，比如：

.vertical-text {
  writing-mode: vertical-rl; /* 从右到左垂直 */
}

想象一下，做一个古风的诗词展示页面，或者优化移动端的竖版阅读体验。这个属性在W3C的CSS Writing Modes规范里定义，支持多种方向：horizontal-tb（默认水平）、vertical-rl（垂直右到左）、vertical-lr（垂直左到右）。浏览器支持度不错，Can I Use 97% 的支持率。

2. HTML 的 <ruby> 标签：标音的秘密武器

在处理中文或日文时，我们有时候需要对汉字进行标音。HTML 标准早就内置了<ruby>标签，让你轻松添加注音或注释：

<ruby>
  汉<rt>hàn</rt>字<rt>zì</rt>
</ruby>

这个标签在教育类应用、字典工具等地方超级有用。它会自动对齐注音文本，避免了手动CSS布局的麻烦。浏览器原生支持，无需额外依赖。

3. :lang() 伪类：精准的语言选择器

国际化项目中，针对不同语言应用不同样式是常事。:lang() 伪类让你基于元素的语言属性精准选择：

:lang(zh-Hans) {
  font-family: 'PingFang SC', 'Noto Sans CJK SC', 'Noto Sans SC', 'Heiti SC', 'DengXian', 'Microsoft YaHei', sans-serif;
}

:lang(zh-Hant) {
  font-family: 'PingFang TC', 'Noto Sans CJK TC', 'Noto Sans TC', 'Heiti TC', 'Microsoft JhengHei', sans-serif;
}

它不只看lang属性，还能匹配语言范围（比如:lang(zh)匹配所有类型的中文），结合CSS变量，可以轻松实现多语言主题切换。

4. CSS 的 orphans 和 widows：避免尴尬的孤行

分页或列布局时，最后一行"孤儿行"（orphans）或第一行"寡妇行"（widows）会让排版看起来不专业。CSS提供了这两个属性来控制：

.article {
  orphans: 3; /* 段落开头至少保留3行 */
  widows: 2;  /* 段落结尾至少保留2行 */
}

这些属性在打印样式或长文档中特别有用，来自 CSS Fragmentation Module。浏览器支持度还不错，Chrome 和 Safari 支持。你可以试试在博客或 PDF 生成器里用用，提高用户体验。

W3C规范不是教科书，而是实用的工具箱。下次遇到问题，别急着找第三方库，先翻翻规范文档，说不定答案就在那里。