Skip to content

Commit 56368df

Browse files
author
Florian Rivoal
committed
Adding the "hover" media feature.
1 parent 7e46ba6 commit 56368df

2 files changed

Lines changed: 86 additions & 36 deletions

File tree

‎css4-mediaqueries/Overview.html‎

Lines changed: 58 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -207,14 +207,13 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
207207
<li><a href="#grid"><span class=secno>4.13. </span>grid</a>
208208

209209
<li><a href="#script"><span class=secno>4.14. </span>script</a>
210+
211+
<li><a href="#hover"><span class=secno>4.15. </span>hover</a>
210212
</ul>
211213

212214
<li><a href="#values"><span class=secno>5. </span>Values</a>
213215

214216
<li><a href="#units"><span class=secno>6. </span>Units</a>
215-
<ul class=toc>
216-
<li><a href="#resolution0"><span class=secno>6.1. </span>Resolution</a>
217-
</ul>
218217

219218
<li><a href="#changes"><span class=secno>7. </span>Changes</a>
220219
<ul class=toc>
@@ -1066,52 +1065,62 @@ <h3 id=script><span class=secno>4.14. </span>script</h3>
10661065
<p>Only 0 and 1 are valid values. (This includes -0.) Thus everything else
10671066
creates a malformed media query.
10681067

1069-
<h2 id=values><span class=secno>5. </span>Values</h2>
1070-
1071-
<p>This specification also introduces two new values.
1068+
<h3 id=hover><span class=secno>4.15. </span>hover</h3>
10721069

1073-
<p>The &lt;ratio> value is a positive (not zero or negative) &lt;integer>
1074-
followed by optional whitespace, followed by a solidus (‘<code
1075-
class=css>/</code>’), followed by optional whitespace, followed by a
1076-
positive &lt;integer>.
1070+
<div class=media-feature><span class=label>Value:</span>
1071+
&lt;integer&gt;<br>
1072+
<span class=label>Applies to:</span> visual and tactile media types<br>
1073+
<span class=label>Accepts min/max prefixes:</span> no<br>
1074+
</div>
10771075

1078-
<p>The &lt;resolution> value is a positive &lt;number> immediately followed
1079-
by a unit identifier (‘<code class=css>dpi</code>’ or ‘<code
1080-
class=css>dpcm</code>’).
1076+
<p>The ‘<code class=css>hover</code>’ media feature is used to query
1077+
whether primary pointing system used on the output device can hover or
1078+
not. If it can, the value will be 1. Otherwise, the value will be 0.
10811079

1082-
<p>Whitespace, &lt;integer>, &lt;number> and other values used by this
1083-
specification are the same as in other parts of CSS, normatively defined
1084-
by CSS 2.1. <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
1080+
<p>If a device has multiple pointing systems, some of which support
1081+
hovering and some of which not, it is recommended that the UA reports the
1082+
hovering ability of the primary pointing system.
10851083

1086-
<h2 id=units><span class=secno>6. </span>Units</h2>
1084+
<p class=note> The value of ‘<code class=css>hover</code>’ media query
1085+
should for example be 0 on a touch screen device that can also be
1086+
controlled via an optional mouse. Authors should therefore be careful not
1087+
to assume that the ‘<code class=css>:hover</code>’ pseudo class will
1088+
never match on device where ‘<code class=css>hover:0</code>’ is true,
1089+
but they should design layouts that do not depend on hovering to be fully
1090+
usable.
10871091

1088-
<p>The units used in media queries are the same as in other parts of CSS.
1089-
For example, the pixel unit represents CSS pixels and not physical pixels.
1092+
<p>For accessibility reasons, even on devices that do support hovering, the
1093+
UA may give a value of 0 to this media query, to opt into layouts that
1094+
work well without hovering.
10901095

1091-
<p>Relative units in media queries are based on the initial value, which
1092-
means that units are never based on results of declarations. For example,
1093-
in HTML, the ‘<code class=css>em</code>’ unit is relative to the
1094-
initial value of ‘<code class=property>font-size</code>’.
1096+
<p>Only 0 and 1 are valid values. (This includes -0.) Thus everything else
1097+
creates a malformed media query.
10951098

1096-
<h3 id=resolution0><span class=secno>6.1. </span>Resolution</h3>
1099+
<h2 id=values><span class=secno>5. </span>Values</h2>
10971100

1098-
<p>The ‘<code class=css>dpi</code>’ and ‘<code
1099-
class=css>dpcm</code>’ units describe the resolution of an output
1100-
device, i.e., the density of device pixels. Resolution unit identifiers
1101-
are:
1101+
<p>Value types not defined in this specification, such as &lt;integer&gt;,
1102+
&lt;number&gt; or &lt;resolution&gt;, are defined in <a href="#CSS3VAL"
1103+
rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>. Other CSS modules may
1104+
expand the definitions of these value types.
11021105

1103-
<dl>
1104-
<dt>dpi
1106+
<p>This specification also introduces one new value type.
11051107

1106-
<dd>dots per CSS ‘<code class=css>inch</code>’
1108+
<p>The &lt;ratio&gt; value type is a positive (not zero or negative)
1109+
&lt;integer&gt; followed by optional whitespace, followed by a solidus
1110+
(‘<code class=css>/</code>’), followed by optional whitespace,
1111+
followed by a positive &lt;integer&gt;.
11071112

1108-
<dt>dpcm
1113+
<h2 id=units><span class=secno>6. </span>Units</h2>
11091114

1110-
<dd>dots per CSS ‘<code class=css>centimeter</code>’
1111-
</dl>
1115+
<p>The units used in media queries are the same as in other parts of CSS,
1116+
as defined in <a href="#CSS3VAL"
1117+
rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>. For example, the pixel
1118+
unit represents CSS pixels and not physical pixels.
11121119

1113-
<p>In this specification, these units are only used in the ‘<code
1114-
class=css>resolution</code>’ media feature.
1120+
<p>Relative units in media queries are based on the initial value, which
1121+
means that units are never based on results of declarations. For example,
1122+
in HTML, the ‘<code class=css>em</code>’ unit is relative to the
1123+
initial value of ‘<code class=property>font-size</code>’.
11151124

11161125
<h2 id=changes><span class=secno>7. </span>Changes</h2>
11171126

@@ -1133,6 +1142,9 @@ <h3 id=changes-2012><span class=secno>7.1. </span>Changes Since the Media
11331142
identifier (i.e., other than <code>0</code>, <code>0px</code>,
11341143
<code>0em</code>, etc.)<ins> or the keyword ‘<code
11351144
class=property>none</code>’</ins>.
1145+
1146+
<li>The <a href="#hover">‘<code class=css>hover</code>’ media
1147+
feature</a> was added.
11361148
</ul>
11371149

11381150
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
@@ -1165,6 +1177,16 @@ <h3 class=no-num id=normative-references>Normative references</h3>
11651177
href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
11661178
</dd>
11671179
<!---->
1180+
1181+
<dt id=CSS3VAL>[CSS3VAL]
1182+
1183+
<dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
1184+
href="http://www.w3.org/TR/2012/WD-css3-values-20120308/"><cite>CSS
1185+
Values and Units Module Level 3.</cite></a> 8 March 2012. W3C Working
1186+
Draft. (Work in progress.) URL: <a
1187+
href="http://www.w3.org/TR/2012/WD-css3-values-20120308/">http://www.w3.org/TR/2012/WD-css3-values-20120308/</a>
1188+
</dd>
1189+
<!---->
11681190
</dl>
11691191
<!--end-normative-->
11701192

‎css4-mediaqueries/Overview.src.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -937,6 +937,33 @@ <h3 id="script">script</h3>
937937
<p>Only 0 and 1 are valid values. (This includes -0.) Thus everything else
938938
creates a malformed media query.</p>
939939

940+
<h3 id="hover">hover</h3>
941+
<div class="media-feature"><span class="label">Value:</span> &lt;integer&gt;<br>
942+
<span class="label">Applies to:</span> visual and tactile media types<br>
943+
<span class="label">Accepts min/max prefixes:</span> no<br>
944+
</div>
945+
946+
<p>The ''hover'' media feature is used to query whether primary pointing system
947+
used on the output device can hover or not. If it can, the value will be 1.
948+
Otherwise, the value will be 0.</p>
949+
950+
<p>If a device has multiple pointing systems, some of which support hovering
951+
and some of which not, it is recommended that the UA reports the hovering
952+
ability of the primary pointing system.</p>
953+
954+
<p class="note">
955+
The value of ''hover'' media query should for example be 0 on a touch screen
956+
device that can also be controlled via an optional mouse. Authors should
957+
therefore be careful not to assume that the ':hover' pseudo class will never
958+
match on device where 'hover:0' is true, but they should design layouts
959+
that do not depend on hovering to be fully usable.</p>
960+
961+
<p>For accessibility reasons, even on devices that do support hovering,
962+
the UA may give a value of 0 to this media query, to opt into layouts that work
963+
well without hovering.</p>
964+
965+
<p>Only 0 and 1 are valid values. (This includes -0.) Thus everything else
966+
creates a malformed media query.</p>
940967

941968
<h2 id="values">Values</h2>
942969

@@ -973,6 +1000,7 @@ <h3 id="changes-2012">Changes Since the Media Queries Level 3</h3>
9731000
for a value <var>x</var> other than zero or zero followed by a unit
9741001
identifier (i.e., other than <code>0</code>, <code>0px</code>,
9751002
<code>0em</code>, etc.)<ins> or the keyword 'none'</ins>.
1003+
<li>The <a href="#hover">''hover'' media feature</a> was added.
9761004
</ul>
9771005

9781006
<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>

0 commit comments

Comments
 (0)