@media syntax seems incorrect

[aarongustafson]

Media queries should have parentheses:

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

This is borne out in the documentation you reference, for example in update.

[fallaciousreasoning]

Good catch! Out of interest, did you want this API for something?

[aarongustafson]

Not me in particular, but I was part of the discussion of this feature request.

[aarongustafson]

@fallaciousreasoning The example JavaScript code would also need updating, right?

const backButtonQuery = window.matchMedia('(navigation-controls)');

Also, just for clarification, right now the media query for navigation controls is allowed to be boolean, but more granular testing should also be possible. Is that correct? So these would also be valid:

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

const backButtonQuery = window.matchMedia('(navigation-controls: none)');

[Malvoz]

So these would also be valid: @media (navigation-controls: back)

Yes. I'm still learning to read specs so I'll just post you the info to that conclusion:

In the explainer's "API Proposal" section:

A CSS Media query navigation-controls which determines what navigation controls are currently available, with the possible values 'none' | 'back', and the possibility of being extended with 'back-and-forward' in future. However, the API is designed to be used in a boolean context, so all future values should imply the presence of a back button (e.g. we wouldn't add a separate 'forward' value).

Note: This value is an enum not a boolean because <mq-boolean> is intended for legacy purposes only, with the spec noting that "If this feature were being designed today, it would instead use proper named keywords for its values."

https://www.w3.org/TR/mediaqueries-4/#mq-boolean-context:

2.4.2. Evaluating Media Features in a Boolean Context

While media features normally have a syntax similar to CSS properties, they can also be written more simply as just the feature name, like (color).

When written like this, the media feature is evaluated in a boolean context. If the feature would be true for any value other than the number 0, a <dimension> with the value 0, or the keyword none, the media feature evaluates to true. Otherwise, it evaluates to false.

So @media (navigation-controls) or @media (navigation-controls: back|back-and-forward) would all indicate the presence of a back-button.

[aarongustafson]

Yep, I just wanted to call it out as this will be important for implementors to keep in mind for parsing and authors to be aware of when building sites.

For further clarity, it might be worth indicating that @media (navigation-controls: none) would apply if:

1. the UA understands this media query and
2. it is not presenting any navigation controls.

[fallaciousreasoning]

@fallaciousreasoning The example JavaScript code would also need updating, right?

Whoops, yes :)

Also, just for clarification, right now the media query for navigation controls is allowed to be boolean, but more granular testing should also be possible. Is that correct?

Yup that's my understanding of it (though I'm pretty far from an expert).

Thanks for your input here :) I'm afraid the feature is pretty far down my priorities list at the moment, so its going to be a while before I can give it the attention it deserves :/

(I've updated the explainer with both of your feedback but speccing/test implementation are a ways off).