What's New in CSS 2026

CSS features shipping in 2026. Mixins, cross-document view transitions, gap decorations, reading flow, and more browser interop improvements.

Browsers are also fixing cross-browser inconsistencies in 2026 through the Interop program. See what's being fixed →

CSS Mixins (@mixin)

Workflow Chrome 146 (expected)

Define reusable blocks of declarations with @mixin --name { ... } and apply them with @apply --name. Like Sass mixins but native, with support for parameters and conditional logic.

CSS Mixins →

@mixin --center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card { @apply --center; }

Cross-Document View Transitions

Animation Chrome 134, Safari 18.2

View transitions now work across full page navigations (MPA), not just SPA. Use @view-transition { navigation: auto } to animate between pages served by the same origin.

CSS View Transitions Level 2 → Try the snippet →

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-out 0.3s;
}
::view-transition-new(root) {
  animation: fade-in 0.3s;
}

CSS Gap Decorations

Layout Chrome 147 (expected)

Style the gaps in grid and flex layouts with column-rule-like properties for both axes. Draw lines, dashes, or gradients between grid tracks without extra DOM elements.

CSS Gap Decorations →

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  column-rule: 1px solid #ccc;
  row-rule: 1px dashed #eee;
}

Reading Flow

Layout Chrome 137

Control the keyboard tab and screen reader navigation order of flex and grid children with reading-flow: flex-visual or grid-rows. No need for manual tabindex reordering.

CSS Display Level 4 →

.flex-nav {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

.grid-layout {
  display: grid;
  reading-flow: grid-rows;
}

Scroll-Driven Animations Interop

Animation Baseline 2026 (expected)

animation-timeline: scroll() and view() reach cross-browser baseline. Firefox and Safari ship full support, making scroll-driven animations production-ready without prefixes.

Scroll-driven Animations → Try the snippet →

.reveal {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

Masonry Layout

Layout Firefox 140 (behind flag), Chrome (in development)

Native CSS masonry via display: masonry or grid-template-rows: masonry. Pinterest-style layouts without JavaScript. Items fill vertical gaps automatically based on content height.

CSS Grid Layout Level 3 →

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: masonry;
  gap: 16px;
}

Relative Color Syntax Interop

Color Baseline 2026

oklch(from var(--base) ...) and color-mix() reach full cross-browser baseline. All major engines now support relative color manipulation natively.

CSS Color Level 5 → Try the snippet →

:root { --brand: oklch(65% 0.25 260); }

.lighter {
  color: oklch(from var(--brand) calc(l + 0.2) c h);
}
.muted {
  color: oklch(from var(--brand) l calc(c * 0.5) h);
}

@starting-style Interop

Animation Baseline 2026

@starting-style reaches cross-browser baseline, enabling entry animations from display: none without JavaScript timing hacks in all major browsers.

CSS Transitions Level 2 → Try the snippet →

dialog[open] {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s, transform 0.3s;
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scale(0.95);
  }
}

CSS Custom Highlight API Improvements

Selector Chrome 105, Firefox 140, Safari 17.2, Edge 105

The Highlight API gains new features for custom text highlighting. Create spell-check indicators, search highlights, and collaborative editing marks with pure CSS styling.

CSS Custom Highlight API Level 1 → Try the snippet →

/* JavaScript: create ranges */
const range = new Range();
range.setStart(node, 0);
range.setEnd(node, 5);
CSS.highlights.set('search', new Highlight(range));

/* CSS: style the highlight */
::highlight(search) {
  background: oklch(85% 0.15 90);
  color: black;
}

contrast-color() Function

Color Firefox 146, Safari 26

Automatically pick a readable text color based on background luminance. contrast-color(bg) returns whichever of black or white meets WCAG AA contrast against the given color — no manual checking needed.

CSS Color Level 6 → Try the snippet →

.badge {
  background: var(--bg);
  color: contrast-color(var(--bg));
}

/* vs: manually hardcoding per variant */
.badge-blue { color: white; }
.badge-yellow { color: black; }

Scoped Styles Interop (@scope)

Selector Chrome 134, Firefox (in development)

@scope reaches broader browser support. Proximity-based styling with upper and lower bounds becomes a practical alternative to BEM and CSS Modules.

CSS Cascading and Inheritance Level 6 → Try the snippet →

@scope (.card) to (.card-content) {
  :scope {
    border: 1px solid #ddd;
    border-radius: 12px;
  }
  h2 { font-size: 1.2rem; }
  p  { color: gray; }
}