Safari and Microsoft Edge both have a Reader Mode (named Reader View and Immersive Reader, respectively), which aim to remove ads and other distractions when viewing web articles. These modes seem to enforce their own styles on elements and potentially limit what JavaScript is allowed to execute.

I understand these restrictions are necessary in order to make these modes a more accessible format for users, but it would be nice if there was some standardized way for developers to customize a small set of text-related styles (color, display, text-decoration, etc.). Within these modes, Microsoft Edge changes the page's URL protocol to "read:", and Safari changes it to "safari-reader:", so it's partially detectable with JavaScript via location.protocol, but it's still unclear to me what kind of JavaScript is allowed to execute.

Personally, this need came up when, due to my web page's structure, Safari's reader view failed to hide certain UI elements, and I didn't want them to appear in the reader view. This feels like something CSS media queries should be able to override. Media queries already support targeting different media types like print and screen, so it feels natural to add something like reader as a new media type to target these reader modes.

Example:

@media reader {
  p.emphasize { text-decoration: underline; }
  .ad { display: none; }
}

Browsers then implementing a reader mode should also offer an option to users to "Disable Page Stylesheets" that fallbacks to default styles in the event that a website tries to abuse the media query such as by hiding or obscuring the content.