10 features ← 2025

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.

CSS Mixins (@mixin)

Workflow

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.

Example

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

.card { @apply --center; }

💡

Use case

Replace Sass/PostCSS mixins with native CSS. Share layout patterns, theme tokens, and responsive utilities across components without a build step.

Status Editor's Draft

Shipped Chrome 146 (expected)

Browsers Chrome Edge

Spec CSS Mixins

Cross-Document View Transitions

Animation

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.

Example

@view-transition {
  navigation: auto;
}

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

💡

Use case

Add smooth page-to-page transitions in multi-page apps without JavaScript frameworks. Works with standard links and form navigations.

Status Working Draft

Shipped Chrome 134, Safari 18.2

Browsers Chrome Safari Edge

Spec CSS View Transitions Level 2

CSS Gap Decorations

Layout

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.

Example

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

💡

Use case

Add separators between grid items — like table borders or card dividers — without pseudo-elements or wrapper elements. Supports all border-style values.

Status Editor's Draft

Shipped Chrome 147 (expected)

Browsers Chrome Edge

Spec CSS Gap Decorations

Reading Flow

Layout

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.

Example

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

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

💡

Use case

Fix accessibility issues where visual order differs from DOM order. Ensures keyboard and assistive technology users navigate in the visually expected order.

Status Editor's Draft

Shipped Chrome 137

Browsers Chrome Edge

Spec CSS Display Level 4

Scroll-Driven Animations Interop

Animation

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

Example

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

💡

Use case

Create scroll-triggered reveal effects, progress bars, parallax, and scroll-linked transforms without JavaScript IntersectionObserver or scroll event listeners.

Status Working Draft

Shipped Baseline 2026 (expected)

Browsers Chrome Firefox Edge Safari

Spec Scroll-driven Animations

Masonry Layout

Layout

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.

Example

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

💡

Use case

Build Pinterest-style image galleries, card feeds, and blog layouts where items have varying heights. No need for Masonry.js or manual column calculation.

Status Editor's Draft

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

Browsers Firefox Chrome

Spec CSS Grid Layout Level 3

Relative Color Syntax Interop

Color

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

Example

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

💡

Use case

Generate entire color palettes from a single brand color. Lighten, darken, desaturate, or shift hue without Sass functions or hardcoded hex values.

Status Working Draft

Shipped Baseline 2026

Browsers Chrome Firefox Safari Edge

Spec CSS Color Level 5

@starting-style Interop

Animation

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

Example

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

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

💡

Use case

Animate dialogs, popovers, and conditionally-rendered elements on first display. No more requestAnimationFrame hacks to trigger entry transitions.

Status Working Draft

Shipped Baseline 2026

Browsers Chrome Firefox Safari Edge

Spec CSS Transitions Level 2

CSS Custom Highlight API Improvements

Selector

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

Example

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

💡

Use case

Build find-and-replace, code syntax highlighting, spell-check underlines, and collaborative cursors without wrapping text in <span> elements.

Status Working Draft

Shipped Chrome 137, Firefox (in development)

Browsers Chrome Edge Firefox

Spec CSS Custom Highlight API Level 1

Scoped Styles Interop (@scope)

Selector

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

Example

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

💡

Use case

Scope styles to a component without class-name conventions or build tools. The 'to' boundary prevents styles from leaking into nested sub-components.

Status Working Draft

Shipped Chrome 134, Firefox (in development)

Browsers Chrome Edge Firefox Safari

Spec CSS Cascading and Inheritance Level 6