Exciting update! The latest editor's draft of CSS4 Media Queries now includes a new media feature called 'pointer'.

For example, devices like a mouse, track-pad, or stylus-based touch screen would be considered 'fine' pointing systems. On the other hand, finger-based touch screens fall under the category of 'coarse' pointing devices.

/* Increase the size of radio buttons and check boxes for inaccurate pointing devices */ 
@media (pointer:coarse) {
    input[type="checkbox"], input[type="radio"] {
        min-width:30px;
        min-height:40px;
        background:transparent;
    }
}

You can also test the media query using JavaScript:

var isCoarsePointer = (window.matchMedia &&
                       matchMedia("(pointer: coarse)").matches);

Updated Feb. 11th, 2013 In recent versions of Chrome on Windows 8 (version 24+), touch-hardware detection is enabled and touch events are exposed. However, the absence of "pointer:coarse" does not necessarily mean fine pointer implementation as WebKit has not yet implemented "pointer:fine".

Update Sept. 26th, 2012 Testing on Safari iOS6 and Chrome Android 4.1.1 shows that 'pointer' and 'hover' media queries have not been added yet. These features were introduced in WebKit on May 30th. Safari uses an older WebKit branch from April 25th, while Chrome on Android utilizes an even earlier version. Despite this, current WebKit branches may not accurately reflect support for pointer media queries according to User-Agent strings. Testing on my test page confirms the inability to detect pointer media queries. The May implementation only caters to touch devices, meaning pointer: fine does not function on mouse-operated devices.

Implementing a standardized media query, such as the one proposed by Mozilla, may not be the sole solution to the issue at hand. As mentioned in the discussion you referenced, just because a browser supports touch events doesn't guarantee that users will interact solely through touch input. Users may prefer other input methods like a mouse or keyboard, even if touch input is supported on their device.

I agree with the Chromium developer's perspective that supporting touch events is not a flaw in the browser itself. It is essential for browsers to support touch events, given the variety of devices they can be installed on. The responsibility lies with website developers to interpret event support correctly and adapt user interfaces accordingly.

To address this challenge effectively, it is crucial to understand all supported input types on the device and available event types in the browser. PPK from quirksmode has suggested an approach worth considering, which involves listening for both touch and mouse events and adjusting the UI dynamically based on these inputs.

While this method may have limitations, especially regarding preemptive UI adjustments, it highlights the importance of anticipating user interactions. Your proposal for inclusion in CSS3 would be valuable, but until then, user agent sniffing may remain a practical approach.

p.s. I am open to being proven wrong on this matter.

There is a clever trick to enable touch events in Google Chrome using a command line switch. However, it is disabled by default and may require some additional javascript to detect touch.

Update June 3, 2010: Unfortunately, the touch event feature was unexpectedly enabled in the stable version of Chrome on May 25, 2010.

I have brought up this issue on the w3c mailing list but progress may be slow. More discussions are planned during TPAC in November. Visit this link for further information.

Update September 30, 2010: It seems that the issue has been fixed in Chrome 6. If you have automatic updates enabled, this problem should no longer persist.

If you are thinking about utilizing media queries, take a look at these resources: Cloudfour article and QuirksMode blog post

Update May 16th, 2011: W3C is progressing on a Touch Events specification, though they have debated hiding touch events for devices without touch hardware. This could potentially impact touch event detection in the future.

Update June 6th, 2012: The W3C CSS4 Media Queries (Editors Draft) spec introduces intriguing features. Check out my detailed response for more information.

Sorry, that doesn't exist. CSS offers the option to adjust layout based on screen size, but that's about it. There is a media="handheld" attribute, but it won't meet your needs either.

You could possibly use feature detection with JavaScript, but there are challenges due to various events across different devices. PPK from quirksmode.org is actively researching JavaScript compatibility with mobile and handheld devices, revealing the lack of standardization in this area. However, even his findings may not apply to touch laptop devices.
(In all honesty, worrying about a device that hasn't been released yet seems unnecessary. Focus on testing once it's available.)

If you're interested in mobile browser and touch events, PPK's research can save you a lot of time. Check it out here

It seems that Apple has specifically outlined TouchEvent functionalities for iOS devices.

One way to improve usability on your interface is to steer clear of small buttons altogether. These tiny buttons can be particularly challenging for touch devices, but even users with large screens and mice find them difficult to use.

By focusing on incorporating larger buttons with ample spacing between them, you can enhance the experience for all users. This approach also serves as a reminder not to overcrowd your interface with an abundance of small buttons :-).

Experiment with incorporating tables and creating linkable cells... I'm currently exploring this technique for my own website... Progress has been slow, but there may be a solution out there... By avoiding excessive javascript and feature detection, you can keep your site running smoothly... Consider using relative sizes instead of fixed sizes... This way, your website will adapt seamlessly across different devices... Open to any suggestions or ideas...

To get support for adding pointer:fine in Chrome, refer to the link . You can actually determine if pointer:coarse is supported by creating your own media query and testing in JavaScript whether it parsed correctly.

For example, when using "@media (pointer:coarse)" in Chrome, it displays:

> document.styleSheets[0].rules[5].media[0]
"(pointer: coarse)"

However, unsupported values like "@media (pointer:other)" do not display properly:

> document.styleSheets[0].rules[8].media[0]
"not all"