Want to freshen up your website with new HTML5 and CSS3? This resource will quickly tell you if the new web elements and styles are compatible with your selected browsers for mobile or desktop.
CSSYou 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:
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).
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
- 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.
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.
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.
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.