[css-nav-1] How author know spatnav will work by default in specific user agent?

[frivoal]

---

Migrated from WICG/spatial-navigation#41
Originally created by @junhoseo on Wed, 28 Mar 2018 05:54:57 GMT

---

Hello,
Let's assume that an author makes a web page that supports spatnav.
If a running browser supports spatnav by default, the author will disable
internal implementation (maybe author implemented using javascript) for
avoiding conflict. Maybe the author wants to prevent default spatnav.

But, How to know a browser supports spatnav or not in runtime?
For example, if we can use "if (window.spatnav_enabled)", we can control
above case.

Another use case for this information is polyfill. Polyfill library can
recognize spatnav feature by reading this information.

[frivoal]

---

Migrated from WICG/spatial-navigation#41 (comment)
Originally created by @anawhj on Thu, 29 Mar 2018 04:33:06 GMT

---

Media queries and properties are independent.

Do you mean navigation is used as a media feature only in Media queries? I'm not yet sure how we can use the navigation as the media feature. What situations @media (navigation: sequential) condition is false in?

[frivoal]

---

Migrated from WICG/spatial-navigation#41 (comment)
Originally created by @frivoal on Thu, 29 Mar 2018 06:26:36 GMT

---

How about making this variable as combination type such as ("sequential, spatial" | "spatial"), or {sequential, spatial}?

I don't understand. This would be a media feature, not a variable, so you could write:

@media (navigation: spatial) { ... }
@media (navigation: sequential) { ... }
@media (navigation) { /*matches if either is true*/ }
@media (navigation: none ) { /*matches if both are false*/ }
@media not (navigation) { /*same as above*/ }

Given how media queries work, the first two could absolutely match on the same device, if that device supports both sequential and spatial.

I also imagine an extended navigation, let's say that 3d navigation

Sure, no problem, then we can just add the new value, and you can continue to write the same as above, and also @media (navigation: nav3d) { ... }, and then @media (navigation) { ... } matches if any type of navigation, including 3d, is available.

[frivoal]

---

Migrated from WICG/spatial-navigation#41 (comment)
Originally created by @junhoseo on Thu, 29 Mar 2018 04:31:54 GMT

---

Maybe something like this: navigation: sequential | spatial | none, so that you can write

How about making this variable as combination type such as ("sequential, spatial" | "spatial"), or {sequential, spatial}?
I imagine that only spatial navigation allowed user agent. I also imagine an extended navigation, let's say that 3d navigation. In this case, it will be better if we enumerate all supported navigation type than having single value.

[frivoal]

---

Migrated from WICG/spatial-navigation#41 (comment)
Originally created by @junhoseo on Thu, 29 Mar 2018 04:39:20 GMT

---

How about making this variable as combination type such as ("sequential, spatial" | "spatial"), or {sequential, spatial}?

Oh, your idea already implies my comment. Thanks! :)

[frivoal]

---

Migrated from WICG/spatial-navigation#41 (comment)
Originally created by @frivoal on Thu, 29 Mar 2018 04:03:55 GMT

---

Does the media query means there is a navigation CSS property that I can also use to set the spatnav mode? Otherwise, dose it mean to be used only in the media query scope?

Media queries and properties are independent.

[frivoal]

---

Migrated from WICG/spatial-navigation#41 (comment)
Originally created by @frivoal on Tue, 03 Apr 2018 06:36:38 GMT

---

Suggesting the feature to the CSSWG: #2494

[frivoal]

---

Migrated from WICG/spatial-navigation#41 (comment)
Originally created by @anawhj on Thu, 29 Mar 2018 02:21:24 GMT

---

Basically, we can use preventDefault() in a keydown event handler when author want to cancel the default spatnav, but I think @junhoseo's proposed API could be used for several purposes. The media query approach seems interesting to me.

Does the media query means there is a navigation CSS property that I can also use to set the spatnav mode? Otherwise, dose it mean to be used only in the media query scope?

[frivoal]

---

Migrated from WICG/spatial-navigation#41 (comment)
Originally created by @Malvoz on Mon, 02 Apr 2018 20:00:18 GMT

---

@junhoseo

... But, How to know a browser supports spatnav ...

+ @frivoal

I'm not sure I'm missing something here, but wouldn't @supports be applicable?

[frivoal]

---

Migrated from WICG/spatial-navigation#41 (comment)
Originally created by @jihyerish on Tue, 16 Oct 2018 08:27:09 GMT

---

How about considering this by defining the new interface?
Such as, "SpatialNavigator" interface.

The SpatialNavigator interface of the spatial navigation which manages the process of spatial focus navigation on the web page.
Be specific,

• Constructor

  • SpatialNavigator(): Creates a new SpatialNavigator object.

• Event Handlers

  • SpatialNavigator.navbeforefocus: Dispatched when the spatial navigation process finds the best candidate.
  • SpatialNavigator.navbeforescroll: Dispatched when the spatial navigation triggers scrolling.
  • SpatialNavigator.navnotarget: Dispatched when the spatial navigation fails for finding the best candidate.

On top of that, the APIs in the current spatial navigation spec can be combined with this.

In this sense, the developer can know whether the page supports spatial navigation or not.
For example,

if (window.SpatialNavigator) {
  // The spatial navigator is supported
} else {
  // The spatial navigator is not supported
}

Also, the developer creates a SpatialNavigator to build a web page which uses the spatial navigation APIs.

[frivoal]

---

Migrated from WICG/spatial-navigation#41 (comment)
Originally created by @frivoal on Tue, 03 Apr 2018 04:04:37 GMT

---

@Malvoz @supports allows to check if certain CSS property/value pairs are supported. This spec is mostly not about CSS properties (although it does propose one: spatial-navigation-contain). Knowing that this property is not supported wouldn't tell you anything about whether the browser implements the processing model, or about whether the user is able to trigger spatnav.

[frivoal]

---

Migrated from WICG/spatial-navigation#41 (comment)
Originally created by @anawhj on Thu, 29 Mar 2018 06:52:57 GMT

---

Devices without a keyboard, and therefore no tab key (unless they provide some other way of triggering it).

Got it! I like @frivoal's idea. Could we suggest this proposal at the CSS wg f2f meeting?

Unlike limits of a media type that can handle a condition according to sort of output devices, this proposal that can distinguish input devices would have few issues on discriminating between the devices.

I'll put some concerns on this after the first formal proposal summary. Gathering use cases would be important in addition to the spatial navigation for now.