Skip to content

[mediaqueries-5] New interaction media-feature: navigation #2494

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

[mediaqueries-5] New interaction media-feature: navigation #2494

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletions mediaqueries-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,116 @@ Evaluating Media Features in a Boolean Context</h4>
the <a>media feature</a> evaluates to true.
Otherwise, it evaluates to false.

<!--
████ ██ ██ ████████ ████████ ████████ ███ ██████ ████████ ████ ███████ ██ ██
██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██
██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██
██ ██ ██ ██ ██ ██████ ████████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ████ ██ ██ ██ ██ █████████ ██ ██ ██ ██ ██ ██ ████
██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███
████ ██ ██ ██ ████████ ██ ██ ██ ██ ██████ ██ ████ ███████ ██ ██
-->

<h2 id='mf-interaction' caniuse="css-media-interaction">
Interaction Media Features</h2>

Issue: Copy level 4 prose when final

<h3 id=mf-navigation>
Navigation capability: the 'navigation' feature</h3>

<pre class='descdef mq'>
Name: navigation
Value: none | sequential | spatial
For: @media
Type: discrete
</pre>

The 'navigation' media feature is used to query the user's ability navigate the page
and in particular to move the focus around
other than with a pointing device
(see the '@media/pointer' media feature).

<dl dfn-type=value dfn-for="@media/hover">
<dt><dfn>none</dfn>
<dd>
Indicates that there is no way for the user to directly navigate the focus.

Note: The user may still have the ability to interact with the page and activate
elements using a pointing mechanism
(see the '@media/pointer' media feature).


<dt><dfn>sequential</dfn>
<dd>
Indicates that the device and User Agent
provide a way for the user to move the focus
to the next—and usually previous—focusable item in the page.

Note: This is typically achieved by pressing the <code class=key>Tab</code> key for moving to the next item,
and <code class=key>Shift+Tab</code> for moving to the previous one.

<dt><dfn>spatial</dfn>
<dd>
Indicates that the device and User Agent
provide a way for the user to move the focus
directionally accross the page.

Note: This is typically achieved by pressing
the <code class="key">ArrowDown</code>,
<code class="key">ArrowLeft</code>,
<code class="key">ArrowRight</code>,
or <code class="key">ArrowUp</code> keys,
possibly in combination with the <code class=key>Shift</code> key.
</dl>

This media feature reflects the combined ability
of the User Agent and of the device it is running on.
If a User Agent would be able to support either spatial or sequential navigation,
but is running on a device which does not have an input mechanism capable of triggering them,
the corresponding query must not match.


<div class='example'>
For example, a TV browser operated solely through the D-pad on the remote control
would match
<code highlight=css>@media (navigation: spatial) { … }</code>,
but would not match
<code highlight=css>@media (navigation: sequential) { … }</code>
nor
<code highlight=css>@media (pointer) { … }</code>.

On the other hand,
a smartphone browser whose sole input mechanism is the touch screen
would match
<code highlight=css>@media (pointer) { … }</code>
as well as
<code highlight=css>@media not (navigation) { … }</code>.
Copy link

@jonjohnjohnson jonjohnjohnson Apr 3, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can imagine the iOS guys implementing this in a way where the navigation boolean changes when the software keyboard is brought up/down. Just wanted to bring this up, in that I tab around form inputs all the time in my smartphone browser.

Copy link

@jonjohnjohnson jonjohnjohnson Apr 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because I already hate when something like @media (min-height: 20em) {...} swaps back and forth when the software keyboard comes up/down.

Copy link
Collaborator Author

@frivoal frivoal Apr 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about clarifying that if there's a Tab key on a software keyboard, @media (navigation:sequential) is expected to match, even if the keyboard is not always visible?

The MQ is not about how convenient to access the Tab key is, just about whether it's there.

Copy link

@jonjohnjohnson jonjohnjohnson Apr 4, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm only nitpicking from a desire to see this feature land as useful as possible.

I'm guessing the primary example provided for not matching sequential is less the rule and more the exception if most TV (or touch) OS browsers have software keyboards, even if only accessible when focusing opens an OSK that has a tab key?

</div>

<div class="example">
<pre><code highlight=css>
/*
Visually simple and linear layout
*/
@media (pointer) or (navigation: spatial) {
/*
Non-linear advanced layout
*/
}
</code></pre>
</div>
<div class="example">
<pre><code highlight=css>
@media (update) and (not (pointer)) and (not (navigation)) {
/*
Dynamic but non-interactive layout,
for example suited for use in digital signage
*/
}
</code></pre>
</div>

<!--
████████ ██ ██ ██ ██
██ ███ ██ ██ ██
Expand Down