Search code examples
csskeyboardmedia-queries

CSS media query for whether a physical keyboard is attached

Suppose I have a site with keyboard shortcuts, where I want to display said keyboard shortcuts visually as part of whatever element they apply to.

On a touch interface, especially a phone, I don't want to bother because:

  1. nobody would use a soft-keyboard this way even if they could
  2. the visual display of the keyboard shortcut takes up valuable real-estate
  3. it's perhaps confusing, or at least inelegant, to display keyboard shortcuts in a keyboardless context

However, the media query documentation doesn't seem to mention anything about this.

It's 2016, is this still impossible?

Solution

  • Media Queries 4 does not provide any media features for determining whether a physical keyboard is attached. There's nothing stopping you from proposing such a feature for MQ4 or MQ5 over at the www-style mailing list, though keep in mind whether such a media feature would be easy for vendors to implement is another story.