While it might not be the most visually appealing website, When Can I Use… (WCIU) makes up for the lack of style with detailed statistics and options on browser compatibility with current styles and design elements. Compatibility tables and an exhaustive index indicate which desktop and mobile browsers support which HTML5 elements, CSS3 styles, SVG vector graphics, JS API for JavaScript, Application Programming Interface objects, and other elements. As of this writing, the latest data contributions to the WCIU were current from October 1, 2012.

Figure A

CSS

You need to find the latest compatibility for @font-face Web Fonts? No problem, just click on the “@font-face Web fonts” link at the top of the CSS section and it takes you to the support table for the method of displaying fonts downloaded from websites. Each table gives you an initial abbreviated list of browsers which typically includes the following: IE, Firefox, Chrome, Safari, Opera, iOS Safari, Opera Mini, Android Browser, and Blackberry Browser. Click on the link to Show All Versions, and in this example, it displays 19 versions back, as shown in Figure B, displayed in Chrome Version 23.0.1271.64 m:

Figure B

Notice the color key for level of support at the top of Figure B. Currently the @font-face Web Fonts has a global support of 77.91%, a partial support of 15.15%, with total support of 93.08%. If you have a specific browser your users utilize due to company or organizational standards, you can click the Show Options tab and filter your search by modifying the category, status, web browser, mobile browser, version browser usage percent threshold, and alternatives, such as does the browser accept polyfills and what are the accessible colors. You can also alter the sort. All the options are displayed in Figure C:

What amazes me as I scroll through the various CSS styles is the level of total global support that many of them currently have achieved within all browsers. With support percentages for CSS3 Border Radius at 80.88%, CSS3 Box Shadow at 80.69%, CSS3 Opacity at 95.62%, CSS3 Text Shadow at 67.16%, and Border Images at 64.84%, many CSS3 properties are making good inroads to full browser support and compatibility. The CSS category has over forty-eight style properties listed as shown in the column (below right).

HTML5

The Can I Use… compatibility tables provide a run down on all HTML5 features including:

  • Audio Element, which is a method of playing sound on webpages (without requiring a plug-in), currently at 80.12% support rate
  • Canvas (Basic Support), a method of generating fast, dynamic graphics using JavaScript is currently at 83.12%
  • Drag and Drop, a method of easily dragging and dropping elements on a page, requiring minimal JavaScript, is currently at 83.57%
  • WebGL 3D Graphics Canvas, which is a method of generating dynamic 3D graphics using JavaScript, accelerated through hardware currently sits at 53.54%
  • Video, a method of playing videos on webpages (without requiring a plug-in) is currently at 80.67%.

This short list only highlights some of the more popular features, while the full list in the HTML5 category includes over twenty-four HTML5 elements as displayed below.

Figure E

JS API

The JavaScript and API include JSON Parsing is a method of converting objects to JSON strings and JSON back to objects using JSON.stringify() and JSON.parse(), which is currently supported in 94.05% of all browsers globally.

Web Storage – name/value pairs is a method of storing data locally like cookies, but for larger amounts of data (sessionStorage and localStorage, used to fall under HTML5), and currently has a 92.04% global support.

getComputedStyle is an API to get the current computed CSS styles applied to an element. This may be the current value applied by an animation or as set by a stylesheet. Currently, it has an 83.08% compatibility rate. These are just three of the more than twenty-six listings in the JS and API feature category as displayed below.

Figure F

SVG

Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for two-dimensional vector graphics, both static and dynamic (i.e., interactive or animated). The compatibility tables list a total of nine specifications including SVG (basic support), which has a global rate of 80.54%, SVG Fonts has the lowest of the SVG category, coming in at 42.89% global support.

Other

Lumped into the miscellaneous “Other” category, there are over twenty-four features. PNG alpha transparency is a method of displaying semi-transparent areas in PNG files and has 95.17% global support. Data URL’s is a method of embedding images and other files in webpages as a string of text, and has a 94.31% global support.

If you are looking to add HTML5 features, CSS3 elements, or SVG to your web development, but have been shy or weary of making the switch due to support issues, first check the compatibility tables provided by When Can I Use…, you might just be surprised at just how much support many of the new features and elements actually garner. It is especially encouraging if you know your target users are required to use one of the more current browser versions, which typically have the most support for HTM5 and CSS3.