Day 25 – Browser Support. What can we use today? | CSS Adventskalender

Day 25 – Browser Support. What can we use today?

Published: at 07:00 AM

After 24 days of modern CSS features, the central question arises: What can we actually use in real projects?

This final article provides a clear overview of browser support for all the topics covered. It contains practical assessments, fallback strategies, and insights into which features are production-ready today and which require more patience.

The Categories

To make assessment easier, I’m dividing features into four categories:

The Cascade & Specificity (Days 1–2)

✅ Stable: Fundamental Cascade Mechanisms

The fundamental cascade principles (Origin, Importance, Specificity, and Order) have been established since the beginning of CSS and work identically in all browsers. No compatibility issues here.

Browser Support:

Practical Note: The biggest challenge isn’t browser support but understanding the mechanisms. Mastering the cascade helps avoid specificity wars and !important escalations from the start.

Modern Selectors (Day 3)

🟢 Production-Ready: :is() and :where()

Both selectors have been stable in all modern browsers since 2021.

Browser Support:

Important for Legacy Support: Internet Explorer doesn’t support these selectors. Projects with IE11 requirements need fallbacks. However, this is rarely an issue in modern projects in 2025.

Practical Note: :where() is especially valuable for design systems because it sets specificity to 0, making overrides much easier.

🟢 Production-Ready: :has()

The “Parent Selector” is the newest of the three modern selector features but has achieved stable support.

Browser Support:

Limitation: Firefox didn’t fully implement :has() until late 2023. Projects targeting Firefox users with older versions should plan for fallbacks.

Fallback Strategy:

/* Base style without :has() */
.card {
  padding: 1rem;
}

/* Progressive Enhancement with :has() */
@supports selector(:has(*)) {
  .card:has(img) {
    padding-top: 0;
  }
}

Practical Note: :has() replaces many JavaScript-based state logics. It’s indispensable today, especially in forms, card components, and state styling.

Box Model & box-sizing (Day 4)

✅ Stable: box-sizing: border-box

Available in all browsers for over a decade and now the de facto standard.

Browser Support:

Best Practice:

*,
*::before,
*::after {
  box-sizing: border-box;
}

This reset should be set in every modern project. It makes layouts predictable and prevents numerous width calculation problems.

Flexbox (Days 5–6)

✅ Stable: All Flexbox Features

Flexbox has been fully specified since 2015 and is stable in all relevant browsers.

Browser Support:

Important: IE 11 had some known Flexbox bugs, especially with min-height, flex-basis: auto, and nested containers. Since IE 11 is practically irrelevant in 2025, these bugs don’t matter for most projects.

🟢 Production-Ready: gap in Flexbox

The gap property was originally intended only for Grid but was standardized for Flexbox in 2020.

Browser Support:

Fallback for Older Browsers:

.flex-container {
  display: flex;
  gap: 1rem;
}

/* Fallback for browsers without gap support */
@supports not (gap: 1rem) {
  .flex-container > * + * {
    margin-left: 1rem;
  }
}

Practical Note: gap replaces margin-based spacing and is standard today. Fallbacks are only necessary for projects with extremely broad browser support.

CSS Grid (Days 7–8)

✅ Stable: Grid Basics

CSS Grid has been available in all modern browsers since 2017 and is considered stable.

Browser Support:

Important: IE 11 only supports an early version of the Grid specification with -ms-grid. This isn’t compatible with modern syntax. For IE 11, either alternative layouts or polyfills are needed. Since IE 11 is practically irrelevant in 2025, this isn’t an issue for most projects.

🟢 Production-Ready: minmax(), auto-fit, auto-fill

These advanced Grid features have been available since the original Grid implementation.

Browser Support:

Practical Note: The pattern grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) is the modern standard for responsive grids without media queries.

🟢 Production-Ready: subgrid

Subgrid allows nested grid items to inherit the grid of their parent element.

Browser Support:

Limitation: Chrome and Edge didn’t implement subgrid until 2023. Projects supporting older browser versions should check if fallbacks are necessary.

Fallback Strategy:

@supports (grid-template-columns: subgrid) {
  .nested-grid {
    grid-template-columns: subgrid;
  }
}

Practical Note: Subgrid solves many nested Grid problems elegantly but isn’t universally available yet. Progressive enhancement is the right approach here.

Container Queries (Day 9)

🟢 Production-Ready

Container Queries are one of the most important new features and have been available in all modern browsers since 2023.

Browser Support:

Limitation: Firefox didn’t fully implement Container Queries until early 2023. Projects with broad Firefox support should consider this.

Fallback Strategy:

/* Mobile-first without Container Queries */
.card {
  display: block;
}

/* Progressive Enhancement with Container Queries */
@supports (container-type: inline-size) {
  @container (min-width: 400px) {
    .card {
      display: flex;
    }
  }
}

Practical Note: Container Queries are a game-changer for component-based architectures. They enable truly independent, context-aware components. They’re usable for most projects today.

Modern Responsive Design (Day 10)

✅ Stable: Viewport Units (vw, vh, vmin, vmax)

Viewport units have been stable for years.

Browser Support:

Important: Mobile browsers used to have issues with vh and the URL bar. The new units dvh (dynamic viewport height), svh (small viewport height), and lvh (large viewport height) solve this problem.

🟢 Production-Ready: clamp(), min(), max()

These functions have been available in all modern browsers since 2020.

Browser Support:

Practical Note: clamp() is key to fluid, breakpoint-free responsive design. The function is stable today and should be used in every modern project.

🟢 Production-Ready: New Viewport Units (dvh, svh, lvh)

The new dynamic viewport units solve the notorious mobile browser problem with disappearing address bars.

Browser Support:

Fallback Strategy:

.fullscreen {
  height: 100vh; /* Fallback */
  height: 100dvh; /* Dynamic height */
}

CSS Custom Properties (Day 11)

✅ Stable

Custom Properties have been available in all modern browsers since 2016 and are absolutely stable.

Browser Support:

Fallback for IE 11: If IE 11 support is really still necessary (very rare in 2025), you either need to:

Practical Note: Custom Properties are the foundation for theming, design systems, and modern CSS architectures. They’re indispensable today and should be used in every project.

State Styling without JavaScript (Day 12)

✅ Stable: :checked, :focus, :hover, :target

These pseudo-classes have been available for decades.

Browser Support:

🟢 Production-Ready: :focus-within

Browser Support:

🟢 Production-Ready: <details> and <summary>

Native HTML elements for accordions and collapsible areas.

Browser Support:

Practical Note: <details> is fully supported today and should be preferred for simple accordions. The element is semantically correct, accessible, and requires no JavaScript.

CSS Architectures & Cascade Layers (Days 13–14)

✅ Stable: BEM, ITCSS, CUBE CSS

These architectures are concepts, not browser features. They work in all browsers.

🟢 Production-Ready: @layer (Cascade Layers)

Cascade Layers have been available in all modern browsers since 2022.

Browser Support:

Fallback Strategy:

/* Layers are ignored by older browsers */
/* The CSS still works, just without layer priority */
@layer reset, base, components, utilities;

@layer components {
  .button {
    background: blue;
  }
}

Practical Note: Cascade Layers are a powerful tool for large codebases but relatively new. Progressive enhancement makes sense here: CSS should work without layers, just without layer-based prioritization.

Typography & Variable Fonts (Days 15–16)

✅ Stable: Basic Typography Properties

font-size, line-height, font-weight, letter-spacing etc. have always been available.

🟢 Production-Ready: Variable Fonts

Variable Fonts have been available in all modern browsers since 2018.

Browser Support:

Fallback Strategy:

@font-face {
  font-family: 'Inter';
  src: url('Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
}

/* Fallback for browsers without Variable Font support */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: 'Inter';
    src: url('Inter-Regular.woff2') format('woff2');
    font-weight: 400;
  }
  @font-face {
    font-family: 'Inter';
    src: url('Inter-Bold.woff2') format('woff2');
    font-weight: 700;
  }
}

Practical Note: Variable Fonts offer better performance (fewer downloads) and more flexibility. They’re production-ready today but should include fallbacks for older browsers.

CSS Color Level 5 (Day 17)

🟡 Use with Caution: OKLCH, LCH

Modern color spaces like OKLCH are available but not yet universally supported.

Browser Support:

Fallback Strategy:

.element {
  /* Fallback with RGB/HSL */
  background: hsl(220, 80%, 50%);
  
  /* Modern with OKLCH */
  background: oklch(0.65 0.15 240);
}

Practical Note: OKLCH solves many problems of RGB/HSL, especially for color palettes and dark mode themes. Support isn’t universal yet, but fallbacks work well. For new projects, use with fallbacks is recommended.

🟢 Production-Ready: color-mix()

Browser Support:

Fallback Strategy:

.button {
  /* Fallback */
  background: #2563eb;
  
  /* Modern with color-mix() */
  background: color-mix(in oklch, var(--primary) 80%, white);
}

🟡 Use with Caution: Relative Colors

Browser Support:

Practical Note: Relative Colors are extremely powerful for theming but still very new. Fallbacks should be planned for production.

Theming (Day 18)

✅ Stable: prefers-color-scheme

Browser Support:

Practical Note: prefers-color-scheme is standard today and should be used in every modern project.

🟢 Production-Ready: color-scheme

Browser Support:

Animations (Days 19–20)

✅ Stable: CSS Transitions & Animations

transition and @keyframes have been fully supported for years.

Browser Support:

Practical Note: The golden rule remains: Only animate transform and opacity for optimal performance.

🟢 Production-Ready: prefers-reduced-motion

Browser Support:

Best Practice:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

View Transitions API (Day 21)

🟡 Use with Caution

The View Transitions API is now available in most modern browsers, only Firefox is still missing.

Browser Support:

Status: The API is stable in Chrome, Edge, and Safari, but Firefox hasn’t implemented it yet. Feature detection is mandatory for production:

if ('startViewTransition' in document) {
  document.startViewTransition(() => {
    // Update DOM
  });
} else {
  // Fallback without animation
  // Update DOM directly
}

Practical Note: View Transitions are an exciting feature for modern SPAs and MPAs. With Chrome, Edge, and Safari, broad support is already available. Only Firefox users won’t see the animations but will still get full functionality. As progressive enhancement, View Transitions are well usable today.

CSS Houdini (Day 22)

🔴 Experimental: Paint API

Browser Support:

🟡 Use with Caution: Properties & Values API

Browser Support:

Status: Houdini is technically fascinating, but browser support is fragmented. For production projects, Houdini isn’t recommended in 2025, except as progressive enhancement with solid fallbacks.

Practical Note: Houdini is the future of CSS extensibility, but that future isn’t here for all browsers yet. Wait 1-2 more years or only use it for experimental features.

Summary: What’s Usable Today?

✅ Universally Usable (>95% Browser Support)

These features can be used without concern in modern projects:

🟢 Production-Ready with Minimal Risk

These features are available in all modern browsers but may need fallbacks for very old browsers:

🟡 Use with Caution and Fallbacks

These features work but require robust fallback strategies:

🔴 Not Yet for Production

These features are experimental and should only be used with feature detection and as progressive enhancement:

Practical Recommendations

1. Use Feature Detection

Always work with @supports for modern features:

@supports (container-type: inline-size) {
  /* Container Query Code */
}

2. Progressive Enhancement

Basic functionality for all browsers, advanced features as enhancement:

/* Base */
.card {
  padding: 1rem;
}

/* Enhancement */
@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

3. Polyfills Only Where Really Necessary

Polyfills have performance costs. Check if browser support is really that important or if progressive enhancement is sufficient.

4. Define Browser Support Goals

Clear browser support goals should be defined for each project:

5. Prefer Evergreen Browsers

Most modern browsers update automatically. This means features introduced 1-2 years ago are practically universally available today.

The Most Important Insight

CSS has evolved more radically in the last 5 years than in the previous 15 years combined.

Almost all modern features covered in this advent calendar are already usable in production today:

The future of CSS is already here. And it’s better than many think.

Conclusion

This advent calendar opened 24 doors full of modern CSS techniques. The good news: most of them are already usable today.

The golden rule: Use modern features, build robust fallbacks, and think in progressive enhancement.

CSS in 2025 is more flexible, more powerful, and more elegant than ever. It’s worth mastering these tools. This applies not just to building better UIs, but also to writing less code, working more performantly, and creating more maintainable systems.

With that: Merry Christmas and success with modern CSS! 🎄

☕ Buy me a coffee

If you enjoy my articles and they help you in your work, I would appreciate a "coffee" and a few kind words from you.

Buy me a coffee
Next Post
Door 24 – CSS for Design Systems

Comments