[css-queries][hypothetic-future] Keyboard Media Queries

Hi,

Not so long ago, we had a discussion on Twitter about Keyboard-related media queries and how those could be used to tailor the experience.

I was somehow tasked to produce concrete use cases which could be used to kickstart the discussion. So, here am I.

Here are scenarios we may want to cover:
- The device has a full keyboard connected, and we want to display keyboard shortcuts next to menu items.
- The device has a keyboard lacking control keys, but we want to display hints telling the user that some action (for instance, a search) will be initiated once he starts typing.
- The device has a keyboard that is only active when a field is focused. In this case, we may make bigger or display more hints to the user regarding interactive elements.
- The device has no keyboard and we may want to provide an alternative input mode (like display an in-page virtual keyboard)

Given those scenarios, I was thinking about something like:

@media(keyboard: on-demand input) {
   // the main keyboard has an on-demand way to type words at any time
   // we could have a type-to-search ui on this device
}

@media(any-keyboard: on-demand control) {
    // some keyboard can type control keys
    // it may not be the one the user uses primarily
    // we may display keyboard shortcuts on menu-item
}

@media(any-keyboard: on-focus input) {
    // when an input field is focused, at least one keyboard allows to input text
}

@media(any-keyboard: on-focus control) {
    // when an input field is focused, at least one keyboard allows to use control keys
    // we may show hints for shortcuts in this case
}

I think we may also add a keyboard for on-screen keyboards to allow apps to replicate action buttons close to the input fields on focus(as an on-screen keyboard takes up visual space that would otherwise be free for the page to use if it wasn't displayed).

@media(keyboard: on-focus on-screen input) {
    // when an input field is focused, the currently-active keyboard allows to input text via the touch screen
    // we may have a more contextual ui in this case as some regions of the screen are probably hidden by the keyboard overlay.
}

What do you think?
Best regards,
François

Received on Monday, 6 April 2015 22:41:43 UTC