[csswg-drafts] CSS Media Query for Browser Reader Views (#8546)

denk0403 has just created a new issue for https://github.com/w3c/csswg-drafts:

== CSS Media Query for Browser Reader Views ==
Safari and Microsoft Edge both have a Reader Mode (named [Reader View](https://support.apple.com/guide/safari/hide-ads-when-reading-sfri32632/mac) and [Immersive Reader](https://support.microsoft.com/en-gb/topic/use-immersive-reader-in-microsoft-edge-72ac6331-2795-42eb-b3e8-c03503231f32), 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:
```css
@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 the page content.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8546 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 8 March 2023 21:05:10 UTC