Wed, 06 Feb 2013 23:47:11 -0800
[css3-conditional] Make examples represent slighty better practices.
Addresses issue raised in
http://lists.w3.org/Archives/Public/www-style/2012Dec/0224.html
which is issue 1 in the LCWD disposition of comments.
css3-conditional/Overview.html | file | annotate | diff | comparison | revisions | |
css3-conditional/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-conditional/Overview.html Wed Feb 06 23:24:18 2013 -0800 1.2 +++ b/css3-conditional/Overview.html Wed Feb 06 23:47:11 2013 -0800 1.3 @@ -12,11 +12,11 @@ 1.4 rel=dcterms.rights> 1.5 <meta content="CSS Conditional Rules Module Level 3" name=dcterms.title> 1.6 <meta content=text name=dcterms.type> 1.7 - <meta content=2013-02-06 name=dcterms.issued> 1.8 + <meta content=2013-02-07 name=dcterms.issued> 1.9 <meta content="http://dev.w3.org/csswg/css3-conditional/" 1.10 name=dcterms.creator> 1.11 <meta content=W3C name=dcterms.publisher> 1.12 - <meta content="http://www.w3.org/TR/2013/ED-css3-conditional-20130206/" 1.13 + <meta content="http://www.w3.org/TR/2013/ED-css3-conditional-20130207/" 1.14 name=dcterms.identifier> 1.15 <link href="../default.css" rel=stylesheet type="text/css"> 1.16 <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> 1.17 @@ -33,14 +33,14 @@ 1.18 1.19 <h1>CSS Conditional Rules Module Level 3</h1> 1.20 1.21 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 February 1.22 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 7 February 1.23 2013</h2> 1.24 1.25 <dl> 1.26 <dt>This version: 1.27 1.28 - <dd><a href="http://www.w3.org/TR/2013/ED-css3-conditional-20130206/"> 1.29 - http://www.w3.org/TR/2013/ED-css3-conditional-20130206/</a> 1.30 + <dd><a href="http://www.w3.org/TR/2013/ED-css3-conditional-20130207/"> 1.31 + http://www.w3.org/TR/2013/ED-css3-conditional-20130207/</a> 1.32 1.33 <dt>Latest version: 1.34 1.35 @@ -364,6 +364,7 @@ 1.36 <p>For example, this rule: 1.37 1.38 <pre>@media print { 1.39 + /* hide navigation controls when printing */ 1.40 #navigation { display: none } 1.41 }</pre> 1.42 1.43 @@ -386,8 +387,10 @@ 1.44 1.45 <div class=example>For example, with this set of nested rules: 1.46 <pre>@media print { // rule (1) 1.47 + /* hide navigation controls when printing */ 1.48 #navigation { display: none } 1.49 @media (max-width: 12cm) { // rule (2) 1.50 + /* keep notes in flow when printing to narrow pages */ 1.51 .note { float: none } 1.52 } 1.53 }</pre> 1.54 @@ -496,15 +499,18 @@ 1.55 <div class=example> 1.56 <p>This ‘<code class=css>@media</code>’ rule: 1.57 1.58 - <pre>@media print, (max-width: 600px) { 1.59 - #extra_navigation { display: none } 1.60 + <pre>@media screen and (min-width: 35em), 1.61 + print and (min-width: 40em) { 1.62 + #section_navigation { float: left; width: 10em; } 1.63 }</pre> 1.64 1.65 - <p>has the condition ‘<code class=css>print, (max-width: 1.66 - 600px)</code>’, which is true for print media and for devices whose 1.67 - width is at most 600px. When either of these is true, the condition of 1.68 - the rule is true, and the rule ‘<code class=css>#extra_navigation { 1.69 - display: none }</code>’ is applied. 1.70 + <p>has the condition ‘<code class=css>screen and (min-width: 35em), 1.71 + print and (min-width: 40em)</code>’, which is true for screen displays 1.72 + whose viewport is at least 35 times the initial font size and for print 1.73 + displays whose viewport is at least 40 times the initial font size. When 1.74 + either of these is true, the condition of the rule is true, and the rule 1.75 + ‘<code class=css>#section_navigation { float: left; width: 10em; 1.76 + }</code>’ is applied. 1.77 </div> 1.78 1.79 <p>In terms of the grammar, this specification extends the <a
2.1 --- a/css3-conditional/Overview.src.html Wed Feb 06 23:24:18 2013 -0800 2.2 +++ b/css3-conditional/Overview.src.html Wed Feb 06 23:47:11 2013 -0800 2.3 @@ -193,6 +193,7 @@ 2.4 <div class="example"> 2.5 <p>For example, this rule:</p> 2.6 <pre>@media print { 2.7 + /* hide navigation controls when printing */ 2.8 #navigation { display: none } 2.9 }</pre> 2.10 <p>causes a particular CSS rule (making elements with ID "navigation" be 2.11 @@ -215,8 +216,10 @@ 2.12 2.13 <div class="example">For example, with this set of nested rules: 2.14 <pre>@media print { // rule (1) 2.15 + /* hide navigation controls when printing */ 2.16 #navigation { display: none } 2.17 @media (max-width: 12cm) { // rule (2) 2.18 + /* keep notes in flow when printing to narrow pages */ 2.19 .note { float: none } 2.20 } 2.21 }</pre> 2.22 @@ -308,13 +311,21 @@ 2.23 2.24 <div class="example"> 2.25 <p>This '@media' rule:</p> 2.26 -<pre>@media print, (max-width: 600px) { 2.27 - #extra_navigation { display: none } 2.28 +<pre>@media screen and (min-width: 35em), 2.29 + print and (min-width: 40em) { 2.30 + #section_navigation { float: left; width: 10em; } 2.31 }</pre> 2.32 -<p>has the condition ''print, (max-width: 600px)'', which is 2.33 -true for print media and for devices whose width is at most 600px. When 2.34 -either of these is true, the condition of the rule is true, and the rule 2.35 -''#extra_navigation { display: none }'' is applied. 2.36 +<p>has the condition 2.37 +''screen and (min-width: 35em), print and (min-width: 40em)'', 2.38 +which is true for screen displays 2.39 +whose viewport is at least 35 times the initial font size 2.40 +and for print displays 2.41 +whose viewport is at least 40 times the initial font size. 2.42 +When either of these is true, 2.43 +the condition of the rule is true, 2.44 +and the rule 2.45 +''#section_navigation { float: left; width: 10em; }'' 2.46 +is applied.</p> 2.47 </div> 2.48 2.49 <p>In terms of the grammar, this specification extends the