如何通过CSS在Safari/Edge阅读器视图中自定义样式并隐藏指定UI元素？

目前没有官方公开的CSS伪类、媒体查询或其他专属CSS机制，可以直接检测Safari或Microsoft Edge的阅读器视图并应用自定义样式。这两个浏览器的阅读器模式都会重构页面DOM，仅保留核心内容，但并未提供可供CSS识别的专属标识（比如根元素类名、特定媒体特性）。

具体情况说明 #

• Safari阅读器视图：苹果未公开任何用于识别阅读器模式的CSS钩子，阅读器会基于页面语义自动筛选内容，非核心元素通常会被过滤，但如果你的UI元素未被自动隐藏，无法通过CSS主动触发隐藏——因为CSS无法读取safari-reader:协议，且阅读器禁用JavaScript。
• Edge阅读器视图：同样没有专属的CSS识别方式，read:协议只能通过JavaScript检测，但阅读器模式下JS被禁用，此方法无效。阅读器同样依赖语义化标签筛选内容，未被识别为非核心的元素会保留在视图中。

可行的替代方案 #

• 强化页面语义化：使用标准语义标签（如<article>包裹核心内容，<aside>、<nav>、<footer>放置侧边栏、导航、页脚等非核心UI），阅读器会优先保留<article>内的内容，自动隐藏其他语义化的非核心区域。
• 使用阅读器识别的类/属性：部分阅读器会识别约定俗成的类名（如.ad、.sidebar、.non-essential）或aria-hidden="true"属性，给需要隐藏的元素添加这些标识，大概率会被阅读器自动过滤。
• 提前隐藏非核心元素：如果某些元素不需要在任何视图下展示（仅阅读器视图除外的情况不适用），可以在原始页面设置display: none !important，阅读器不会加载已隐藏的元素。

内容的提问来源于stack exchange，提问作者Dennis Kats