csswg/css3-conditional Overview.html,1.5,1.6 Overview.src.html,1.5,1.6

Update of /sources/public/csswg/css3-conditional
In directory hutz:/tmp/cvs-serv24103

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Flesh out @supports examples.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-conditional/Overview.html,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -d -r1.5 -r1.6
--- Overview.html	5 Jun 2011 19:53:36 -0000	1.5
+++ Overview.html	6 Jun 2011 16:57:31 -0000	1.6
@@ -17,13 +17,13 @@
 
    <h1>CSS Conditional Rules Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 June 2011</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 June 2011</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><a href="http://www.w3.org/TR/2011/ED-css3-conditional-20110605/">
-     http://www.w3.org/TR/2011/ED-css3-conditional-20110605</a>
+    <dd><a href="http://www.w3.org/TR/2011/ED-css3-conditional-20110606/">
+     http://www.w3.org/TR/2011/ED-css3-conditional-20110606</a>
 
     <dt>Latest version:
 
@@ -571,21 +571,59 @@
   <p>and the condition of the <code>@supports</code> rule is the condition
    thus described for the <code>supports_rule</code> term.
 
-  <p class=issue>Describe these examples.
+  <div class=example>
+   <p>For example, the following rule</p>
 
-  <pre class=example>@supports ( display: flex ) {
-  ...
+   <pre>@supports ( display: flexbox ) {
+  body, #navigation, #content { display: flexbox; }
+  #navigation { background: blue; color: white; }
+  #article { background: white; color: black; }
 }</pre>
 
-  <pre class=example>@supports ( -moz-box-shadow: 2px 2px 2px black ) or
-          ( -webkit-box-shadow: 2px 2px 2px black ) or
-          ( -o-box-shadow: 2px 2px 2px black ) {
-  ...
+   <p>applies the rules inside the <code>@supports</code> rule only when
+    <code>display: flexbox</code> is supported.</p>
+  </div>
+
+  <div class=example>
+   <p>The following example shows an additional &lsquo;<code
+    class=css>@supports</code>&rsquo; rule that can be used to provide an
+    alternative for when &lsquo;<code class=css>display:
+    flexbox</code>&rsquo; is not supported:</p>
+
+   <pre>@supports not ( display: flexbox ) {
+  body { width: 100%; height: 100%; background: white; color: black; }
+  #navigation { width: 25%; }
+  #article { width: 75%; }
 }</pre>
 
-  <pre class=example>@supports not ( display: flex ) {
-  ...
+   <p>Note that the &lsquo;<code class=property>width</code>&rsquo;
+    declarations may be harmful to the flexbox-based layout, so it is
+    important that they be present only in the non-flexbox styles.</p>
+  </div>
+
+  <div class=example>
+   <p>The following example checks for support for the &lsquo;<code
+    class=property>box-shadow</code>&rsquo; property, including checking for
+    support for vendor-prefixed versions of it. When the support is present,
+    it specifies both &lsquo;<code class=property>box-shadow</code>&rsquo;
+    (with the prefixed versions) and &lsquo;<code
+    class=property>color</code>&rsquo; in a way what would cause the text to
+    become invisible were &lsquo;<code
+    class=property>box-shadow</code>&rsquo; not supported.</p>
+
+   <pre>@supports ( box-shadow: 2px 2px 2px black ) or
+          ( -moz-box-shadow: 2px 2px 2px black ) or
+          ( -webkit-box-shadow: 2px 2px 2px black ) or
+          ( -o-box-shadow: 2px 2px 2px black ) {
+  .outline {
+    color: white;
+    box-shadow: 2px 2px 2px black;
+    -moz-box-shadow: 2px 2px 2px black;
+    -webkit-box-shadow: 2px 2px 2px black;
+    -o-box-shadow: 2px 2px 2px black;
+  }
 }</pre>
+  </div>
 
   <p>To avoid confusion between and and or, the syntax requires that both and
    and or be specified explicitly (rather than, say, using commas or spaces

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-conditional/Overview.src.html,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -d -r1.5 -r1.6
--- Overview.src.html	5 Jun 2011 19:53:36 -0000	1.5
+++ Overview.src.html	6 Jun 2011 16:57:31 -0000	1.6
@@ -413,21 +413,49 @@
 <p>and the condition of the <code>@supports</code> rule is the
 condition thus described for the <code>supports_rule</code> term.</p>
 
-<p class="issue">Describe these examples.</p>
+<div class="example">
+<p>For example, the following rule</p>
+<pre>@supports ( display: flexbox ) {
+  body, #navigation, #content { display: flexbox; }
+  #navigation { background: blue; color: white; }
+  #article { background: white; color: black; }
+}</pre>
+<p>applies the rules inside the <code>@supports</code> rule only when
+<code>display: flexbox</code> is supported.</p>
+</div>
 
-<pre class="example">@supports ( display: flex ) {
-  ...
+<div class="example">
+<p>The following example shows an additional '@supports' rule that can
+be used to provide an alternative for when ''display: flexbox'' is not
+supported:</p>
+<pre>@supports not ( display: flexbox ) {
+  body { width: 100%; height: 100%; background: white; color: black; }
+  #navigation { width: 25%; }
+  #article { width: 75%; }
 }</pre>
+<p>Note that the 'width' declarations may be harmful to the
+flexbox-based layout, so it is important that they be present only in
+the non-flexbox styles.</p>
+</div>
 
-<pre class="example">@supports ( -moz-box-shadow: 2px 2px 2px black ) or
+<div class="example">
+<p>The following example checks for support for the 'box-shadow'
+property, including checking for support for vendor-prefixed versions of
+it.  When the support is present, it specifies both 'box-shadow' (with
+the prefixed versions) and 'color' in a way what would cause the text to
+become invisible were 'box-shadow' not supported.</p>
+<pre>@supports ( box-shadow: 2px 2px 2px black ) or
+          ( -moz-box-shadow: 2px 2px 2px black ) or
           ( -webkit-box-shadow: 2px 2px 2px black ) or
           ( -o-box-shadow: 2px 2px 2px black ) {
-  ...
-}</pre>
-
-<pre class="example">@supports not ( display: flex ) {
-  ...
-}</pre>
+  .outline {
+    color: white;
+    box-shadow: 2px 2px 2px black;
+    -moz-box-shadow: 2px 2px 2px black;
+    -webkit-box-shadow: 2px 2px 2px black;
+    -o-box-shadow: 2px 2px 2px black;
+  }
+}</pre></div>
 
 <p>To avoid confusion between and and or, the syntax requires that both
 and and or be specified explicitly (rather than, say, using commas or

Received on Monday, 6 June 2011 16:57:35 UTC