Modern HTML & CSS

<button commandfor="demo-dialog" command="show-modal">Open dialog</button>
<dialog id="demo-dialog" closedby="any">
  <form method="dialog"> … <button value="publish">Publish</button> </form>
</dialog>

<button popovertarget="demo-popover">Keyboard shortcuts</button>
<div id="demo-popover" popover> … </div>

/* Tether the popover to its button */
.pop-trigger   { anchor-name: --pop-trigger; }
.demo-popover  { position-anchor: --pop-trigger; top: anchor(bottom); left: anchor(left); }

<details name="faq" open><summary>…</summary> …</details>
<details name="faq"><summary>…</summary> …</details>

.accordion details               { interpolate-size: allow-keywords; }
.accordion details::details-content { block-size: 0; transition: block-size .3s, content-visibility .3s allow-discrete; }
.accordion details[open]::details-content { block-size: auto; }

/* Errors appear only after the visitor has interacted with the field */
.field:has(:user-invalid) .field-error { display: block; }

/* The status line reacts to the whole form's validity: no JS */
.demo-form:has(:invalid)      .when-valid   { display: none; }
.demo-form:not(:has(:invalid)) .when-invalid { display: none; }

textarea { field-sizing: content; }      /* grows with its content */
.demo-form { accent-color: var(--demo-accent); }

.plan:has(:checked) { border-color: var(--accent); }
.has-plans:has([value="pro"]:checked) .note-pro { display: inline; }

/* Count checked boxes with CSS counters, celebrate when none are left unchecked */
.checklist { counter-reset: done; }
.checklist input:checked { counter-increment: done; }
.checklist-count::after { content: counter(done) " of 4 done"; }
.checklist:not(:has(input:not(:checked))) .checklist-done { display: block; }

.subgrid-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sub-card     { display: grid; grid-row: span 3; grid-template-rows: subgrid; }

.cq-frame { container-type: inline-size; resize: horizontal; }
@container (min-width: 26rem) { .profile { grid-template-columns: auto 1fr; } }
@container (min-width: 40rem) { .profile-stats { display: flex; } }

:root          { --surface: light-dark(#ffffff, #171a21); }
.scheme-dark   { color-scheme: dark; }   /* every token inside flips */
.swatches li   { background: color-mix(in oklch, var(--accent) var(--p), white); }
h1, h2, h3     { text-wrap: balance; }

.read-progress { animation: grow linear both; animation-timeline: scroll(root); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.reveal-grid li { animation: reveal linear both; animation-timeline: view();
                  animation-range: entry 0% cover 35%; }

.toast-list li { transition: opacity .4s, translate .4s; }
@starting-style { .toast-list li { opacity: 0; translate: -1rem 0; } }