This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
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.
- See Also: Should I Prefix? —David Hund
- See Also: Autoprefixer —Andrey Sitnik
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.
- Related: A11Y Project: How to Hide Content
<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.
<link rel="stylesheet" media> CSS Download #
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.
- Google Chrome Status
- Firefox Platform Status
Modern.IE Internet Explorer StatusMicrosoft Edge Platform Status
Honorable Mentions #
These are not exactly compatiblilty tables (but I would consider them to be similar and very useful resources):
- HTML5 Please by Multiple authors
- Game Console Browsers by Anna Debenham
- CSS Triggers by Paul Lewis
- The Web Platform Specification List
- HTTP Archive Interesting Stats
Additions #
I’m sure I’ve missed some—if you have another please send me a tweet or leave me a comment!
Retweet to share this post
This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
Zach Leatherman | Sciencx (2015-03-18T05:00:00+00:00) Compatibility Tables Compendium. Retrieved from https://www.scien.cx/2015/03/18/compatibility-tables-compendium/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.