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

[mgiuca]

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