Proposal: CSS Media Query for Browser Reader Views

Open
#8,546 7 comments 9 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
css
Domain
accessibility, frontend, web-dev

Research direction

No repository files, tests, or entry points are named. Start by reviewing the linked Safari Reader View and Edge Immersive Reader documentation, then investigate how CSS media types are specified; done would mean a resolved CSSWG design for targeting reader modes and defining the permitted styling behavior.

Written by the indexing model from the issue text.

Description

mediaqueries-5

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.

Dominant language
Bikeshed
Stars
4.9k
Forks
816
Avg merge
2d 18h
Merged PRs (30d)
24

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from w3c/csswg-drafts

All issues in w3c/csswg-drafts

Similar issues

More Accessibility issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.