{"id":972,"date":"2020-04-17T14:44:15","date_gmt":"2020-04-17T18:44:15","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=972"},"modified":"2022-11-04T22:42:44","modified_gmt":"2022-11-05T02:42:44","slug":"media-queries-for-input-devices","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2020\/media-queries-for-input-devices\/","title":{"rendered":"Media Queries for Input Devices"},"content":{"rendered":"\n<p><strong>What:<\/strong> Since not every touch enabled device is a handheld device, checking for size and checking for touch should be handled separately, since the changes to the design and functionality they require are not the same.<\/p>\n\n\n\n<p><strong>How:<\/strong> You can use media queries.<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre class=\"wp-block-code css\"><code lang=\"css\" class=\"language-css\">@media( pointer: coarse | fine | none ){ ... }\n\/* Primary input device is a finger | a mouse, touchpad or stylus | \nthere is no primary pointing device *\/\n\n@media( hover: hover | none ){ ... }\n\/* Primary input device can hover | it cannot hover or there is no \nprimary pointing device *\/\n\n@media( any-pointer: coarse | fine | none ){ ... }\n\/* Any input device (not necessarily the primary one) is a finger | \na mouse, touchpad or stylus | there is no pointing device at all *\/\n\n@media( any-hover: hover | on-demand | none ){ ... }\n\/* Any input device (not necessarily the primary one) can hover | \nshows hover state without hovering (with a prolonged tap for \nexample) | no input device has any ability to show hover state or \nthere is no pointing device at all *\/<\/code><\/pre>\n\n\n\n<p><strong>Where:<\/strong> You can read more at <a rel=\"noreferrer noopener\" href=\"https:\/\/css-tricks.com\/touch-devices-not-judged-size\/\" target=\"_blank\">CSS-Tricks<\/a>. The article is over 3 years old but still good.<br>You can check support at <a href=\"https:\/\/caniuse.com\/#feat=css-media-interaction\" target=\"_blank\" rel=\"noreferrer noopener\">Can I use&#8230;<\/a><\/p>\n\n\n\n<p><strong>Thoughts:<\/strong> I haven&#8217;t been using these enough and they can be a big help in making user experience better. Support is excellent, the only exception is IE, but at least you can assume that IE will rarely be used on a touch screen. But if you want to play it safe, I guess you could always design for touch screens with coarse control first, and add hover options etc through media queries.<\/p>\n\n\n\n<p class=\"_3bJ2H CHExY\">Photo credit: Photo of the Empire State Building lit up in red from the Hudson. By <a href=\"https:\/\/www.flickr.com\/photos\/blind007\/\" target=\"_blank\" rel=\"noreferrer noopener\">me<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What: Since not every touch enabled device is a handheld device, checking for size and checking for touch should be handled separately, since the changes to the design and functionality they require are not the same. How: You can use media queries.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[23,17,81,141,140,142,144,145,143],"class_list":["post-972","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-can-i-use","tag-css","tag-css-tricks","tag-input-device","tag-media-queries","tag-mouse","tag-stylus","tag-touch","tag-trackpad","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=972"}],"version-history":[{"count":2,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/972\/revisions"}],"predecessor-version":[{"id":1224,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/972\/revisions\/1224"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}