Made with modern web features

This site intentionally uses a few modern web platform features instead of framework-specific replacements.

Baseline dates summarize when the feature became available across the major browser engines according to the Web Platform DX Web Features data and MDN Baseline summaries.

Container style queries

Baseline since: 2026-05-19

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);
  }
}

Cascade layers

Baseline since: 2024-09-14

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;
  }
}

Autonomous Custom elements

Baseline since: 2020-01-15

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>