PSD to HTML coders’ headache: CSS3/HTML5 vrs Browsers
Internet Browsers have come together to create the most awesome atomic power to save all HTML codes and on the other side, the new HTML5 with full RIA technologies destroyer has come to mess things around. Make your bets people, this fight is going to be vicious!
It would obviously be Internet Browsers the winners given the time, but right now, HTML5 is winning the battle. Never the less, there are some browsers way ahead of the game (Safari), whilst others have an intermediate (Firefox) or have a poor support (Internet Explorer).
This topic has become a headache to all PSD to HTML coders because theme designers must make sure it function on the 5 Internet Browsers which is a real challenge alone, and now with this new release there is nothing left other than wait.
There are some browsers testers you can find out there, such as:
The HTML5 test, score an indication of how well your browser supports the upcoming HTML5 standard and related specifications. It does not try to test all of the new features offered by it, nor does it try to test the functionality of each feature. It was created by Niels Leenheer and developed at Github.
FindMeByIP.com a simple app which reveals your browsers’ support for CSS3 and HTML5 features through an easy to read format. On this site you can find some browsers statics to know how are they working out
And for those who do not understand anything on the tables, here is a little translation:
- Internet Explorer does support font-face, it also display a marked lack of support for almost every kind of advanced/progressive feature. Hopefully the IE team will be able to look at this in a future release, for now it still gives our coders a headache for how much you cannot do with it, remember we have to get IE6 to 1%!
- Safari has by far the best feature set in the current market; it has an excellent support for CSS3 animation properties such as CSS Transforms & CSS Animations, which enable the developer to define javascript-like rotation, movement and easing to create any CSS website template. HTML5 features are well supported with Canvas, Video and Audio.
- Firefox has good support for features that you might be looking to use in your client work on a day-to-day basis, font-face, box-shadow, rgba() and border-radius all work nicely. It implements the first public draft of the Geolocation specification from the W3C.
- Google’s Chrome browser has a well-established reputation for being not only extremely fast at rendering JavaScript, but also robust in its support of cutting-edge HTML5 technologies. The hope is that these emerging standards will be widely used to power new web apps, as well as for playing animations, songs and videos in the browser without any plug-ins.
- Opera only support authors to specify multiple media resources for media elements. It does not represent anything on its own. It is used for plug-in content. Represents a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.
How is your browser working out for you?