Skip to content

Commit c91f7b6

Browse files
dbarondbaron
committed
Flesh out @supports examples.
1 parent 5d54553 commit c91f7b6

2 files changed

Lines changed: 88 additions & 22 deletions

File tree

‎css3-conditional/Overview.html‎

Lines changed: 50 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@
1717

1818
<h1>CSS Conditional Rules Module Level 3</h1>
1919

20-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 June 2011</h2>
20+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 June 2011</h2>
2121

2222
<dl>
2323
<dt>This version:
2424

25-
<dd><a href="http://www.w3.org/TR/2011/ED-css3-conditional-20110605/">
26-
http://www.w3.org/TR/2011/ED-css3-conditional-20110605</a>
25+
<dd><a href="http://www.w3.org/TR/2011/ED-css3-conditional-20110606/">
26+
http://www.w3.org/TR/2011/ED-css3-conditional-20110606</a>
2727

2828
<dt>Latest version:
2929

@@ -571,21 +571,59 @@ <h2 id=at-supports><span class=secno>5. </span>Feature queries: the
571571
<p>and the condition of the <code>@supports</code> rule is the condition
572572
thus described for the <code>supports_rule</code> term.
573573

574-
<p class=issue>Describe these examples.
574+
<div class=example>
575+
<p>For example, the following rule</p>
575576

576-
<pre class=example>@supports ( display: flex ) {
577-
...
577+
<pre>@supports ( display: flexbox ) {
578+
body, #navigation, #content { display: flexbox; }
579+
#navigation { background: blue; color: white; }
580+
#article { background: white; color: black; }
578581
}</pre>
579582

580-
<pre class=example>@supports ( -moz-box-shadow: 2px 2px 2px black ) or
581-
( -webkit-box-shadow: 2px 2px 2px black ) or
582-
( -o-box-shadow: 2px 2px 2px black ) {
583-
...
583+
<p>applies the rules inside the <code>@supports</code> rule only when
584+
<code>display: flexbox</code> is supported.</p>
585+
</div>
586+
587+
<div class=example>
588+
<p>The following example shows an additional &lsquo;<code
589+
class=css>@supports</code>&rsquo; rule that can be used to provide an
590+
alternative for when &lsquo;<code class=css>display:
591+
flexbox</code>&rsquo; is not supported:</p>
592+
593+
<pre>@supports not ( display: flexbox ) {
594+
body { width: 100%; height: 100%; background: white; color: black; }
595+
#navigation { width: 25%; }
596+
#article { width: 75%; }
584597
}</pre>
585598

586-
<pre class=example>@supports not ( display: flex ) {
587-
...
599+
<p>Note that the &lsquo;<code class=property>width</code>&rsquo;
600+
declarations may be harmful to the flexbox-based layout, so it is
601+
important that they be present only in the non-flexbox styles.</p>
602+
</div>
603+
604+
<div class=example>
605+
<p>The following example checks for support for the &lsquo;<code
606+
class=property>box-shadow</code>&rsquo; property, including checking for
607+
support for vendor-prefixed versions of it. When the support is present,
608+
it specifies both &lsquo;<code class=property>box-shadow</code>&rsquo;
609+
(with the prefixed versions) and &lsquo;<code
610+
class=property>color</code>&rsquo; in a way what would cause the text to
611+
become invisible were &lsquo;<code
612+
class=property>box-shadow</code>&rsquo; not supported.</p>
613+
614+
<pre>@supports ( box-shadow: 2px 2px 2px black ) or
615+
( -moz-box-shadow: 2px 2px 2px black ) or
616+
( -webkit-box-shadow: 2px 2px 2px black ) or
617+
( -o-box-shadow: 2px 2px 2px black ) {
618+
.outline {
619+
color: white;
620+
box-shadow: 2px 2px 2px black;
621+
-moz-box-shadow: 2px 2px 2px black;
622+
-webkit-box-shadow: 2px 2px 2px black;
623+
-o-box-shadow: 2px 2px 2px black;
624+
}
588625
}</pre>
626+
</div>
589627

590628
<p>To avoid confusion between and and or, the syntax requires that both and
591629
and or be specified explicitly (rather than, say, using commas or spaces

‎css3-conditional/Overview.src.html‎

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -413,21 +413,49 @@ <h2 id="at-supports">Feature queries: the <code>@supports</code> rule</h2>
413413
<p>and the condition of the <code>@supports</code> rule is the
414414
condition thus described for the <code>supports_rule</code> term.</p>
415415

416-
<p class="issue">Describe these examples.</p>
416+
<div class="example">
417+
<p>For example, the following rule</p>
418+
<pre>@supports ( display: flexbox ) {
419+
body, #navigation, #content { display: flexbox; }
420+
#navigation { background: blue; color: white; }
421+
#article { background: white; color: black; }
422+
}</pre>
423+
<p>applies the rules inside the <code>@supports</code> rule only when
424+
<code>display: flexbox</code> is supported.</p>
425+
</div>
417426

418-
<pre class="example">@supports ( display: flex ) {
419-
...
427+
<div class="example">
428+
<p>The following example shows an additional '@supports' rule that can
429+
be used to provide an alternative for when ''display: flexbox'' is not
430+
supported:</p>
431+
<pre>@supports not ( display: flexbox ) {
432+
body { width: 100%; height: 100%; background: white; color: black; }
433+
#navigation { width: 25%; }
434+
#article { width: 75%; }
420435
}</pre>
436+
<p>Note that the 'width' declarations may be harmful to the
437+
flexbox-based layout, so it is important that they be present only in
438+
the non-flexbox styles.</p>
439+
</div>
421440

422-
<pre class="example">@supports ( -moz-box-shadow: 2px 2px 2px black ) or
441+
<div class="example">
442+
<p>The following example checks for support for the 'box-shadow'
443+
property, including checking for support for vendor-prefixed versions of
444+
it. When the support is present, it specifies both 'box-shadow' (with
445+
the prefixed versions) and 'color' in a way what would cause the text to
446+
become invisible were 'box-shadow' not supported.</p>
447+
<pre>@supports ( box-shadow: 2px 2px 2px black ) or
448+
( -moz-box-shadow: 2px 2px 2px black ) or
423449
( -webkit-box-shadow: 2px 2px 2px black ) or
424450
( -o-box-shadow: 2px 2px 2px black ) {
425-
...
426-
}</pre>
427-
428-
<pre class="example">@supports not ( display: flex ) {
429-
...
430-
}</pre>
451+
.outline {
452+
color: white;
453+
box-shadow: 2px 2px 2px black;
454+
-moz-box-shadow: 2px 2px 2px black;
455+
-webkit-box-shadow: 2px 2px 2px black;
456+
-o-box-shadow: 2px 2px 2px black;
457+
}
458+
}</pre></div>
431459

432460
<p>To avoid confusion between and and or, the syntax requires that both
433461
and and or be specified explicitly (rather than, say, using commas or

0 commit comments

Comments
 (0)