3 ms·
Sometimes you want to change things on touch input devices - thumbs are quite bigger than cursors. Here's a tidy way to do that: .foo-component { --s
by lelandfe 5y ago
Sometimes you want to change things on touch input devices - thumbs are quite bigger than cursors. Here's a tidy way to do that:
.foo-component {
--size: 20px;
width: --size;
height: --size;
@media (hover: none) {
--size: 40px;
}
}
- micromacrofoot 5y agounfortunately this is a little unreliable for detecting touch screen laptops
- afavour 5y agoYes, the correct way (these days) to detect what the OP actually wants is the pointer media query: https://davidwalsh.name/pointer-media-query https://davidwalsh.name/pointer-media-query Which has values for coarse (finger) and fine (mouse, tablet, etc)
- emsixteen 5y ago> This media query has not yet been implemented and is currently only a proposed spec. I've written this post to raise awareness of it and get general thoughts about it. Great to be aware of what might come, but.. it's not an option if it's literally just proposed.
- afavour 5y agoThat article was written in 2012, it just happens to be a good guide. It’s widely supported today: https://caniuse.com/css-media-interaction https://caniuse.com/css-media-interaction
- lelandfe 5y agoYou're likely referring to a Chrome bug fixed back in 2014: https://bugs.chromium.org/p/chromium/issues/detail?id=441613 https://bugs.chromium.org/p/chromium/issues/detail?id=441613 The reason to use `hover`, instead of `pointer` like a sibling comment mentioned, is for accessibility purposes: > For accessibility reasons, even on devices that do support hovering, the UA may give a value of hover: none to this media query, to opt into layouts that work well without hovering. https://drafts.csswg.org/mediaqueries-4/#hover https://drafts.csswg.org/mediaqueries-4/#hover
- micromacrofoot 5y agono i mean that touch devices with a dedicated mouse can be detected as no-hover devices (usually laptops with touch screens)… which is often not desirable
- lelandfe 5y agoAh – I err on the other side (keeping things usable for touch input). Two sides to a coin! That is a useful thing to keep in mind when writing this though, good point. I view this not as "unreliable for detecting touch screen laptops" but reliably detecting touch screens.
- jrochkind1 5y agoI think you're reading the comments backwards, maybe. A laptop that has a mouse and a touch-screen will in some cases NOT be detected as a touch screen. When you say that is "reliably detecting touch screens", I'm not sure if you're following. If that results in delivering your "not as usable for touch screens" UI, that is not "erring on the side of keeping things usable for touch input"
- lelandfe 5y ago> A laptop that has a mouse and a touch-screen will in some cases NOT be detected as a touch screen What you are saying here is the opposite of the comment that I'm replying to, and is the opposite of the W3 spec. Are you sure? micromacrofoot correctly said: > touch devices with a dedicated mouse can be detected as no-hover devices "no-hover devices" are AKA touch input devices, and will therefore satisfy the query `hover: none`. The spec says as such: For example, on a touch screen device that can also be controlled by an optional mouse, the `hover` media feature should match `hover: none`, as the primary pointing device (the touch screen) does not allow the user to hover. However, despite this, the optional mouse does allow users to hover. Authors should therefore be careful not to assume that the ':hover' pseudo class will never match on a device where 'hover:none' is true, but they should design layouts that do not depend on hovering to be fully usable. https://www.w3.org/TR/mediaqueries-4/#example-3d419780 https://www.w3.org/TR/mediaqueries-4/#example-3d419780