Made with modern web features

This site intentionally uses modern web platform features to showcase them, and because I trust my audience to use auto-updating browsers.

Baseline describes web platform features that work across the core browser set. For this page, any Baseline browser released after 2026-05-19 should support every feature listed here.

Container style queries

Baseline since: 2026-05-19

Fallback: Author-provided — Unsupported browsers ignore the query block, so the default styles must be authored as the fallback. See also.

Example

Viewport tokens such as --viewport: tablet and --viewport: narrow are queried by layout and card styles.

:root {
  --viewport: desktop;

  @media (max-width: 900px) {
    --viewport: tablet;
  }
}

@container style(--viewport: tablet) {
  .box {
    width: var(--width-panel-tablet);
  }
}

Custom highlights

Baseline since: 2026-03-24

Fallback: Progressive enhancement — Code remains readable if CSS.highlights or ::highlight() is ignored; only syntax coloring is lost.

Example

MicroLighter registers syntax-token ranges with the CSS Custom Highlight API and the site themes those highlight names without wrapping source code in extra spans.

::highlight(keyword) {
  color: var(--color-syntax-highlighting-keyword);
}

::highlight(string) {
  color: var(--color-syntax-highlighting-string);
}

Popover

Baseline since: 2025-01-27

Fallback: Polyfillable — Unsupported browsers need JavaScript to emulate show, hide, focus, and backdrop behavior; otherwise popover content may appear inline. See also.

Example

Collection counters expose their detail panel as a native popover so it can enter the top layer and light-dismiss.

<div id="collection-stats-talks" popover>
  <h2>Talks</h2>
  <p>42 counted talks.</p>
</div>

light-dark()

Baseline since: 2024-05-13

Fallback: Author-provided — Unsupported browsers drop declarations using the unknown color function, so fallback color declarations are needed. See also.

Example

Design tokens select light and dark theme values directly in CSS.

:root {
  color-scheme: light dark;
  --color-background: light-dark(#ffffff, #111111);
  --color-text: light-dark(#555555, #f1f3f5);
}

text-wrap: balance

Baseline since: 2024-05-13

Fallback: Progressive enhancement — Unsupported browsers ignore the declaration and fall back to default text wrapping. See also.

Example

Home-page headings use balanced wrapping to avoid awkward short final lines.

.home-hero h1 {
  text-wrap: balance;
}

:has()

Baseline since: 2023-12-19

Fallback: Author-provided — Our usage only improves code-block styling; the base code styles are authored as the fallback for unsupported browsers. See also.

Example

Code-block styling targets pre elements that contain language-marked code.

pre:has(> code[class*="language-"]) {
  background-color: var(--color-code-background);
  overflow: auto;
}

CSS nesting

Baseline since: 2023-12-11

Fallback: Build-time transform — Build tools can flatten nested CSS to equivalent unnested rules. See also.

Example

Viewport token media queries are nested inside :root, keeping token defaults and overrides together.

:root {
  --viewport: desktop;

  @media (max-width: 900px) {
    --viewport: tablet;
  }
}

Import maps

Baseline since: 2023-03-27

Fallback: Polyfillable — Browsers without import maps need a loader or build step that rewrites bare module specifiers to URLs. See also.

Example

The site maps bare module specifiers to generated asset URLs, then imports those modules by name.

<script type="importmap">
  {
    "imports": {
      "microlighter": "/assets/vendor/microlighter/microlighter.js",
      "scroll-to-top-element": "/assets/elements/ScrollToTopElement.mjs",
      "secret-email-button-element": "/assets/elements/SecretEmailButtonElement.mjs"
    }
  }
</script>

<script type="module">
  import "microlighter";
  import "scroll-to-top-element";
  import "secret-email-button-element";
</script>

Small, large, and dynamic viewport units

Baseline since: 2022-12-05

Fallback: Author-provided — Unsupported browsers drop dvw and dvh declarations unless separate viewport-unit fallbacks are authored.

Example

Popovers are capped against the dynamic viewport so they fit mobile browser UI changes.

.collection-stats-popover {
  max-width: min(34rem, calc(100dvw - 2rem));
  max-height: min(28rem, calc(100dvh - 2rem));
}

Cascade layers

Baseline since: 2022-03-14

Fallback: Build-time transform — A build step can order and flatten layers for older browsers. Without that transform, unsupported browsers ignore layered rules. See also.

Example

The CSS bundle is organized into theme, base, layout, block, page, and utility layers.

@layer argh.theme, argh.base, argh.layout, argh.blocks, argh.pages, argh.utilities;

@layer argh.blocks {
  .nav-item {
    display: flex;
  }
}

color-scheme

Baseline since: 2022-02-03

Fallback: Progressive enhancement — Unsupported browsers keep their default control and browser chrome colors. See also.

Example

The document advertises support for light and dark form controls and browser chrome.

<meta name="color-scheme" content="light dark">

Example

CSS also opts the page into both schemes for built-in controls and system colors.

:root {
  color-scheme: light dark;
}

Logical properties

Baseline since: 2021-09-20

Fallback: Author-provided — Unsupported browsers drop logical declarations, so physical-property fallbacks are needed where the spacing or sizing is essential. See also.

Example

Home-page sections use block-axis padding and borders so spacing follows the document writing mode.

.home-section {
  padding-block: var(--space-2xl);
  border-block: var(--border-width) solid var(--color-border);
}

Autonomous custom elements

Baseline since: 2020-01-15

Fallback: Polyfillable — Unsupported browsers can use a JavaScript polyfill; without it, these custom elements wrap ordinary HTML and the page remains usable when they are not upgraded. See also.

Example

The scroll-to-top control is a <scroll-to-top> custom element.

<scroll-to-top></scroll-to-top>

<script type="module">
  class ScrollToTop extends HTMLElement {
    connectedCallback() {
      this.innerHTML = `<button type="button">Top</button>`;
    }
  }

  customElements.define("scroll-to-top", ScrollToTop);
</script>