在特定元素中恢复水平分割线

2024 年 1 月 25 日

作者：Anne van Kesteren & Jon Davis

2023 年 9 月，macOS 上的 Safari 17.0 发布了一个针对 <select> 元素虽小但有趣的改变。你现在可以在 <select> 元素内部放置一个 <hr> 元素（即水平分割线），它将再次绘制一条水平线。之所以说再次，是因为 Safari 十多年前就支持此功能了——稍后将详细讲述这个故事。

水平分割线在选项之间创建视觉分隔，帮助用户快速浏览和比较相似的选项。

Depicts a select menu with Choose paper size label and the following options with visual separators between groups: 5.5 x 8.5 in, 8.5 × 11.0 in, 8.5 × 14.0 in, 11.0 x 17.0 in, A3, A4, A5, A6, Envelope #10, Envelope B5, Envelope C5, Envelope Monarch — 没有分隔符的 Select 元素；有水平分割线分隔符的 Select 元素。

这是一个很小的改动，但最近却引起了关注。只需在 <option> 元素之间添加一个 <hr> 即可插入一条线。

<label for="papersize">Select Paper Size:</label>
<select name="papersize">
    <option>Select a paper size</option>
    <hr>
    <option>5.5 × 8.5 in</option>
    <option>8.5 × 11.0 in</option>
    <option>8.5 × 14.0 in</option>
    <option>11.0 × 17.0 in</option>
    <hr>
    <option>A3</option>
    <option>A4</option>
    <option>A5</option>
    <option>A6</option>
    <hr>
    <option>Envelope #10</option>
    <option>Envelope B5</option>
    <option>Envelope C5</option>
    <option>Envelope Monarch</option>
</select>

选择纸张尺寸

Select 元素中水平分割线元素的互动演示。

那么，为什么这个功能运作多年后又停止了呢？它去哪儿了？

一个 HTML 解析器回归的故事

十多年前，WebKit 采用了新的 HTML 解析器。它基于 HTML5 标准化工作，旨在统一 HTML 语言，因为它在实现中已经出现相当大的分歧。而且它与标准化社区中某些人所宣称的 HTML 是一种 SGML 方言相去甚远。这代表着 HTML 发展的一个巨大里程碑。我们终于走上了一条所有实现都将就任何任意 HTML 字节流所代表的内容达成一致的道路。

替换 WebKit 的 HTML 解析器是一项巨大的工程。它带来了巨大的好处，但它在发布时仍缺少一些东西。事实上，WebKit 的一个功能曾从 HTML 中隐藏起来。你仍然可以通过操作 DOM 或使用 XML 来看到它，但除了少数专家之外，没有人知道。

那个功能就是嵌套在 select 元素中的 hr 元素。它最初由 Apple 的 Adele Peterson 于 2006 年添加，以支持网络上常见的 UI 范式：选择框选项之间的分隔符。我们在对 HTML 解析器进行维护工作时发现了这一点，并认为这仍然是一个理想的功能。我们还重新发现，在 2018 年，有人针对 HTML 标准提出了一个完全相同的功能请求。

在这个阶段再次引入此功能，需要对 HTML 标准的 HTML 解析器部分进行一些细致的更改，以及一些相应的语义和一致性更改。毕竟，我们希望在保持 HTML 解析器互操作性的同时修复此回归。同时，我们还希望确保该功能得到适当的标准化。在 HTML 标准化社区其他成员的帮助下，我们成功地完成了这项更改，现在它已成为多个浏览器的一部分，并且由于改进了跨浏览器测试覆盖率，因此更难再次意外回归。

这就是我们十年来如何失去选择框中分隔符的使用权限，然后又在 Safari 17.0 中完全标准化地将其恢复的故事（提交 263624）。

如果你还在阅读，你可能会想我们对 HTML 解析器还做了哪些其他维护工作。它包括一系列小的修复，使 WebKit 更符合标准。在适当的地方，跨浏览器测试覆盖率也得到了改进。

直接处理紧随 body 结束标签的注释（提交 262222）。
修正 CDATA 处理中的一个小错误（适用于 HTML 中使用的 SVG 和 MathML）（提交 262408）。
完全移除对 command、layer 和 nolayer 元素的支持（提交 262431 & 262553）。
修正 SVG 和 MathML 属性处理（提交 262502）。
添加了对 search 元素的支持（提交 264110）。

关于 select 元素中分隔符的一些注意事项

需要注意的是，此功能添加的是视觉分隔符。它们不会被 VoiceOver 等辅助技术宣布。

同样值得注意的是，HTML 解析器仅支持将 <hr> 作为 <select> 元素的子元素，而不支持作为 <optgroup> 元素的子元素。

最后，当使用 size 属性值大于 1 的 <select> 元素时，分隔符会渲染为空白，类似于为 <optgroup> 元素添加的空间。

反馈

在 <select> 中使用 <hr> 为开发者提供了另一种方式来视觉上分隔选项。现在，开发者可以使用线条，而不是 <optgroup> 渲染的空白空间。

我们很高兴听到你的声音。发送推文给 @webkit 分享你对这个功能的看法。在 Mastodon 上找到我们：@jensimmons@front-end.social 和 @jondavis@mastodon.social。如果你遇到任何问题，欢迎你提交 WebKit bug 报告，反馈此类 WebKit 功能。报告问题会产生巨大的影响。

你还可以下载最新的 Safari Technology Preview，在这些新的网页平台功能出现在 Safari Beta 版之前进行试用。