CSS Overflow Level 5规范中的滚动标记激活状态选择器演进

在CSS Overflow Level 5规范制定过程中，关于如何为活动状态的滚动标记(Scroll Marker)设计伪类选择器引发了一系列深入讨论。这个问题看似简单，实则涉及到CSS选择器语义的精确性和扩展性考量。

问题背景

滚动标记是页面导航元素，用于指示当前滚动视口中"活动"的内容区域。这种活动状态可能通过用户直接点击标记触发，也可能通过滚动行为自动激活。关键在于，这种状态需要持久化——只要浏览器判定某个标记对应的区域处于活动状态，该标记就应保持特殊样式，这与传统的:active或:focus状态有本质区别。

候选方案分析

最初规范采用了:checked伪类，这源于其"选中状态"的语义。然而，:checked传统上与表单控件(复选框、单选按钮等)紧密关联，而滚动标记并非表单元素，这种用法可能导致概念混淆。

随后提出的:current方案借鉴了ARIA的aria-current属性语义，表示"当前项"的概念。虽然语义相近，但存在两个问题：一是CSS中已为WebVTT定义了:current伪类(尽管尚未广泛实现)；二是单独使用时"current"一词含义不够明确。

其他被考虑的方案包括：

• :active：已用于表示用户正在交互的元素
• :target-shown：强调目标可见性，但可能误读为匹配所有可见目标
• :scroll-target：语义重心偏向目标而非标记本身

最终决策：:target-current

经过多轮讨论，工作组最终采纳了:target-current作为活动滚动标记的伪类选择器。这一命名具有以下优势：

1. 语义明确性：通过组合"target"和"current"两个关键词，清晰表达了"当前目标"的核心语义
2. 命名一致性：遵循CSS现有模式(如:focus-within、:focus-visible等)，采用形容词后置的复合命名方式
3. 概念区分：与:target伪类形成关联但保持区分——:target匹配URL片段标识的元素，而:target-current匹配指向活动目标的标记
4. 避免歧义：不同于"shown"或"visible"等可能暗示多个匹配项的词汇，"current"明确表示单一活动项

技术影响

这一决策不仅解决了滚动标记的样式问题，更重要的是为CSS中的"活动项指示"类选择器建立了命名范式。未来类似的用例(如标签页、幻灯片导航等)可参考这一模式，保持CSS选择器语义的一致性和可预测性。

从实现角度看，:target-current需要浏览器维护滚动位置与标记状态的动态关联，当用户滚动或直接交互时，需要实时计算并应用对应的样式规则。这种机制为开发者提供了声明式的状态管理方式，无需依赖JavaScript来实现视觉反馈。

总结

CSS规范的设计往往需要在语义精确性、已有模式一致性和开发者直觉之间寻找平衡。:target-current的选择体现了CSS工作组对这些因素的全面考量，既解决了具体的技术需求，又为未来的类似功能扩展预留了清晰的演进路径。这一决策过程也展示了开放标准制定中多方协作、反复推敲的价值所在。