CSS 月度速览：Custom Highlight API、text-stroke 修复与导航匹配
CSS-Tricks 的 What's !important 系列每月汇总社区里值得关注的前端与 CSS 动态。第 17 期由 Daniel Schwarz 整理，覆盖 Custom Highlight API、图片自身的溢出、text-stroke 修复、骨架屏样式、对角线滚动、CSS 导航匹配等主题。
如何使用 CSS Custom Highlight API
Sunkanmi Fafowora 演示了 CSS Custom Highlight API 的用法，该 API 目前已获所有主流浏览器支持。虽然名字带"CSS"（样式由 ::highlight() 伪元素函数处理），实际驱动它的是 JavaScript。两种语法配合使用：JavaScript 负责创建范围并注册高亮，CSS 负责把高亮区域渲染成想要的样式。如果你想了解 ::highlight() 与其他高亮伪元素（这类伪元素其实不少）的关系，可以看看作者此前写的相关内容。
图片如何"溢出"自身
Temani Afif 解释了图片如何实现自身的溢出：img 元素像一个容器，而"替换内容"（图片资源）可以从容器中溢出。这也解释了为什么可以用 CSS 替换 src：
img {
content: url(new-image.avif) / "New alt text";
}
或者用 image-set 按分辨率切换：
img {
content: image-set(
url("image.avif") 1x,
url("image-2x.avif") 2x,
url("image-3x.avif") 3x
);
}
如何修复 text-stroke
Tyler Sticka 提醒大家如何用 paint-order 修复 text-stroke。text-stroke 默认居中对齐：一半描边在文字外侧，另一半在内侧，而内侧那半看起来往往很糟。paint-order 属性不会改变对齐方式，但它能确保文字填充色覆盖描边的内侧一半，视觉效果立刻改善。另外，带前缀的 -webkit-text-stroke 目前仍被所有浏览器厂商要求。整体而言 text-stroke 的升级早该来了，希望很快能看到。
只用 CSS 样式化骨架屏
Lea Verou 发起了一个只用 CSS 给骨架屏（skeleton UI）做样式的讨论，社区贡献了不少方案，其中 box-decoration-break: clone 值得一提。不同元素似乎需要不同方案——一个思路是粗 text-decoration 加 color: transparent 加 masks 的组合。作者也提到难点：如何在不改 HTML、不硬编码文字大小或长度的前提下把边缘做成圆角。
其它值得关注的点
- lh 单位的多种用法：Ahmad Shadeed 展示了 lh 单位的一系列用途。1lh 等于计算后的 line-height，可用于按行高对齐的布局场景。
- 对角线滚动：Bramus 解释了新的 scroll-axis-lock 属性如何实现对角线滚动——默认行为只允许一次沿一个轴滚动。
- CSS 导航匹配：Bramus 还介绍了 CSS navigation matching，可以基于用户正在导航到或离开的位置来样式化元素。这个概念相当有想象力，它是在上一期发布后不久推出的。