Articles /

performance

Baseline and browser support in 2026

How to check support, communicate it clearly, and use progressive enhancement to ship new CSS safely.

What is Baseline?

Baseline is a web platform initiative (backed by Google, Mozilla, Microsoft, and Apple via the WebDX Community Group) that categorizes CSS and JavaScript features into three tiers:

  • Widely available — supported in all major browsers for 2.5+ years. Safe to use without fallbacks for most audiences.
  • Newly available — just landed in all major browsers. Forward-looking projects can use it; older browsers need a fallback.
  • Limited availability — not yet in all major browsers. Use as progressive enhancement with a tested fallback.

Baseline is updated yearly and is the fastest way to answer "can I use this now?"

The major CSS features: where they stand in 2026

Feature Status Notes
:has() Widely available Chrome 105, Safari 15.4, Firefox 121
@container Widely available Chrome 105, Safari 16, Firefox 110
animation-timeline: scroll() Newly available Chrome 115, Safari 18, Firefox rolling out
subgrid Widely available Chrome 117, Safari 16, Firefox 71
oklch() Widely available Chrome 111, Safari 15.4, Firefox 113
light-dark() Newly available Chrome 123, Safari 17.5, Firefox 120
@scope Newly available Chrome 118, Safari 17.4 — Firefox in progress
anchor-name Experimental Chrome 125, Edge 125. Safari/Firefox pending
View Transitions Experimental SPA: Chrome 111. MPA: Chrome 126+

Progressive enhancement with @supports

Use @supports to apply new CSS only when the browser supports it, falling back to a simpler rule.

/* Default: simple fallback */
.tooltip {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 50%;
  translate: -50% 0;
}

/* Enhanced: anchor positioning when supported */
@supports (anchor-name: --x) {
  .trigger { anchor-name: --tooltip-anchor; }
  .tooltip {
    position: fixed;
    inset-block-end: anchor(--tooltip-anchor top);
    inset-inline-start: anchor(--tooltip-anchor center);
    translate: -50% -100%;
    bottom: auto; left: auto; /* reset fallback */
  }
}

How to check support

  • web.dev/baseline — the official Baseline dashboard with yearly snapshots.
  • caniuse.com — per-browser, per-version support with usage percentages.
  • MDN Browser Compatibility — at the bottom of every CSS property page.
  • Browserslist — define a query like last 2 versions, > 0.5% and get a list of matched browsers for your build tools.
For this site, every snippet includes a Baseline badge ("Widely supported" or "Experimental") with the same taxonomy — you can trust it's been checked against caniuse data.