原文链接:糟糕的 ``。
下面的就是全文了,只是论坛部分渲染和原文不同。
`` 是一个标准元数据,可以用来改变浏览器 UI 的颜色,具体效果可参照 MDN 的示例。
在阅读了 Meta Theme Color and Trickery | CSS-Tricks 之后,我兴致勃勃地给博客主题加上了 ``,遇到了以下几个问题:
问题一
许多浏览器依旧不支持(测试日期 2026 年 3 月 15 日,均为当日能下载到的最新版本):
- 安卓版 Chrome 支持(浅色模式且非无痕模式),但基于相同内核的安卓版 Edge 不支持。
- 安卓版 Firefox 不支持,安卓版 Via 不支持。
问题二
不能使用自闭合标签,否则在安卓版 Chrome 上也会失效。这应该是一个安卓版 Chrome 的缺陷。
查看了 GitHub 和 CSS-Tricks 这两个网站的实现,确认他们的 都不是自闭合标签。 有趣的是,电脑端和手机端的 Safari 对 的支持较好,但苹果官网未使用 ``。
许多格式化工具会自动添加标签末尾的 /,不经意间就变成了自闭合标签。甚至 MDN 的示例都是自闭合标签。
问题三
这是 Thymeleaf 暴露的一个问题(补充:也可能是 Halo CMS 导致的),我猜测源于它假定 meta 标签不会有相同的 content。thymeleaf 已经接近一年没有提交了,开发分支也有半年以上的时间没有提交了,这个问题修复也可能遥遥无期。
错误例 1
渲染结果(删除行表示渲染缺失):
错误例 2
渲染结果(删除行表示渲染缺失):
错误例 3
渲染结果(删除行表示渲染缺失):
总结
`` 发挥功能的场景主要在于 PWA 和手机端。自 CSS-Tricks 的那篇文章后已经过去了将近 5 个年头(4 年 8 个月),各家浏览器支持依旧不乐观。
上面几个问题都是很常见的使用场景,这些问题存在也不是一天两天了,可见这个元数据的冷门程度。我判断这个元数据被广泛支持仍然遥遥无期。