CINXE.COM
drafts: changeset 31816:edbd9dab707c
<!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: changeset 31816:edbd9dab707c</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> / changeset</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/changelog">changelog</a></li> <li><a href="/drafts/graph/edbd9dab707c">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/edbd9dab707c">files</a></li> <li><a href="/drafts/help">help</a></li> </ul> </div> <ul class="submenu"> <li class="current">changeset</li> <li><a href="/drafts/raw-rev/edbd9dab707c">raw</a> </li> </ul> <h2 class="no-link no-border">changeset</h2> <h3 class="changeset"><a href="/drafts/raw-rev/edbd9dab707c">[css-overflow-5] Temporarily go with :target-current. #10918 <span class="logtags"></span></a></h3> <p class="changeset-age age">Tue, 19 Nov 2024 13:16:44 -0800</p> <dl class="overview"> <dt>author</dt> <dd>Tab Atkins-Bittner <jackalmage@gmail.com></dd> <dt>date</dt> <dd>Tue, 19 Nov 2024 13:16:44 -0800</dd> <dt>changeset 31816</dt> <dd>edbd9dab707c</dd> <dt>parent 31815</dt> <dd><a href="/drafts/rev/1316f99036cb">1316f99036cb</a></dd> <dt>child 31817</dt> <dd><a href="/drafts/rev/8f230925993d">8f230925993d</a></dd> </dl> <p class="description">[css-overflow-5] Temporarily go with :target-current. #10918</p> <table> <tr class="parity0"> <td><a href="/drafts/diff/edbd9dab707c/css-overflow-5/Overview.bs">css-overflow-5/Overview.bs</a></td> <td></td> <td> <a href="/drafts/file/edbd9dab707c/css-overflow-5/Overview.bs">file</a> | <a href="/drafts/annotate/edbd9dab707c/css-overflow-5/Overview.bs">annotate</a> | <a href="/drafts/diff/edbd9dab707c/css-overflow-5/Overview.bs">diff</a> | <a href="/drafts/comparison/edbd9dab707c/css-overflow-5/Overview.bs">comparison</a> | <a href="/drafts/log/edbd9dab707c/css-overflow-5/Overview.bs">revisions</a> </td> </tr> </table> <div class="diff"> <pre><span style="color:#cc0000;"><a class="linenr" href="#l1.1" id="l1.1"> 1.1</a> --- a/css-overflow-5/Overview.bs Mon Nov 18 19:36:11 2024 -0800 </span><span style="color:#008800;"><a class="linenr" href="#l1.2" id="l1.2"> 1.2</a> +++ b/css-overflow-5/Overview.bs Tue Nov 19 13:16:44 2024 -0800 </span><span style="color:#990099;"><a class="linenr" href="#l1.3" id="l1.3"> 1.3</a> @@ -263,16 +263,17 @@ </span><span><a class="linenr" href="#l1.4" id="l1.4"> 1.4</a> or via the tab key when currently active or when no other ''::scroll-marker'' is active and this is the first marker in the group, </span><span><a class="linenr" href="#l1.5" id="l1.5"> 1.5</a> ensuring the group has a <a href="https://open-ui.org/components/focusgroup.explainer/#guaranteed-tab-stop">guaranteed tab stop</a>. </span><span><a class="linenr" href="#l1.6" id="l1.6"> 1.6</a> </span><span style="color:#cc0000;"><a class="linenr" href="#l1.7" id="l1.7"> 1.7</a> -<h4 id="active-scroll-marker">The active scroll marker</h4> </span><span style="color:#008800;"><a class="linenr" href="#l1.8" id="l1.8"> 1.8</a> +<h4 id="active-scroll-marker"> </span><span style="color:#008800;"><a class="linenr" href="#l1.9" id="l1.9"> 1.9</a> +Selecting The Active Scroll Marker: the '':target-current'' pseudo-class</h4> </span><span><a class="linenr" href="#l1.10" id="l1.10"> 1.10</a> </span><span><a class="linenr" href="#l1.11" id="l1.11"> 1.11</a> Exactly one [=scroll marker=] within each [=scroll marker group=] is determined to be active at a time. </span><span style="color:#cc0000;"><a class="linenr" href="#l1.12" id="l1.12"> 1.12</a> - An active [=scroll marker=] can be styled by the '':checked'' pseudo-class. </span><span style="color:#008800;"><a class="linenr" href="#l1.13" id="l1.13"> 1.13</a> + Such "active" [=scroll markers=] match the <dfn selector>:target-current</dfn> pseudo-class. </span><span><a class="linenr" href="#l1.14" id="l1.14"> 1.14</a> </span><span><a class="linenr" href="#l1.15" id="l1.15"> 1.15</a> <div class='example'> </span><span><a class="linenr" href="#l1.16" id="l1.16"> 1.16</a> The following snippet shows how the link to the currently scrolled section can be highlighted: </span><span><a class="linenr" href="#l1.17" id="l1.17"> 1.17</a> </span><span><a class="linenr" href="#l1.18" id="l1.18"> 1.18</a> <pre highlight=css> </span><span style="color:#cc0000;"><a class="linenr" href="#l1.19" id="l1.19"> 1.19</a> - a:checked { </span><span style="color:#008800;"><a class="linenr" href="#l1.20" id="l1.20"> 1.20</a> + a:target-current { </span><span><a class="linenr" href="#l1.21" id="l1.21"> 1.21</a> font-weight: bold; </span><span><a class="linenr" href="#l1.22" id="l1.22"> 1.22</a> } </span><span><a class="linenr" href="#l1.23" id="l1.23"> 1.23</a> </pre> </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>