Baseline progressive enhancement

Support for view transitions for regular websites (as opposed to single-page apps) will ship in Chrome 126. As someone who’s a big fan—to put it mildly—I am very happy about this!

Hopefully Firefox and Safari won’t be too far behind. But it’s still worth adding view transitions to your website even if not every browser supports them. They’re the perfect example of a progressive enhancement.

The browsers that don’t yet support view transitions won’t be harmed in any way if you give them the CSS for view transitions. They’ll just ignore it. For users of those browsers, nothing changes.

Then when those browsers do ship support for view transitions, your website automatically gets an upgrade for those users. Code you’ve already written starts working from one day to the next.

Don’t wait, is what I’m saying.

I really like the Baseline initiative as a way to track browser support. It’s great to see it in use on MDN and Can I Use. It’s very handy having a glanceable indication of which browser features are newly available and which are widely available.

But…

Not all browser features work the same way. For features that work as progressive enhancements you don’t need to wait for them to be widely available.

Service workers. Preference queries. View transitions.

If a browser doesn’t support one of those features, that’s fine. Your website won’t break in that browser.

Now that’s not true of all browser features, particularly some JavaScript APIs. If a feature is critical for your site to function then you definitely want to wait until it’s widely supported.

Baseline won’t tell you the difference between those two different kinds of features.

I don’t want Baseline to get too complicated. Like I said, I really like how it’s nice and glanceable right now. But it would be nice if there way some indication that a newly-available feature is a progressive enhancement.

For now it’s up to us to make that distinction. So don’t fall into the trap of thinking that just because a feature isn’t listed as widely-available you can’t use it yet.

Really you want to ask two questions:

  1. How widely available is this feature?
  2. Can this feature be used as a progressive enhancement?

If Baseline tells you that the answer to the first question is “newly-available”, move on to the second question. If the answer to that is “no, it can’t be used as a progressive enhancement”, don’t ship that feature in production just yet.

But if the answer to that second question is “hell yeah, it’s a progressive enhancement!” then go for it, regardless of the answer to the first question.

Y’know, there’s a real irony in a common misunderstanding around progressive enhancement: some people seem to think it’s about not being able to use advanced browser features. In reality it’s the opposite. Progressive enhancement allows you to use advanced browser features even before they’re widely supported.

Have you published a response to this? :

Responses

Katy Swain

Becoming interested in web development (academically, I hasten to add), after a decade away, is a tumble down a rabbit hole into a strange world of unfamiliar frameworks and best practices which, under interrogation, never seem to make much sense. Which is why it is so, so comforting to find that @adactio is still, after all these years, writing lucidly and perfectly reasonably about simple fundamental principles like progressive enhancement.

https://adactio.com/journal/21128

Baseline progressive enhancement

# Posted by Katy Swain on Wednesday, May 15th, 2024 at 10:20pm

Rachel Andrew

@adactio Yes, the hope is that we narrow the number of things people need to worry about making that kind of decision on. If you know something is newly available, you know it probably needs a bit of care (checking what the fallback experience is) but once something is widely available most people can just use it.

Rachel Andrew

@adactio We did look initially at including polyfills and PE, however it then becomes much more subjective and based on individual sites as to what can be progressively enhanced or polyfilled.

molily

@adactio These are important points. I second the idea that browser support info should answer the question “can I use it safely to enhance my site now?”. Baseline’s “widely available” and “newly available” helps little in this regard. (But have I major issues with Baseline anyhow and voiced similar concerns when it was first released: https://molily.de/browser-compatibility-baseline/ – I have to say that many points have improved since.)

On browser compatibility and support baselines · molily

# Posted by molily on Thursday, May 16th, 2024 at 7:47pm

3 Shares

# Shared by jfroehlich on Wednesday, May 15th, 2024 at 8:35pm

# Shared by PK_info on Thursday, May 16th, 2024 at 1:52pm

# Shared by molily on Thursday, May 16th, 2024 at 7:57pm

7 Likes

# Liked by Royce Williams on Wednesday, May 15th, 2024 at 4:48pm

# Liked by Rainer on Wednesday, May 15th, 2024 at 4:48pm

# Liked by Kristen Grote on Wednesday, May 15th, 2024 at 6:50pm

# Liked by jfroehlich on Wednesday, May 15th, 2024 at 8:35pm

# Liked by ege :amogus: on Wednesday, May 15th, 2024 at 8:35pm

# Liked by PK_info on Thursday, May 16th, 2024 at 1:51pm

# Liked by Roma Komarov on Thursday, May 16th, 2024 at 5:19pm

1 Bookmark

# Bookmarked by Elly Loel on Thursday, May 16th, 2024 at 12:00am

Related posts

Streamlining HTML web components

Some handy tips courtesy of Chris Ferdinandi.

Progressively enhancing maps

How I switched to high-resolution maps on The Session without degrading performance.

Applying the four principles of accessibility

Here’s how I interpret the top-level guidance in the Web Content Accessibility Guidelines.

My approach to HTML web components

Naming custom elements, naming attributes, the single responsibility principle, and communicating across components.

Pickin’ dates

HTML web components for augmenting date inputs.

Related links

What’s new in web - YouTube

Nice to see Clearleft’s browser support policy get a shoutout from Rachel during her Google IO talk.

Tagged with

Baseline’s evolution on MDN | MDN Blog

These updated definitions makes sense to me:

  1. Newly available. The feature is marked as interoperable from the day the last core browser implements it. It marks the moment when developers can start getting excited and learning about a feature.
  2. Widely available. The feature is marked as having wider support thirty months or 2.5 years later. It marks the moment when it’s safe to start using a feature without explicit cross-browser compatibility knowledge.

Tagged with

I’m more proud of these 128 kilobytes than anything I’ve built since | by Mike Hall | Jul, 2025 | Medium

I don’t normally link to articles on Medium—I respect you too much—and I do wish this were written on Mike Hall’s own site, but this is just too good not to share.

And don’t dismiss this as a nostalgiac case study from the past:

At no point did the constraints make the product feel compromised. Users on modern devices got a smooth experience and instant feedback, while those on older devices got fast, reliable functionality. Users on feature phones got the same core experience without the bells and whistles.

The constraints forced us to solve problems in ways we wouldn’t have considered otherwise. Without those constraints, we could have just thrown bytes at the problem, but with them every feature had to justify itself. Core functionality had to work everywhere, and without JavaScript crutches proper markup became essential.

This experience changed how I approach design problems. Constraints aren’t a straitjacket, keeping us from doing our best work; they are the foundation that makes innovation possible. When you have to work within severe limitations, you find elegant solutions that scale beyond those limitations.

Tagged with

A Web Component UI library for people who love HTML | Go Make Things

I’m obviously biased, but I like the sound of what Chris is doing to create a library of HTML web components.

Tagged with

Hiding elements that require JavaScript without JavaScript :: dade

This is clever: putting CSS inside a noscript element to hide anything that requires JavaScript.

Tagged with

Previously on this day

2 years ago I wrote Hosting DIBI

On stage in Edinburgh.

3 years ago I wrote Image previews with the FileReader API

Adding `alt` text to uploaded images.

4 years ago I wrote The cage

Responding to a very bad take on surveillance capitalism.

9 years ago I wrote Content Buddy

Making myself available for proof-reading, editing, and general content wrangling.

10 years ago I wrote This is for everyone with a certificate

The browser beatings will continue until morale improves.

10 years ago I wrote 100 words 054

Day fifty four.

14 years ago I wrote Mobilism browser panel

Hats off to the conference, and hats off to the browser vendors who showed up.

23 years ago I wrote Attack of the Clones

I got my days mixed up yesterday. I’ll be seeing Attack Of The Clones sooner than I realised - midnight tonight.