[css3-conditional] Make examples represent slighty better practices.

Wed, 06 Feb 2013 23:47:11 -0800

author
L. David Baron <dbaron@dbaron.org>
date
Wed, 06 Feb 2013 23:47:11 -0800
changeset 7381
06244e910e27
parent 7380
790a542ad0d1
child 7382
6e5d9a1539bd

[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

mercurial