hixie: Example of <details> with CSS. (whatwg r6464)

hixie: Example of <details> with CSS. (whatwg r6464)

http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.5165&r2=1.5166&f=h
http://html5.org/tools/web-apps-tracker?from=6463&to=6464

===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.5165
retrieving revision 1.5166
diff -u -d -r1.5165 -r1.5166
--- Overview.html 15 Aug 2011 20:59:50 -0000 1.5165
+++ Overview.html 15 Aug 2011 21:46:52 -0000 1.5166
@@ -40516,6 +40516,25 @@
    controls can change, and not the actual values, which is less than
    ideal.</p>
 
+  </div><div class="example">
+
+   <p>Because the <code title="attr-details-open"><a href="#attr-details-open">open</a></code>
+   attribute is added and removed automatically as the user interacts
+   with the control, it can be used in CSS to style the element
+   differently based on its state. Here, a stylesheet is used to
+   animate the color of the summary when the element is opened or
+   closed:</p>
+
+   <pre>&lt;style&gt;
+ details &gt; summary { transition: color 1s; color: black; }
+ details[open] &gt; summary { color: red; }
+&lt;/style&gt;
+&lt;details&gt;
+ &lt;summary&gt;Automated Status: Operational&lt;/summary&gt;
+ &lt;p&gt;Velocity: 12m/s&lt;/p&gt;
+ &lt;p&gt;Direction: North&lt;/p&gt;
+&lt;/details&gt;</pre>
+
   </div><h4 id="the-summary-element"><span class="secno">4.11.2 </span>The <dfn><code>summary</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
    <dd>None.</dd>
    <dt>Contexts in which this element can be used:</dt>

Received on Monday, 15 August 2011 21:47:04 UTC