CINXE.COM
drafts: diff css-pseudo-4/Overview.bs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="icon" href="/drafts/static/hgicon.png" type="image/png" /> <meta name="robots" content="index, nofollow"/> <link rel="stylesheet" href="/drafts/static/style-monoblue.css" type="text/css" /> <script type="text/javascript" src="/drafts/static/mercurial.js"></script> <title>drafts: diff css-pseudo-4/Overview.bs</title> <link rel="alternate" type="application/atom+xml" href="/drafts/atom-log" title="Atom feed for drafts"/> <link rel="alternate" type="application/rss+xml" href="/drafts/rss-log" title="RSS feed for drafts"/> </head> <body> <div id="container"> <div class="page-header"> <h1 class="breadcrumb"><a href="/">Mercurial</a> > <a href="/drafts">drafts</a> / file diff</h1> <form action="/drafts/log"> <dl class="search"> <dt><label>Search: </label></dt> <dd><input type="text" name="rev" /></dd> </dl> </form> <ul class="page-nav"> <li><a href="/drafts/summary">summary</a></li> <li><a href="/drafts/shortlog">shortlog</a></li> <li><a href="/drafts/log">changelog</a></li> <li><a href="/drafts/graph/2c59015f61ee">graph</a></li> <li><a href="/drafts/tags">tags</a></li> <li><a href="/drafts/bookmarks">bookmarks</a></li> <li><a href="/drafts/branches">branches</a></li> <li><a href="/drafts/file/2c59015f61ee">files</a></li> <li><a href="/drafts/help">help</a></li> </ul> </div> <ul class="submenu"> <li><a href="/drafts/file/2c59015f61ee/css-pseudo-4/Overview.bs">file</a></li> <li><a href="/drafts/log/2c59015f61ee/css-pseudo-4/Overview.bs">revisions</a></li> <li><a href="/drafts/annotate/2c59015f61ee/css-pseudo-4/Overview.bs">annotate</a></li> <li class="current">diff</li> <li><a href="/drafts/comparison/2c59015f61ee/css-pseudo-4/Overview.bs">comparison</a></li> <li><a href="/drafts/raw-diff/2c59015f61ee/css-pseudo-4/Overview.bs">raw</a></li> </ul> <h2 class="no-link no-border">diff: css-pseudo-4/Overview.bs</h2> <h3 class="changeset">css-pseudo-4/Overview.bs</h3> <dl class="overview"> <dt>changeset 31265</dt> <dd><a href="/drafts/rev/2c59015f61ee">2c59015f61ee</a></dd> <dt>parent 31264</dt> <dd><a href="/drafts/diff/b470c6a4aafa/css-pseudo-4/Overview.bs">b470c6a4aafa</a></dd> <dt>child 31269</dt> <dd><a href="/drafts/diff/24f6bda9217c/css-pseudo-4/Overview.bs">24f6bda9217c</a></dd> </dl> <div class="diff"> <pre><span style="color:#cc0000;"><a class="linenr" href="#l1.1" id="l1.1"> 1.1</a> --- a/css-pseudo-4/Overview.bs Thu May 30 10:35:10 2024 -0700 </span><span style="color:#008800;"><a class="linenr" href="#l1.2" id="l1.2"> 1.2</a> +++ b/css-pseudo-4/Overview.bs Thu May 30 16:40:09 2024 -0400 </span><span style="color:#990099;"><a class="linenr" href="#l1.3" id="l1.3"> 1.3</a> @@ -1310,6 +1310,33 @@ </span><span><a class="linenr" href="#l1.4" id="l1.4"> 1.4</a> <pre class="lang-css">::file-selector-button { border: 3px solid green }</pre> </span><span><a class="linenr" href="#l1.5" id="l1.5"> 1.5</a> </div> </span><span><a class="linenr" href="#l1.6" id="l1.6"> 1.6</a> </span><span style="color:#008800;"><a class="linenr" href="#l1.7" id="l1.7"> 1.7</a> +<h3 id="details-content-pseudo"> </span><span style="color:#008800;"><a class="linenr" href="#l1.8" id="l1.8"> 1.8</a> +Expandable contents of details element: the ''::details-content'' pseudo-element</h3> </span><span style="color:#008800;"><a class="linenr" href="#l1.9" id="l1.9"> 1.9</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.10" id="l1.10"> 1.10</a> + The <dfn>::details-content</dfn> pseudo-element targets </span><span style="color:#008800;"><a class="linenr" href="#l1.11" id="l1.11"> 1.11</a> + the additional information in a a <{details}> element </span><span style="color:#008800;"><a class="linenr" href="#l1.12" id="l1.12"> 1.12</a> + that can be expanded or collapsed. </span><span style="color:#008800;"><a class="linenr" href="#l1.13" id="l1.13"> 1.13</a> + It is a [=part-like pseudo-element=]. </span><span style="color:#008800;"><a class="linenr" href="#l1.14" id="l1.14"> 1.14</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.15" id="l1.15"> 1.15</a> + There is no restriction on which properties apply to the </span><span style="color:#008800;"><a class="linenr" href="#l1.16" id="l1.16"> 1.16</a> + ''::details-content'' pseudo-element. </span><span style="color:#008800;"><a class="linenr" href="#l1.17" id="l1.17"> 1.17</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.18" id="l1.18"> 1.18</a> + <div class="example" id="details-content-example"> </span><span style="color:#008800;"><a class="linenr" href="#l1.19" id="l1.19"> 1.19</a> + For example, the following example would </span><span style="color:#008800;"><a class="linenr" href="#l1.20" id="l1.20"> 1.20</a> + animate the opacity of the additional information </span><span style="color:#008800;"><a class="linenr" href="#l1.21" id="l1.21"> 1.21</a> + when the <{details}> element opens: </span><span style="color:#008800;"><a class="linenr" href="#l1.22" id="l1.22"> 1.22</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.23" id="l1.23"> 1.23</a> + <pre class="lang-css">details::details-content { </span><span style="color:#008800;"><a class="linenr" href="#l1.24" id="l1.24"> 1.24</a> + opacity: 0; </span><span style="color:#008800;"><a class="linenr" href="#l1.25" id="l1.25"> 1.25</a> + transition: content-visibility 300ms allow-discrete step-end, opacity 300ms; </span><span style="color:#008800;"><a class="linenr" href="#l1.26" id="l1.26"> 1.26</a> +} </span><span style="color:#008800;"><a class="linenr" href="#l1.27" id="l1.27"> 1.27</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.28" id="l1.28"> 1.28</a> +details[open]::details-content { </span><span style="color:#008800;"><a class="linenr" href="#l1.29" id="l1.29"> 1.29</a> + opacity: 1; </span><span style="color:#008800;"><a class="linenr" href="#l1.30" id="l1.30"> 1.30</a> + transition: content-visibility 300ms allow-discrete step-start, opacity 300ms; </span><span style="color:#008800;"><a class="linenr" href="#l1.31" id="l1.31"> 1.31</a> +}</pre> </span><span style="color:#008800;"><a class="linenr" href="#l1.32" id="l1.32"> 1.32</a> + </div> </span><span style="color:#008800;"><a class="linenr" href="#l1.33" id="l1.33"> 1.33</a> + </span><span><a class="linenr" href="#l1.34" id="l1.34"> 1.34</a> <h2 id="interactions"> </span><span><a class="linenr" href="#l1.35" id="l1.35"> 1.35</a> Overlapping Pseudo-element Interactions</h2> </span><span><a class="linenr" href="#l1.36" id="l1.36"> 1.36</a> </span></pre> </div> <script type="text/javascript">process_dates()</script> <div class="page-footer"> <p>Mercurial Repository: drafts</p> <ul class="rss-logo"> <li><a href="/drafts/rss-log">RSS</a></li> <li><a href="/drafts/atom-log">Atom</a></li> </ul> </div> <div id="powered-by"> <p><a href="http://mercurial.selenic.com/" title="Mercurial"><img src="/drafts/static/hglogo.png" width=75 height=90 border=0 alt="mercurial"></a></p> </div> <div id="corner-top-left"></div> <div id="corner-top-right"></div> <div id="corner-bottom-left"></div> <div id="corner-bottom-right"></div> </div> </body> </html>