# data[].attributes.blurb.html
It’s tempting to think of Baseline as creating a hard line. If a feature isn’t Baseline, then it’s not ready for use. However, we all know that web development is a world of “it depends”.

While we can, in most cases, make an objective, unopinionated call on whether something is or is not interoperable, it’s much harder to decide whether something is a good candidate for progressive enhancement. That requires an opinion, knowledge of the audience, even the exact use of the feature.

So, how should you think about using Baseline to inform your browser strategy? What about those features that have limited availability but are obvious progressive enhancements or have a great polyfill? Is there a difference between a feature that’s only in one browser and one that’s stable in two?

In this talk, you’ll learn about some of the CSS and JavaScript features that are Newly available and some that are still not yet Baseline, but that have a clear path to be included in your development roadmap.

# data[].attributes.slidedeck.data[].slides[].desc.html
A pragmatic guide to browser support Rachel Andrew | Google Chrome | https://rachelandrew.co.uk

# data[].attributes.slidedeck.data[].slides[].desc.html
Baseline Clarifying the language around browser support for features.

# data[].attributes.slidedeck.data[].slides[].desc.html
A Baseline Newly available feature is supported in: • Chrome (desktop and Android) • Edge • Firefox (desktop and Android) • Safari (macOS and iOS) After 30 months the feature becomes Baseline Widely available.

# data[].attributes.slidedeck.data[].slides[].desc.html
Container Queries Baseline Widely available as of 14 August 2025.

# data[].attributes.slidedeck.data[].slides[].desc.html
Choose your own Baseline Adopt a Baseline year that makes sense for your audience.

# data[].attributes.slidedeck.data[].slides[].desc.html
https://chrome.dev/google-analytics-baseline-checker

# data[].attributes.slidedeck.data[].slides[].desc.html
Your Baseline Widely available or the Baseline year that you’ve decided to adopt. Everything past that line can be used without fallbacks or polyfills.

# data[].attributes.slidedeck.data[].slides[].desc.html
Baseline doesn’t create a hard line, past which you can never go.

# data[].attributes.slidedeck.data[].slides[].desc.html
What’s the fallback? Some features make a straightforward progressive enhancement.

# data[].attributes.slidedeck.data[].slides[].desc.html
p{ text-wrap: pretty; } https://developer.chrome.com/blog/css-text-wrap-pretty

# data[].attributes.slidedeck.data[].slides[].desc.html
https://developer.chrome.com/blog/css-text-wrap-pretty

# data[].attributes.slidedeck.data[].slides[].desc.html
.scroller { scrollbar-color: hotpink blue; } https://developer.chrome.com/docs/css-ui/scrollbar-styling

# data[].attributes.slidedeck.data[].slides[].desc.html
Feature queries in CSS Some features can have a fallback to another CSS method, with a few lines of extra CSS wrapped in @supports.

# data[].attributes.slidedeck.data[].slides[].desc.html
@supports (grid-template-columns: subgrid) { .subgrid { grid-template-columns: subgrid; } }

# data[].attributes.slidedeck.data[].slides[].desc.html
Is there a polyfill? The most frequently asked of questions when introducing a new feature.

# data[].attributes.slidedeck.data[].slides[].desc.html
The search for gold standard polyfills The perfect polyfill is hard to find.

# data[].attributes.slidedeck.data[].slides[].desc.html
A polyfill that we can recommend for all cases is unusual. Most have some caveats, or require an understanding of the environment. • You have understanding of your site and how the polyfill is used. • You can test to check for performance issues. • You understand the team maintaining the site and whether you are able to address any issues that might arise later due to the polyfill.

# data[].attributes.slidedeck.data[].slides[].desc.html
https://gridlanes.webkit.org

# data[].attributes.slidedeck.data[].slides[].desc.html
.container { display: grid-lanes; grid-template-columns: repeat(4, 1fr); flow-tolerance: 1em; gap: 1ch; }

# data[].attributes.slidedeck.data[].slides[].desc.html
// Check if CSS Grid Lanes is NOT supported if (!CSS.supports(‘display’, ‘grid-lanes’)) { // Dynamically load masonry.js const script = document.createElement(‘script’); script.src = ‘https://unpkg.com/masonry- layout@4/dist/masonry.pkgd.min.js’; script.onload = function() { // Use Masonry.js after the script loads new Masonry(‘.grid’, { itemSelector: ‘.grid-item’, columnWidth: 200, }); }; document.head.appendChild(script); } https://webkit.org/blog/17758/when-will-css-grid-lanes-arrive-how-long-until-we-can-use-it/

# data[].attributes.slidedeck.data[].slides[].desc.html
What’s the path to Baseline? How long will it take for people to have this feature?

# data[].attributes.slidedeck.data[].slides[].desc.html
Newly available features These features are already interoperable, they haven’t reached your Baseline yet.

# data[].attributes.slidedeck.data[].slides[].desc.html
@property —myColor { syntax: ‘<color>’; inherits: false; initial-value: hotpink; }

# data[].attributes.slidedeck.data[].slides[].desc.html
How are you using the feature? Even with one feature, some uses may be easier to fallback.

# data[].attributes.slidedeck.data[].slides[].desc.html
https://web.dev/blog/at-property-baseline

# data[].attributes.slidedeck.data[].slides[].desc.html
Look into the future of browser support Baseline gives you a way to know “how long until I can use?”

# data[].attributes.slidedeck.data[].slides[].desc.html
https://web-platform-dx.github.io/web-features-explorer/features/subgrid

# data[].attributes.slidedeck.data[].slides[].desc.html
Single-browser implementations How to think about features that are only in one browser.

# data[].attributes.slidedeck.data[].slides[].desc.html
https://developer.mozilla.org /docs/Web/API/Background_Fetch_API

# data[].attributes.slidedeck.data[].slides[].desc.html
Single-browser implementations need to be carefully considered. Use them if: • You are happy with the fallback strategy. • You are able to watch out for changes to the feature as it progresses to more than one engine. Avoid these features when handing the site over to a client who might not have the ability to make updates.

# data[].attributes.slidedeck.data[].slides[].desc.html
Is the feature on a standards track? This means that it’s being developed within a standards organization—for example a CSS Working Group working draft.

# data[].attributes.slidedeck.data[].slides[].desc.html
https://wpt.fyi/interop-2026

# data[].attributes.slidedeck.data[].slides[].desc.html
Understand standards positions If a feature has a negative standards position from one browser, it’s unlikely they will implement it until something changes.

# data[].attributes.slidedeck.data[].slides[].desc.html
Missing in one browser So close! Not experimental, but also not Baseline.

# data[].attributes.slidedeck.data[].slides[].desc.html
https://webstatus.dev/features/contrast-color

# data[].attributes.slidedeck.data[].slides[].desc.html
https://webstatus.dev/stats

# data[].attributes.slidedeck.data[].slides[].desc.html
ul li::marker { color: red; font-size: 1.5em; }

# data[].attributes.slidedeck.data[].slides[].desc.html
ul li::marker { color: red; font-size: 1.5em; }

# data[].attributes.slidedeck.data[].slides[].desc.html
li.cat::marker { content: ” “; } li.dog::marker { content: ” “; } li.panda::marker { content: ” ” }

# data[].attributes.slidedeck.data[].slides[].desc.html
const today = Temporal.Now.plainDateISO(); console.log(today.toString()); // 2026-06-18 Temporal API

# data[].attributes.slidedeck.data[].slides[].desc.html
https://piccalil.li/blog/date-is-out-and-temporal-is-in/

# data[].attributes.slidedeck.data[].slides[].desc.html
#progress { position: fixed; left: 0; top: 0; width: 100%; height: 1em; background: red; transform-origin: 0 50%; animation: grow-progress auto linear; animation-timeline: scroll(); } https://developer.chrome.com/docs/css-ui/scroll-driven-animations

# data[].attributes.slidedeck.data[].slides[].desc.html
https://developer.chrome.com/docs/css-ui/scroll-driven-animations

# data[].attributes.slidedeck.data[].slides[].desc.html
scroll-driven-animations.style

# data[].attributes.slidedeck.data[].slides[].desc.html
Two implementations more stability If two engines have implemented it’s far less likely the specification will change.

# data[].attributes.slidedeck.data[].slides[].desc.html
https://web-platform-dx.github.io/web-features-explorer/features/scheduler

# data[].attributes.slidedeck.data[].slides[].desc.html
Give browsers your use cases! Showing why you need a feature can help to get it prioritized.

# data[].attributes.slidedeck.data[].slides[].desc.html
AI and coding agents Do agents understand how to use new features?

# data[].attributes.slidedeck.data[].slides[].desc.html
https://developer.chrome.com/docs/modern-web-guidance

# data[].attributes.slidedeck.data[].slides[].desc.html
Browser support We can’t get away from “it depends” but we can make decisions based on data and knowledge of our audience and constraints.

# data[].attributes.slidedeck.data[].slides[].desc.html
Define your Baseline Use your audience data to pick a Baseline year, or use Widely available as your Baseline.

# data[].attributes.slidedeck.data[].slides[].desc.html
Who will maintain the site in future? This can help you know how conservative you should be when it comes to experimental features or the use of polyfills.

# data[].attributes.slidedeck.data[].slides[].desc.html
Understand a feature’s path to Baseline Is it Newly available, implemented in two browsers, or a single browser implementation?

# data[].attributes.slidedeck.data[].slides[].desc.html
What’s the fallback? If you’ve decided to use a feature not in Baseline, what’s the experience for users who don’t have the feature.

# data[].attributes.slidedeck.data[].slides[].desc.html
What’s the future? If you use a polyfill, do you have a removal strategy when the feature becomes part of your Baseline? If using an experimental feature, how are you tracking potential changes to it?

# data[].attributes.slidedeck.data[].slides[].desc.html
Use tools to support your decisions Whether coding agents or Chrome DevTools, Browserslist or ESLint. Tools can help you stay on track.

# data[].attributes.slidedeck.data[].slides[].desc.html
Use Baseline and the data around it to feel more confident when using features that are not yet part of your Baseline.

# data[].attributes.slidedeck.data[].slides[].desc.html
Thank you