w3c / w3c/csswg-drafts

[css-mediaqueries-5] nav-controls example implies it's safe to use in a Boolean context when it isn't future proof

Open
#7,288 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

mediaqueries-5
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

Continuing from #6785 which was raised about a different (invalid) issue.

The nav-controls section contains the following example code:

@media (nav-controls: back) {
  #back-button {
    display: none;
  }
}

As this media feature can be used in a boolean context, the same example can be written with shorter syntax:

@media (nav-controls) {
  #back-button {
    display: none;
  }
}

While it is technically true that it can be written with shorter syntax, the spec should not recommend developers do this, as the meaning of the second code snippet is different to the first -- the second is not future proof.

The first snippet reads: "if the browser supplies a back button, hide the in-page back button".

The second snippet reads: "if the browser supplies any controls, hide the in-page back button". (For the time being, the only control we expose here is the back button, but in the future it could mean other buttons.) This code's meaning doesn't match the developer's intention, which is to hide the in-page back button iff the browser supplies a back button.

The spec includes explanatory text that hints at the second snippet not being a good idea, but ultimately says it's probably fine:

Theoretically, the two are not strictly equivalent, as there could be new values in a future extension of this media feature other than back that could match when back doesn’t. In that case, using the nav-controls feature in a boolean context could be misleading. However, given that navigation back is arguably the most fundamental navigation operation, the CSS Working Group does not anticipate user interfaces with explicit navigation controls but no back button, so this problem is not expected to occur in practice.

In order to avoid a dilemma if and when we do want to add more values to this feature, I would like to explicitly recommend against using nav-controls in a Boolean context. Proposed text: #6795

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.

Research direction

Start at the nav-controls section in the CSS Media Queries Level 5 draft and review the related discussion in #6795. Update the explanatory text so it explicitly discourages Boolean-context usage and reflects the future-value concern; done when the example and guidance no longer imply that the shorter form is future-proof.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.