The Can I Use website keeps data on compatibility of browsers with the latest HTML5, CSS3, and SVG code. Here is a way to get the data source and create your own visualizations to illustrate the latest statistics.
I've previously written about the Can I Use compatibility tables that list support for HTML5, CSS3, SVG and other features for desktop and mobile browsers. Now you can gain access to the data behind the list of support tables with the GitHub Can I Use repository. Since the data is open source, several folks have taken it and created their own visualizations to display the information in interesting ways.
Available as a compressed zip file, the code download contains JSON files for every feature found on the canisuse.com website, and now that they are maintained on GitHub, it allows anyone to update or contribute to the supporting data used on the website. The zip file is 185KB, and the directory size once opened is around 661KB, so it's not too large to handle; the JSON files average about 3-4KB each. The list of supported changes includes the following feature information that can be modified:
If you want to add a new feature then you just have to add another JSON file with the base file name as the feature ID, and if you do not have all the feature information available, make sure to set the "shown" flag to false.
Currently these unsupported changes are not possible:
- Add a new browser version
- Add a test to any given feature
- Add any object properties not already defined above
- Modify the usage_perc_y or usage_perc_a values, since these are generated values
It also means that individuals are now open to create their own visualizations of the data which can be represented in many creative alternatives to the traditional and lackluster table and index style found on the Can I Use website today. In addition, several visualizations allow you to combine multiple features, giving you a better view of the support matrix based on combinations of features that you might want to include in your development projects.
Browser Usage/Feature StatisticsThe Browser Usage/Feature Statistics application, created by Ben Toews, is available from GitHub as the D3 Browser Feature Stats Visualization, and presents the Can I Use data in a pack chart powered by D3 (Data Driven Documents). The innermost circles represent specific versions of web browsers, the next level of circles represents the browser family, and the outermost circle represents the universe of web browsers. A red circle means that the particular feature is not supported within that browser, and green means that it is supported within that browser. As the values bubble up, the weight is listed by a percentage of people using that particular browser. The CSS3 category with the CSS Gradients feature selected is displayed in Figure B where Chrome 25 is utilized by 28% of the global users, but not supported by IE9 or below, Opera 7 and below, and Firefox 3.
I Want To Use and mobile I Want To UseIf you are looking to see what percentage of users have browsers that fully support a set of features, then you can select a range of browser features that you would like to use in your website or web application project. The I Want To Use visualization will display the ratio of the web that can use your chosen features split by desktop and mobile, and then the browser share by the ratio of the entire web that can use your selected features aggregated by browser. The data here is also supplied by the Can I Use website. The example in Figure C displays the overall percentage of users that can use the CSS3 multicolumn layout feature with overall desktop support at 56.84% and overall mobile support at 13.16%. The Chrome browser has the most support with 32.2% of total support.
Figure CMobile I Want To Use provides you with the ratio of the entire web that can use your selected features aggregated by mobile browser. The example in Figure D displays the total percentage of mobile users that can use the Content Editable Attribute (Basic Support) (67.03%) as well as the total browser share -- with iOS Safari leading the pack with 7.192%.
The Evolution of the WebThe color bands in this visualization represent the interaction between web technologies and browsers, which brings to life the many powerful web apps that are in use today. Portions of the data used in this visualization are taken from the Can I Use website, in addition to Wikipedia, W3C, HTML5rocks.com, and the Mozilla Developer Network. Figure E displays the timeline of browsers and the various features as they are implemented that coincide with browser versions and updates. The top browser line that terminates toward the end of 2007 is Netscape version 9, and if you scroll to the beginning of the visualization, you can see Mosaic displayed as the first browser that was implemented in March of 1993.
HTML5 and CSS3 readinessThe HTML5 & CSS3 Readiness visualization created by Paul Irish and Divya Manian is intended to show how much support exists in the browsers for each feature in HTML5 and CSS3. Each browser is represented with a tile on the bar and gets an equal width of space within the bar, therefore, if a bar is full, that means that the feature selected has universal support among all the 8 browsers which are compared with the readiness visualization application. Data has been added to include 2008 through 2013. For example, Figure F shows the 3D Transforms feature has a level of support which is limited to Chrome, Safari, Firefox and IE10.
Mash Up visualizationOne other visualization created from the Can I Use data was developed by Raymond Camden using his mash ups with two demos. The first demonstration uses gradients to represent selected features across six browsers. His second demonstration uses the worst-case scenario, which shows red if any one of the features is not supported in the particular browser (Figure G) with the CSS3 Animation feature selected.
This handful of visualizations are just a start, and it will be interesting to see how many more visualizations can be created from the Can I Use data. Each one provides a new way of looking at how HTML5, CSS3 and other features are being utilized and accepted by various desktop and mobile browsers.