O'Reilly

pointer Media Query

By on  

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.

As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become.  In order to write good CSS, we need some indicator about device capabilities.  We've used CSS media queries thus far, with checks for max-width and pixel ratios.  One new proposed CSS media query is the pointer media query;  the pointer media query provides information about how accurate the device pointer is (if present).

The pointer media query has three values:

  • none - device has no pointer
  • coarse - pointer has limited accuracy
  • fine - pointer has high level of accuracy

A fine pointer would be a mouse or a stylus-based touch screen, while a coarse pointer would be a finger-based touch screen, like an iPad, iPhone, or other tablet.  The example provided within the spec shows enlarging checkboxes and radio buttons on coarse-pointered devices:

/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
	input[type="checkbox"], input[type="radio"] {
		min-width:30px;
		min-height:40px;
		background:transparent;
	}
}

I envision this API being used to enlarge navigation items and other prominent links when the pointer is coarse.  What would you do with the pointer media query?

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

Incredible Demos

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • RealTime Stock Quotes with MooTools Request.Stocks and YQL

    It goes without saying but MooTools' inheritance pattern allows for creation of small, simple classes that possess immense power.  One example of that power is a class that inherits from Request, Request.JSON, and Request.JSONP:  Request.Stocks.  Created by Enrique Erne, this great MooTools class acts as...

Discussion

  1. This is great. Is there also a way to check this with JS? I guess you could use the “animation end event” hack for this, but would be better if it’s officially supported and always in sync.

  2. DigDug2k

    The problem with this particular query is that it assumes you have one or the other, when its becoming more common to have both a fine and a course pointer. In fact, studies have constantly shown people are really really good at using two different pointing devices at the same time!

    Webdevs need to be careful that they don’t assume just because the user is on a touch screen, they’re using touch. Sites need to design to handle both (simultaneously, CSS is the oddball here because there you can’t optimize for both experiences at the same time). PointerEvents will make that easier, but they’re barely at the starting gate right now (which is good because it means this time we can design something good and not just something that matches the iPhone).

  3. Providing a live demo for something that has no implementations at all is somewhat confusing.

  4. Alex

    Do Canary

    • Alex

      … or Aurora support this?

  5. Daniel Glazman

    With my CSS WG Co-chairmanship’s hat on, this is a part of an Editor’s Draft that was *never* discussed inside the CSS WG and is *far away* from reaching the level of first public Working Draft yet. I really hope your implementation is prefixed or behind a preference. And I think you should probably not have implemented-and-released it at all without discussing it with the CSS WG first… Speaking of the proposal, ‘coarse’ is a VERY bad choice for a value since most non english speakers will not understand it, trust me on that please.

    In summary, this is a very very very early proposal, it’s still subject to major changes, and I certainly don’t want to hear in the future “we’ve implemented and shipped it, we can’t change it any more” from Mozilla :-)

    • I just found the proposal interesting — I’m not someone who implements these things at Mozilla. I’ve updated the note at the top to make it clear that this proposal has not been approved.

  6. I’d love this media query to also tell me if I’m dealing with a touchscreen or a pointer. Basically, can I use the hover effect.

    * None
    * Fine Touch (stylus)
    * Course Touch (finger)
    * Pointer (mouse)

    Maybe even a:

    * Terrible Pointer (Wiimote)

  7. Matt

    @Justin css media query level 4 is also proposing the hover media feature, check http://dev.w3.org/csswg/mediaqueries4/#hover for spec and other level 4 stuff

  8. Here’s an interesting result when trying to match the query in Chrome: http://d.pr/i/gP5r

    Very frustrating – I’m trying to find a semi-reliable way to distinguish between desktop and touch-based users for tooltips.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...