[mediaqueries] Explain what the media feature 'type' is.

Author: tabatkins

mediaqueries/Overview.html

@@ -54,7 +54,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>Media Queries Level 4</h1>
   <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20131110>10 November 2013</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20131112>12 November 2013</span></span></span></h2>
   <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/mediaqueries4/>http://dev.w3.org/csswg/mediaqueries4/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/mediaqueries4/>http://dev.w3.org/csswg/mediaqueries4/</a>
     <dt>Feedback:</dt>
         <dd><a href="mailto:www-style@w3.org?subject=%5Bmediaqueries%5D%20feedback">www-style@w3.org</a>
@@ -117,7 +117,8 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
 Negating a Media Query: the <span class=css data-link-type=maybe title=not>not</span> keyword</a><li><a href=#mq-only><span class=secno>2.2.2</span>
 Hiding a Media Query From Legacy User Agents: the <span class=css data-link-type=maybe title=only>only</span> keyword</a></ul><li><a href=#media-types><span class=secno>2.3</span>
 Media Types</a><li><a href=#mq-features><span class=secno>2.4</span>
-Media Features</a><ul class=toc><li><a href=#mq-boolean-context><span class=secno>2.4.1</span>
+Media Features</a><ul class=toc><li><a href=#mq-ranges><span class=secno>2.4.1</span>
+Media Feature Types: “range” and “discrete”</a><li><a href=#mq-boolean-context><span class=secno>2.4.2</span>
 Evaluating A Media Feature in a Boolean Context</a></ul></ul><li><a href=#mq-syntax><span class=secno>3</span>
 Syntax</a><ul class=toc><li><a href=#error-handling><span class=secno>3.1</span>
 Error Handling</a></ul><li><a href=#media-features><span class=secno>4</span>
@@ -592,7 +593,45 @@ <h3 class="heading settled heading" data-level=2.4 id=mq-features><span class=se
         rel="stylesheet" href="example.css"&gt;
 </pre>	</div>
 
-<h4 class="heading settled heading" data-level=2.4.1 id=mq-boolean-context><span class=secno>2.4.1 </span><span class=content>
+<h4 class="heading settled heading" data-level=2.4.1 id=mq-ranges><span class=secno>2.4.1 </span><span class=content>
+Media Feature Types: “range” and “discrete”</span><a class=self-link href=#mq-ranges></a></h4>
+
+<p>	Every media feature defines its “type” as either “range” or “discrete” in its definition table.
+
+<p>	“Discrete” media features,
+	like <a class=property data-link-type=propdesc href=#descdef-luminosity title=luminosity>luminosity</a> or <a class=property data-link-type=propdesc href=#descdef-script title=script>script</a>,
+	take their values from a set.
+	The values may be keywords
+	or boolean numbers (0 and 1),
+	but the common factor is that there’s no intrinsic “order” to them—<wbr></wbr>none of the values are “less than” or “greater than” each other.
+
+<p>	“Range” media features like <a class=property data-link-type=propdesc href=#descdef-width title=width>width</a>, on the other hand,
+	take their values from a range.
+	Any two values can be compared to see which is lesser and which is greater.
+
+<p>	The only significant difference between the two types is that “range” <a data-link-type=dfn href=#media-feature title="media features">media features</a>
+	accept “min-” and “max-” prefixes on their name.
+	Adding one of these prefixes changes the meaning—<wbr></wbr>rather than the <a data-link-type=dfn href=#media-feature title="media feature">media feature</a> being true when the feature exactly matches the given value,
+	it matches when the feature is greater/less than or equal to the given value.
+
+	<div class=example>
+		A <span class=css data-link-type=maybe title="(min-width: 600px)">(min-width: 600px)</span> <a data-link-type=dfn href=#media-feature title="media feature">media feature</a> is true
+		when the viewport’s width is <span class=css data-link-type=maybe title=600px>600px</span> <em>or more</em>.
+
+<p>		On the other hand, <span class=css data-link-type=maybe title="(width: 600px)">(width: 600px)</span> by itself is only true
+		when the viewport’s width is <em>exactly</em> <span class=css data-link-type=maybe title=600px>600px</span>.
+		If it’s less or greater than <span class=css data-link-type=maybe title=600px>600px</span>, it’ll be false.
+	</div>
+
+	<div class=example>
+		On the other hand,
+		<span class=css data-link-type=maybe title="(min-script: 1)">(min-script: 1)</span> is invalid,
+		because <a class=property data-link-type=propdesc href=#descdef-script title=script>script</a> is a “discrete” <a data-link-type=dfn href=#media-feature title="media feature">media feature</a>,
+		and so doesn’t accept the prefixes.
+		(Even though the <a class=property data-link-type=propdesc href=#descdef-script title=script>script</a> <a data-link-type=dfn href=#media-feature title="media feature">media feature</a> appears to be numeric.)
+	</div>
+
+<h4 class="heading settled heading" data-level=2.4.2 id=mq-boolean-context><span class=secno>2.4.2 </span><span class=content>
 Evaluating A Media Feature in a Boolean Context</span><a class=self-link href=#mq-boolean-context></a></h4>
 
 <p>	While <a data-link-type=dfn href=#media-feature title="media features">media features</a> normally have a syntax similar to CSS properties,
@@ -1460,7 +1499,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>all, <a href=#valuedef-all title="section 2.3">2.3</a>
 <li>aspect-ratio, <a href=#descdef-aspect-ratio title="section 4.6">4.6</a>
 <li>aural, <a href=#valuedef-aural title="section 2.3">2.3</a>
-<li>boolean context, <a href=#boolean-context title="section 2.4.1">2.4.1</a>
+<li>boolean context, <a href=#boolean-context title="section 2.4.2">2.4.2</a>
 <li>braille, <a href=#valuedef-braille title="section 2.3">2.3</a>
 <li>coarse, <a href=#valuedef-coarse title="section 4.15">4.15</a>
 <li>color, <a href=#descdef-color title="section 4.8">4.8</a>

mediaqueries/Overview.src.html

@@ -391,6 +391,46 @@ <h3 id='mq-features'>
 		</pre>
 	</div>
 
+<h4 id='mq-ranges'>
+Media Feature Types: “range” and “discrete”</h4>
+
+	Every media feature defines its “type” as either “range” or “discrete” in its definition table.
+
+	“Discrete” media features,
+	like 'luminosity' or 'script',
+	take their values from a set.
+	The values may be keywords
+	or boolean numbers (0 and 1),
+	but the common factor is that there's no intrinsic “order” to them--
+	none of the values are “less than” or “greater than” each other.
+
+	“Range” media features like 'width', on the other hand,
+	take their values from a range.
+	Any two values can be compared to see which is lesser and which is greater.
+
+	The only significant difference between the two types is that “range” <a>media features</a>
+	accept “min-” and “max-” prefixes on their name.
+	Adding one of these prefixes changes the meaning--
+	rather than the <a>media feature</a> being true when the feature exactly matches the given value,
+	it matches when the feature is greater/less than or equal to the given value.
+
+	<div class='example'>
+		A ''(min-width: 600px)'' <a>media feature</a> is true
+		when the viewport's width is ''600px'' <em>or more</em>.
+
+		On the other hand, ''(width: 600px)'' by itself is only true
+		when the viewport's width is <em>exactly</em> ''600px''.
+		If it's less or greater than ''600px'', it'll be false.
+	</div>
+
+	<div class='example'>
+		On the other hand,
+		''(min-script: 1)'' is invalid,
+		because 'script' is a “discrete” <a>media feature</a>,
+		and so doesn't accept the prefixes.
+		(Even though the 'script' <a>media feature</a> appears to be numeric.)
+	</div>
+
 <h4 id='mq-boolean-context'>
 Evaluating A Media Feature in a Boolean Context</h4>