Zach’s ugly mug (his face) Zach Leatherman

Compatibility Tables Compendium

March 18, 2015 On Twitter (archived)

When it comes to web development, nothing beats a good compatibility table (especially not a listicle about compatibility tables). They help you make important decisions about new web feature production readiness, inform our best practices, and help us troubleshoot peculiar issues in fringe browsers. To that end, I’ve collected a list of useful compatibility tables that I thought were worth sharing.

Can I use

JavaScript CSS HTML SVG Alexis Deveria

These are the best. Everyone knows about these for a reason. They’re the most useful, most updated, most comprehensive compatibility tables. They have made development decisions easier and I can easily declare them one of the best resources on the web.

Mozilla Developer Network

If you’re looking for a specific web feature, a JavaScript API, or even a CSS property, chances are that the MDN documentation has a support table at the bottom. Just include MDN in your search engine query to easily find the community sourced documentation.

Browserscope

Networking Performance Steve Souders and Lindsey Simon

A huge number of tests, most notably the Network tab. You can learn a lot just by reading the tooltips on the table headers there.

The JSKB tab includes compatibility tables for addEventListener (DOM2 Events), getComputedStyle (basically, not on IE <=8).

ECMAScript Compatibility

JavaScript Kangax

The resource for ES5, ES6, and ES7 compatibility with exhaustive browser support, even including support tables for PhantomJS and Rhino. A really beautiful, encyclopedic, unbeatable reference.

CSS3 Please

CSS Paul Irish, Jonathan Neal

The inline comments on each property are a great compatibility table for CSS vendor prefixes.

The State of Web Type

Typography Bram Stein

Has some overlap with Can I Use on font formats and CSS properties, The State of Web Type really shines for its tables on OpenType Features, specifically the many different options available to font-feature-settings.

Font Family Reunion

CSS Zach Leatherman

You might recognize this one (I feel a little bit of shame for including it but only enough not to call it a shameless plug). It shows the default fonts available for use in CSS font-family across browsers and operating systems.

Unify for Unicode Characters

Unicode Accessibility John Holt Ripley

Shows which Unicode characters are safe to use across an amazing number of mobile devices. Also a great compatibility table of how screen readers will read each character.

Mobile HTML5

JavaScript CSS HTML SVG Maximiliano Firtman

Some overlap with Can I Use here but importantly does include some fringe mobile browsers like Amazon Silk, BlackBerry 5 and 6 (as well as separate entries for tablets), and the Nokia Browser.

Web Browser Compatibility

JavaScript CSS Cody Lindley

Very specific reports on JavaScript APIs, down to individual method support. Also includes CSS properties. A great, comprehensive resource.

Screen reader support for hidden content

Accessibility Steven Faulkner and the Paciello Group

A really great look into the different methods for hiding content from screen readers, with tests to show screen reader support for each. Think HTML5 hidden, aria-hidden, CSS display: none, and other hiding techniques.

<input type="file"> on Mobile

HTML Viljami Salminen

(Originally from 2012 but it looks like it’s still being updated)

Image Download with Media Queries

CSS Networking Performance Tim Kadlec

Shows CSS background-image code using different media query configurations and which browsers will download non-applicable images.

CSS Networking Performance Scott Jehl

Most browsers download all stylesheets immediately, even if their media attribute does not currently apply (think print or nonsense).

Browser Hacks

CSS JavaScript Hugo Giraudel, Tim Pietrusky, Fabrice Weinberg

A lot of things can be feature tested. Some things can’t. Before you reach for the User Agent string, why not try a weak inference instead?

QuirksMode

JavaScript CSS Peter-Paul Koch

QuirksMode will always have a special place on this list because PPK popularized the browser compatibility table. His investment into the tables on his site have helped countless people over the years and will likely continue to do so.

CSS Values

CSS Louis Lazaris

A great search interface for quick reference to CSS properties and browser support.

JavaScript Compatibility Checker

JavaScript Thijs Busser

A really impressive tool that will check JavaScript code for API use and show you your browser support matrix for that code!

CSS in Email Clients

CSS Campaign Monitor

Chris Coyier was nice enough to share this one. Campaign Monitor helps you write email using the CSS features that are available on different email clients.

Features Coming Soon

New features currently being discussed or developed. Great to see what’s coming down the pipe.

Honorable Mentions

These are not exactly compatiblilty tables (but I would consider them to be similar and very useful resources):

Additions

I’m sure I’ve missed some—if you have another please send me a tweet or leave me a comment!


< Newer
Tech Meetup at the White House
Older >
Better @font-face with Font Load Events—SmashingConf Whistler

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

9 Comments
  1. Louis Lazaris Disqus

    19 Mar 2015
    Very nice collection!I posted something similar a few months back:http://www.sitepoint.com/re...I've got at least 3 in my post that aren't listed in yours. And I also have two of my own CSS references:http://cssvalues.com/http://css3clickchart.com/Both of which include compat info, although they are somewhat in need of an update, which I'll get to eventually. :)
    1. zachleat Disqus

      19 Mar 2015
      Awesome, thanks!http://jscc.info/ is especially fascinating!
  2. Rachel Nabors Disqus

    20 Mar 2015
    "Are We Animated Yet?" covers the Web Animation API coverage in FireFox nightly: https://birtles.github.io/a... Soon to expand coverage for other browsers.
    1. zachleat Disqus

      21 Mar 2015
      Yes! I haven’t seen this one before—thank you!
  3. Ivan Nikolić Disqus

    22 Mar 2015
    Compatibility table for different Sass engines: http://sass-compatibility.g...
  4. James Joseph Finn Disqus

    30 Mar 2015
    Surprised I didn't see this one I originally learned about from you: http://www.iwanttouse.com – similar to BrowserHacks for feature forking lookup
    1. zachleat Disqus

      30 Mar 2015
      Ah, you’re right—I should have included it!
  5. axlotl Disqus

    10 Aug 2015
    Might be a good place to mention the npm command line caniuse tool: https://github.com/sgentle/...
  6. Merih Akar Disqus

    11 Aug 2015
    CSS3 Test (by Lea Verou) might have a place under honorable mentions: http://css3test.com/
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)