Adding the "pointer" media feature.

Author: Florian Rivoal

css4-mediaqueries/Overview.html

@@ -208,7 +208,9 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
 
      <li><a href="#script"><span class=secno>4.14. </span>script</a>
 
-     <li><a href="#hover"><span class=secno>4.15. </span>hover</a>
+     <li><a href="#pointer"><span class=secno>4.15. </span>pointer</a>
+
+     <li><a href="#hover"><span class=secno>4.16. </span>hover</a>
     </ul>
 
    <li><a href="#values"><span class=secno>5. </span>Values</a>
@@ -1065,7 +1067,68 @@ <h3 id=script><span class=secno>4.14. </span>script</h3>
   <p>Only 0 and 1 are valid values. (This includes -0.) Thus everything else
    creates a malformed media query.
 
-  <h3 id=hover><span class=secno>4.15. </span>hover</h3>
+  <h3 id=pointer><span class=secno>4.15. </span>pointer</h3>
+
+  <div class=media-feature><span class=label>Value:</span> none | coarse |
+   fine<br>
+   <span class=label>Applies to:</span> visual and tactile media types<br>
+   <span class=label>Accepts min/max prefixes:</span> no<br>
+  </div>
+
+  <p>The ‘<code class=css>pointer</code>’ media feature is used to query
+   about the presence and accuracy of a pointing device such as a mouse. If a
+   device has multiple input mechanisms, it is recommended that the UA
+   reports the characteristics of the pointing device of the primary input
+   mechanism. It takes the following values:
+
+  <dl>
+   <dt><dfn id=none title="pointer:none">‘<code
+    class=css>none</code>’</dfn>
+
+   <dd>The input mechanism of the device does not include a pointing device.
+
+   <dt><dfn id=coarse title="pointer:coarse">‘<code
+    class=css>coarse</code>’</dfn>
+
+   <dd>The input mechanism of the device includes a pointing device of
+    limited accuracy.
+
+   <dt><dfn id=fine title="pointer:fine">‘<code
+    class=css>fine</code>’</dfn>
+
+   <dd>The input mechanism of the device includes an accurate pointing
+    device.
+  </dl>
+
+  <p>Both ‘<code class=css>coarse</code>’ and ‘<code
+   class=css>fine</code>’ indicate the presence of a pointing device, but
+   differ in accuracy. A pointing device with which it would be difficult or
+   impossible to reliably pick one of several small adjacent targets would
+   qualify as ‘<code class=css>coarse</code>’.
+
+  <p class=note>Typical examples of a ‘<code class=css>fine</code>’
+   pointing system are a mouse, a track-pad or a stylus-based touch screen.
+   Finger-based touch screens would qualify as ‘<code
+   class=css>coarse</code>’.
+
+  <p>For accessibility reasons, even on devices whose pointing device can be
+   described as ‘<code class=css>fine</code>’, the UA may give a value of
+   ‘<code class=css>coarse</code>’ or ‘<code class=css>none</code>’
+   to this media query, to indicate that the user has difficulties
+   manipulating the input device accurately or at all.
+
+  <div class=example>
+   <pre><code>/* 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;
+	}
+}</code></pre>
+  </div>
+
+  <h3 id=hover><span class=secno>4.16. </span>hover</h3>
 
   <div class=media-feature><span class=label>Value:</span>
    &lt;integer&gt;<br>
@@ -1142,9 +1205,6 @@ <h3 id=changes-2012><span class=secno>7.1. </span>Changes Since the Media
    2012 Proposed Recomendation of Media Queries Level 3</a>:
 
   <ul>
-   <li>The <a href="#script">‘<code class=css>script</code>’ media
-    feature</a> was added.
-
    <li>For a media feature <var>feature</var>,
     <code>(<var>feature</var>)</code> will evaluate to true if
     <code>(<var>feature</var>:<var>x</var>)</code> will evaluate to true for
@@ -1153,6 +1213,12 @@ <h3 id=changes-2012><span class=secno>7.1. </span>Changes Since the Media
     <code>0em</code>, etc.)<ins> or the keyword ‘<code
     class=property>none</code>’</ins>.
 
+   <li>The <a href="#script">‘<code class=css>script</code>’ media
+    feature</a> was added.
+
+   <li>The <a href="#pointer">‘<code class=css>pointer</code>’ media
+    feature</a> was added.
+
    <li>The <a href="#hover">‘<code class=css>hover</code>’ media
     feature</a> was added.
   </ul>

css4-mediaqueries/Overview.src.html

@@ -937,6 +937,53 @@ <h3 id="script">script</h3>
 <p>Only 0 and 1 are valid values. (This includes -0.) Thus everything else
 creates a malformed media query.</p>
 
+<h3 id="pointer">pointer</h3>
+<div class="media-feature"><span class="label">Value:</span> none | coarse | fine<br>
+<span class="label">Applies to:</span> visual and tactile media types<br>
+<span class="label">Accepts min/max prefixes:</span> no<br>
+</div>
+
+<p>The ''pointer'' media feature is used to query about the presence and
+accuracy of a pointing device such as a mouse. If a device has multiple input
+mechanisms, it is recommended that the UA reports the characteristics of the
+pointing device of the primary input mechanism. It takes the following
+values:</p>
+
+<dl>
+	<dt><dfn title="pointer:none">''none''</dfn></dt>
+	<dd>The input mechanism of the device does not include a pointing device.</dd>
+
+	<dt><dfn title="pointer:coarse">''coarse''</dfn></dt>
+	<dd>The input mechanism of the device includes a pointing device of limited accuracy.</dd>
+
+	<dt><dfn title="pointer:fine">''fine''</dfn></dt>
+	<dd>The input mechanism of the device includes an accurate pointing device.</dd>
+</dl>
+
+<p>Both ''coarse'' and ''fine'' indicate the presence of a pointing device, but
+differ in accuracy. A pointing device with which it would be difficult or
+impossible to reliably pick one of several small adjacent targets would qualify
+as ''coarse''.</p>
+
+<p class="note">Typical examples of a ''fine'' pointing system are a mouse, a track-pad or a
+stylus-based touch screen. Finger-based touch screens would qualify as ''coarse''.</p>
+
+<p>For accessibility reasons, even on devices whose pointing device can be
+described as ''fine'', the UA may give a value of ''coarse'' or ''none'' to
+this media query, to indicate that the user has difficulties 
+manipulating the input device accurately or at all.</p>
+
+<div class="example">
+	<pre><code>/* 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;
+	}
+}</code></pre>
+</div>
+
 <h3 id="hover">hover</h3>
 <div class="media-feature"><span class="label">Value:</span> &lt;integer&gt;<br>
 <span class="label">Applies to:</span> visual and tactile media types<br>
@@ -1004,13 +1051,14 @@ <h3 id="changes-2012">Changes Since the Media Queries Level 3</h3>
 <a href="http://www.w3.org/TR/2012/PR-css3-mediaqueries-20120426/">26 April 2012
 Proposed Recomendation of Media Queries Level 3</a>:
 <ul>
-	<li>The <a href="#script">''script'' media feature</a> was added.
 	<li>For a media feature <var>feature</var>,
 	<code>(<var>feature</var>)</code> will evaluate to true if
 	<code>(<var>feature</var>:<var>x</var>)</code> will evaluate to true
 	for a value <var>x</var> other than zero or zero followed by a unit
 	identifier (i.e., other than <code>0</code>, <code>0px</code>,
 	<code>0em</code>, etc.)<ins> or the keyword 'none'</ins>.
+	<li>The <a href="#script">''script'' media feature</a> was added.
+	<li>The <a href="#pointer">''pointer'' media feature</a> was added.
 	<li>The <a href="#hover">''hover'' media feature</a> was added.
 </ul>