MENU


Info-graphic Selectors

Some selectors target media and overlay layers: dialog::backdrop and :modal style a dialog opened with showModal() (both Baseline widely available); :fullscreen matches an element shown through the Fullscreen API (not yet Baseline); and video::cue styles WebVTT captions from a <track>, with video::cue(b) reaching only their bold spans.

A modal dialog dims and blurs the page through ::backdropHTMLLive
<!doctype html>
<style>
  body { font: 15px system-ui; }  dialog:modal { border: 3px solid #1565c0; border-radius: 8px; }
  dialog::backdrop { background: rgb(38 50 56 / 0.6); backdrop-filter: blur(2px); }
</style>
<p>Page content behind the modal. Page content behind the modal.</p>
<dialog id="d">Saved. <button>OK</button></dialog>
<script>document.getElementById("d").showModal();</script>
Browser output of Listing 4.18
Browser output of 18