Detecting if a physical keyboard is connected using CSS media query

Imagine having a website with keyboard shortcuts, where the goal is to visually display these shortcuts as part of the element they correspond to.

When it comes to touch interfaces, especially on mobile phones, this may not be necessary because:

  1. Most users may not utilize a soft-keyboard in this manner
  2. The visual representation of keyboard shortcuts could take up valuable screen space
  3. Displaying keyboard shortcuts in a context without an actual keyboard might be confusing or unattractive

Despite this, there doesn't seem to be any information about handling this scenario in media query documentation.

As we're in 2016, is it still impossible to address this issue?

csskeyboardmedia-queries

Answer №1

Regrettably, Media Queries 4 does not offer a specific query to detect the presence of a keyboard. However, there are other new queries available that could be beneficial in this scenario.

For my own application, I assume the existence of a keyboard if a mouse or touchpad is used as the primary input. This can be checked with the following query:

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

This particular query would return false for devices with touchscreen capabilities, stylus input, and unique devices like camera inputs.

Keep in mind that this query specifically targets primary input devices. If you want to query all input devices, you can use any-hover and any-pointer.

Furthermore, it's worth noting that currently, Media Queries 4 has been adopted by 81% of all browsers, excluding Firefox: https://caniuse.com/#feat=css-media-interaction

Answer №2

While Media Queries 4 does not currently include any media features for detecting a physical keyboard attachment, there is potential to suggest this feature for future versions like MQ4 or MQ5 on the www-style mailing list. However, it's worth considering the potential challenges vendors may face in implementing such a feature.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Scrapy CSS selector is not fetching any prices from the list

Having trouble with the price CSS-selector while scraping an interactive website using Scrapy. Check out the HTML screenshot I captured: https://i.stack.imgur.com/oxULz.png Here are a few selectors that I've already experimented with: price = respon ...

pythoncssweb-scrapingscrapycss-selectors

Blank values are being submitted via the form

As I work on creating a basic form using a combination of HTML, CSS, and PHP, I've encountered an issue. While the form successfully sends an email to the designated recipient, it does not include any information entered into the form itself; only the ...

phphtmlcssforms

Is there a way to create a responsive navbar using flexbox that automatically transitions into two rows at smaller screen sizes?

I've designed a sleek navbar located at the bottom of my webpage featuring a central logo leading to the home page, with two links on each side directing users to specific pages. Using @media CSS, I made it responsive by reducing its size as the scree ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

"Implementing a bookmark/watch feature with a hover text cloud using either a Drupal module or CSS styling

Seeking guidance on implementing features in Drupal core. Interested in allowing users to subscribe to various aspects of a node, such as bookmarking for later viewing or rating it. Want a consistent theme across the site and for these features to use togg ...

cssdrupalbutton

When a div is floated to the left and another div is floated to the right, the

I would like the footer to display an image aligned to the left and some additional text (an inline ul with links) aligned to the right within the footer. Here is the CSS & HTML: footer { clear: both; background: #113551; width: 90%; ma ...

htmlcssbackgroundcss-float

"The issue of the search form CSS class loading twice and causing placement issues following the completion of the AJAX

I implemented a search form that fetches data from the server and displays it in a div, which is working smoothly. However, when I added an ajaxComplete function to add a class for animating the results, it resulted in unexpected behavior. Upon entering t ...

jquerycssajaxanimationsearch

Opacity Vertical Gradient Text Design

Currently exploring various methods in CSS3, jQuery, SVG, or canvas to achieve a specific effect, but encountering some challenges along the way. Key considerations to take note of: The text gradient is vertical with opacity The text could span multiple ...

jquerycsstextsvggradient

The CSS hamburger icon displayed in the browser features three bars of varying heights

Looking to create a hamburger icon menu using only CSS? Check out my implementation below which includes three span tags in the HTML document. .sidebar-toggle { display: inline-block; } .sidebar-toggle span { display: block; width: 1.5rem; heig ...

htmlcss

Pressing the menu button will trigger a function that halts after the third click

As I attempted to implement the functionality of this left menu bar, I encountered a roadblock. The click event on the menu button seems to work fine initially - the left bar appears with the first click and closes as expected with the second click. Howeve ...

javascripthtmlcssloopsaddeventlistener

How to keep jQuery horizontal submenu open when clicking on the menu

Seeking assistance with a menu issue. I have a horizontal menu with subitems that display when clicked, but having trouble with the submenu behavior. When clicking on a submenu item, I want it to remain open and show the related items underneath it. For ex ...

jqueryhtmlcsssubmenu

How can I change the padding that is being inherited from "@ .MuiAlert-icon"?

Is there a method to override the padding inherited from "@ .MuiAlert-icon"? The Chrome inspector indicates that the current padding is set to 7px. .MuiAlert-icon { display: flex; opacity: 0.9; padding: 7px 0; font-size: 22px; ...

javascriptcssmaterial-ui

I am seeking assistance in troubleshooting this javascript code. Can someone please help me identify the issue?

function validateCredentials() { var username = document.forms["myForm"]["name"].value; var admin = "admin"; var user = "user"; var master = "master"; if (username == "&qu ...

javascripthtmlcssreactjs

Is there a way to automatically make required fields turn red upon form load using model validations in MVC?

After implementing Model validations and remote attribute validation, I noticed that all mandatory fields turn red when the submit button is clicked. Is it possible for all mandatory fields to turn red upon form load instead? ...

jquerycss

What is the best way to eliminate empty space at the bottom of a page that is being caused by a button?

I have identified the reason for the blank space at the bottom of my page - it's due to a sticky "back to top" button. However, I am unsure how to resolve this issue. Here is the layout of the page: <nav> navbar </nav> <div> car ...

htmlcssbootstrap-5

Having difficulty sizing specific <td> elements in an HTML table

Is there a way to increase the size of a TD cell without adjusting the height of the entire row? I tried using inline styling with "rowspan= 7", but it only centers the data in the middle of the cell. I am attempting to create a table similar to the one s ...

htmlcsshtml-tablebootstrap-table

Blazor Shared CSS File

Currently, I have successfully implemented 2 pages in my Blazor app: Login.razor located in the Auth folder AddPerson.razor situated in the Profile directory At this point, I have managed to integrate a CSS file specifically for the AddPerson.razor page ...

c#cssblazor

Avoid having the browser automatically move focused elements that are navigated to using the tab key

When moving through form elements or anchors using the tab key (and shift + tab), the browser automatically scrolls to the focused element. If the element is not visible due to being part of overflow content with a hidden overflow setting, the container&ap ...

javascripthtmlcssaccessibilitytabbing

React app experiencing an unexpected issue with horizontal scroll bar appearing unnecessarily

Currently, I am attempting to implement a carousel using react-bootstrap within my react application. The goal is to have a black background container where the carousel will reside, similar to this illustration Desired Container However, upon creating t ...

cssbootstrap-4react-bootstrap

Can I use a custom font in an HTML5 canvas?

Has anyone had success importing a custom font for use in HTML5 canvas? I've been trying to do this by loading the font file on my computer, but all my attempts have failed so far. The canvas keeps showing the default font instead of the one I want to ...

javascriptcsshtmlfontshtml5-canvas

What impact does the CSS float property have on line height and element positioning?

I'm facing an issue where I have a table cell with a button inside it. When I try to float this button, it not only moves horizontally but also changes its vertical position, shifting to the top of the line. For example: <table style="width: 100% ...

htmlcss