Results for no-js : 7

::target-text {
  background: var(--oxide);
  color: var(--paper);
}

<a href="/path/#:~:text=The%20frisket%20holds%20the%20sheet">
  Jump to the sentence
</a>
			

<div class="carousel">
  <article>…</article>
  <article>…</article>
</div>

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
			

<div class="reveal">
        <input class="secret-mask" type="text" value="oxide-ink" autocomplete="off" spellcheck="false">
        <label class="reveal-eye">
          <input type="checkbox" aria-label="Show the password">
          <span class="reveal-eye-mark"></span>
        </label>
      </div>

// css
.secret-mask { -webkit-text-security: disc; }
.reveal:has(:checked) .secret-mask {
  -webkit-text-security: none;
}
			

<div class="tabs">
      <div class="tab-list">
        <input type="radio" name="lab-tabs" id="tab-markup" checked="">
        <label for="tab-markup">Markup</label>
        <input type="radio" name="lab-tabs" id="tab-css">
        <label for="tab-css">CSS</label>
        <input type="radio" name="lab-tabs" id="tab-fallback">
        <label for="tab-fallback">Fallback</label>
      </div>
      <div class="panel panel-markup">
        <p>Radios in a group, labels beside them, panels as siblings. The URL does not change. If you need a shareable tab, use <code>:target</code> and one heading per fragment instead.</p>
      </div>
      <div class="panel panel-css">
        <p>The rule is one line of intent: when this id is checked, show that panel. Everything else is border paint so the selected label reads as a tab.</p>
      </div>
      <div class="panel panel-fallback">
        <p>Without <code>:has()</code> every panel would show. That engine is gone from the current Baseline set. If you must support a crawler without CSS, keep the same words in the document order so they still read top to bottom.</p>
      </div>
    </div>

// CSS
.tabs:has(#tab-css:checked) .panel-css {
  display: block;
}

# Requiert une rêgle css par tab...
			

<details name="notes" open>
  <summary>Where state lives</summary>
  <p>…</p>
</details>
<details name="notes">
  <summary>What name does</summary>
  <p>…</p>
</details>
			

<button popovertarget="a" popovertargetaction="show">
  Show a toast
</button>
<button popovertarget="b" popovertargetaction="show">
  Show a toast
</button>
<div id="a" popover="auto" role="status">…</div>
<div id="b" popover="auto" role="status">…</div>

.toast:popover-open {
  animation: toast-life 5s forwards;
}
			

<button popovertarget="menu" popovertargetaction="toggle">
  Open a list
</button>

<div id="menu" popover>
  <nav>…</nav>
  <button type="button" popovertarget="menu" popovertargetaction="hide">Close</button>
</div>