6

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?

10
  • 3
    So why not target desktops only? It's fair to assume that only desktop / laptop users have physical keyboards
    – Aziz
    May 2, 2016 at 6:33
  • Media queries can only target output (screen, print) and size, or orientation... Not input. Hence the name, media query, not device query
    – Paulie_D
    May 2, 2016 at 6:36
  • @Paulie_D Well, there are media types like "handheld", "braille", "tv" and so on, which do sound like devices, don't they.
    – Mr Lister
    May 2, 2016 at 8:51
  • 1
    @Kev this is what I have so far: jsfiddle.net/azizn/mras62ud/3 it's not ideal and would require a lot of research. I'm beginning to think that targeting desktops with pure CSS media query might be impossible with the ever-increasing tablet and retina displays. Another problem is devices like Asus Transform Book which is a tablet/laptop with detachable keyboard. You might have better luck attempting to detect if the display is a touchscreen with JavaScript.
    – Aziz
    May 2, 2016 at 16:38
  • 1
    @Kev: "and I guess even phones might have them" Yup. (And you don't even need Continuum to use Bluetooth peripherals with a Windows 10 phone - you can use them directly with the phone on its own screen.) The article you link to, thankfully, no longer applies to Microsoft Edge on Windows 10 phones - it behaves like other mobile browsers wrt responsive design.
    – BoltClock
    May 3, 2016 at 9:07

2 Answers 2

6

Unfortunately there is no query in Media Queries 4 to identify the existence of a keyboard. There are other new queries though that might be helpful.

In my own application I'm assuming that a keyboard exists when there is a mouse or a touchpad as primary input. You can query for that with

@media (hover: hover) and (pointer: fine) { ... }

This query would go false for devices with a touchscreen, stylus devices and also exotic devices like camera input.

Note that with this query you're querying for primary input devices. You can query all input devices with any-hover and any-pointer.

Also note that as of date, the adoption for MQ4 is 81% of all browsers, but no Firefox: https://caniuse.com/#feat=css-media-interaction

1
  • It's imaginable that there will one day (maybe soon, if apple pulls an apple, or if ever drawing tablets combine with leap-motions) be touch screens that support hovering, so this may lose its meaning one day. Seems a shame.
    – mako
    Jun 13, 2020 at 4:38
3

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.

3
  • Forgive my ignorance, but what would make it hard to implement?
    – Kev
    May 2, 2016 at 14:03
  • 1
    @Kev: Only people familiar with browser engines can answer that. My point is that there is no guarantee that the feature will be made a priority, or implemented at all.
    – BoltClock
    May 2, 2016 at 14:15
  • 3
    Posted this suggestion to the CSSWG: github.com/w3c/csswg-drafts/issues/3871
    – brianskold
    Apr 23, 2019 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.