这三个CSS新特性，现在可以直接用了
2026年3月，三个CSS特性在所有主流浏览器里正式达标了。说实话我翻浏览器更新日志的时候才发现，这几个功能其实早就逐步实现了，只是现在才完全统一。
这篇文章聊聊这三个东西：文本高亮API、text-indent的两个新关键字、还有font-family: math。每个都解决了前端写了好几年hack的麻烦事。
搜索高亮，不用再改DOM了
做过页内搜索的人都知道那套流程有多烦人：遍历文本节点、找匹配位置、用splitText切开、包一层<span>、再插回去。弄完之后还得记着清理这些span，不然DOM里全是残留节点。
我之前维护过一个这样的功能，每次看到代码里莫名其妙多出来的空span就很头疼。方案能跑，但写的时候就感觉不对——我只是想给文字加个背景色，为什么要动DOM结构？
Custom Highlight API的思路完全不一样。样式写在CSS里，用::highlight()定义；JavaScript只负责标出哪些文本区间需要高亮，注册到CSS.highlights就完事了。浏览器在渲染阶段直接画上去，不动DOM，不触发reflow。
::highlight(search-result) {
background-color: oklch(88% 0.17 95);
color: oklch(28% 0.03 240);
}const textNode = document.getElementById("content").firstChild;
const range = new Range();
range.setStart(textNode, 4);
range.setEnd(textNode, 24);
const highlight = new Highlight(range);
CSS.highlights.set("search-result", highlight);浏览器内部的处理方式很有意思。布局阶段直接跳过了，文本位置早就计算好了；渲染引擎在绘制阶段遍历文本盒子时查一下高亮注册表，发现坐标重叠就直接在文字底下画一个背景矩形，再把文字盖上去。整个过程没有DOM变更，没有布局重算。简单说就是，浏览器相当于拿着一张便利贴记了坐标，而不是为了给几个字加颜色就重建整个页面。
兼容性方面，Chrome 105就支持了（2022年9月），Safari 17.2和Firefox 111也跟上了，2026年3月正式成为baseline。如果你需要支持更老的浏览器，可以把旧的span方案当作fallback，新项目直接上这个就行。
text-indent终于能正常做悬挂缩进了
text-indent这个属性从CSS诞生那天就有，但几十年来它只接受长度值。想做悬挂缩进（第一行顶格、后续行缩进）怎么办？给容器加padding-left，再给text-indent写个负值。能跑，但写起来像是在跟浏览器斗智斗勇。
现在两个新关键字hanging和each-line把这件事变成了声明式写法。
/* 悬挂缩进：第一行不动，后续行缩进3em */
cite {
text-indent: 3em hanging;
}以前做参考文献列表、术语表、代码注释对齐，都得绕那个负值hack。现在一行声明，浏览器自己处理对齐计算。
each-line解决的是另一个问题：正常的text-indent只影响block的第一行，如果中间有<br>强制换行，后面那行不算新block，不会缩进。写诗歌、歌词、剧本对话的时候就很烦。加上each-line，每个<br>后面的行也会正常缩进。
.poetry {
text-indent: 2.5em each-line;
}兼容性方面，Chrome 146补齐了最后一块（Safari和Firefox更早就实现了），2026年3月全浏览器达标。这个特性属于典型的"用了没坏处"，老浏览器不支持最多就是缩进失效，布局不会崩。
数学公式，浏览器能直接渲染了
公式渲染这块我自己接触不多，但身边做教育产品和文档工具的朋友一直在抱怨：要么引KaTeX或MathJax（体积大、有运行时成本），要么把每个公式导出成SVG图片（屏幕阅读器读不了、没法选中复制）。
MathML加上font-family: math提供了原生路径。公式直接用HTML标签写，浏览器原生渲染，不需要任何外部JS库。
<math display="block">
<msup>
<mi>e</mi>
<mrow>
<mi>i</mi>
<mi>π</mi>
</mrow>
</msup>
<mo>+</mo>
<mn>1</mn>
<mo>=</mo>
<mn>0</mn>
</math>配合font-family: math，浏览器会调用系统里带数学排版表的字体（比如STIX或Latin Modern Math），分数、积分、上下标的堆叠都能正确处理。更重要的是，屏幕阅读器可以把公式朗读出来，对视障用户友好很多。
Chrome 109就支持了，其他浏览器随后跟上，现在也是baseline特性。
不过说实话，MathML的标签体系挺繁琐的。如果只是偶尔在博客里写一两个公式，手写MathML标签的成本比引KaTeX还高。这个特性的价值更多在于：浏览器原生支持了，工具链可以在此基础上做更好的封装。比如markdown渲染器可以直接输出MathML而不是调外部库。
上手建议
三个特性里，Highlight API是我最推荐尽快试的。搜索高亮、文本标注、diff展示，这些场景以前都要操作DOM，现在用Range + Highlight注册就行，代码量少了一半，性能还更好。Chrome 105起步的兼容性也足够覆盖绝大多数项目。
text-indent的新关键字属于渐进增强型改进。老代码不用改，新代码直接用hanging和each-line就行。不支持的老浏览器最多就是缩进失效，布局不会崩。做内容型网站、博客、文档的可以直接上。
MathML值得知道，但不一定急着手写。除非你正在做教育产品、学术文档或任何需要展示公式的工具，否则可以先放着，等你的markdown渲染器或富文本编辑器支持了再用。
下次你给页面做搜索高亮的时候，别在DOM里种span了。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！