There are a lot of difficult things in web development, but one of the toughest is keeping up with the insane level of progress that’s happening, particularly in the last few years. I often joke that I’m in an industry that reinvents itself every six months, but that may be too long a time scale.
At the same time you’ll hear about new, shiny features that make this or that difficult thing in web development easier or even possible (most often in CSS). But browsers are not a monolith and they implement different new and shiny features at different times, plus people are using browser versions that may or may not support that new and shiny feature. This makes knowing whether you have to use the old and busted way (I’m looking at you IE6, bane of my existence for so many years) or whether you can use that new and shiny way. Plus, it can be slightly different for any feature. Wait! Before you give up on web development all together, there are tools to help you know when you can use a feature and what versions of the major browsers support it. It’s called caniuse.com, and it has saved my bacon from an impending zombie onslaught more times than I can count.
For instance, I’ve been working on a new version of my portfolio for johnrhea.com (unless you’re coming from the future, that link still shows my old portfolio: Dr. Devel and Mr. Design, but I’m hoping to update it very, very soon. More on that in the coming weeks). One thing I wanted to use was the new @view-transition CSS rule that lets you animate between different pages. So I headed on over to caniuse.com and typed in “@view-transition” in the search bar. The results (as of this publication date) look like this:
There’s a lot of important information there. You’ll see it has a list of all the major browsers and a bunch of minor ones. The line of blocks that goes all the way across is the current/latest/non-beta releases. The ones below that line are upcoming versions and the ones above that line are previous versions. You’ll see that current versions of Chrome, Edge, Safari, and Opera on desktop support it plus Chrome for Android, Safari on iOS, and Android Browser on mobile. Firefox is the only major browser that doesn’t support it. For those in gray, the support is unknown.
So should I use this in my production site? Maybe. If I know that 90% of my audience is Firefox users, then it may not be worth my time to implement it. And even if they aren’t much of my audience, I probably don’t want to include critical information in those transitions. It probably wouldn’t be an issue for this feature, but could be true of a lot of other features, particularly if it doesn’t degrade gracefully (i.e. looks like zombie barf if the browser doesn’t support the feature).
In the upper right, you’ll also see the word Global and a percentage, in this case, 75.12%. That means approximately 75.12 percent of the browsers people use support this feature. You’ll never get 100%, unless browsers have supported the feature since the first epoch of the web, i.e. when AOL mailed you unsolicited disks every other day/the 90s, but the closer you get, the more likely it’s safe to use in production.
There’s a wealth of information there too. Try hovering over a particular browser version and it’ll show you the estimated percentage of people who use it. Sometimes you’ll see a browser block in yellow. This means a feature is partially supported or supported with a different syntax or something and footnotes will tell you the info you need to know.
But wait, there’s more! If you have the horror of needing to create HTML emails, there’s a sister site you’ll love called caniemail.com. It tames that wild wild west of web development and makes you cry less. (Multiply the number of browsers times the number of email clients subtract sanity and add a healthy dose of arbitrary choices, then multiply by six and you’ll have the number of headaches you’ll receive when doing email development.)
There’s also a similar service that focuses on accessibility: https://a11ysupport.io
Found another tool for this or want to take a pot shot at my hot take on email development? Let me know in the comments.