HTML5 & CSS3: compatibility issues
In the past weeks, I have posted different articles about HTML5 and CSS3. In almost every one of them, we ended up describing the possible compatibility issues we might face implementing new features and solutions offered by the two standards. As a start, I would like to share some thoughts about the use of HTML5 and CSS3.
a) Do we really need them? What I am saying is that we do not really want to use new features just because they are cool and they make us great web designers. We need to understand when new stuff really serves our purposes. If it’s only a matter of style – believe me – it is not worth it.
b) Are we ready for possible non standard solutions? In the past when HTML or CSS couldn’t help us with a specific effect, we looked for help with JavaScript. Today it is the same: Modernizr, CSS3 PIE or Selectivzr can really help us in dealing with compatibility issues. That might affect site speed and usability.
c) Are HTML5 and CSS3 the future? Well, this is difficult to answer. It is my personal opinion that they will be. It is decided – someway.
d) Are HTML5 and CSS3 really helping us? Before the (slow) introduction of the new standards, we were used to find alternative solutions (as said just before). HTML5 and CSS3 were conceived to help us in creating astonishing new web site in an easier way. With compatibility issues, we are actually back to square one: we need possibly more workarounds to ensure that – almost – every possible user will be able to use our web site the way it was meant to. That means more work just for possibly not necessary embellishments.
But we are frantically drawn to new stuff, aren’t we? We need to explore and know about every single HTML5 and CSS3 new feature. And I am. The fact that I published more than one article about it lately, proves that. However, it is again a matter of browsers and HTML5 and CSS3 support.
I just want to stress the idea once more: before using HTML5 or CSS3 new features, think about the purpose. If it is an enhancement and it improves usability, then we should use it. If it’s just a matter of embellishment, it might be not worth the efforts and the energy.
The above questions describe general and plausible worries. I believe that before searching for solutions in new standards we should spend some time in answering them. After that, if we still think a property or a particular selector is what we need, then we should start to investigate the browser support and compatibility. Then – because the work is not finished – we need to take into account all the possible fallbacks. That means investigate what will happen if a visitor uses a non supported browser: what will he see? Will he be able to navigate the site? Or will he be able to enjoy his staying on the site and to use the complete set of features conceived for a correct and full site experience?
Said that, we arrived to a point where we actually need to know exactly which HTML5 and CSS3 features are supported by – possibly – every browser. Recently I found a web site that might help us in understanding that. The place is called HTML5 & CSS3 Support. Basically it is a bunch of tables where you can check if new features are supported. The browsers considered are:
- Windows:
1) Firefox (3.06 and 4.0)
2) Safari (5)
3) Internet Explorer (6, 7, 8, 9 and 10)
4) Chrome (10)
5) Opera (11.1)
- Mac:
1) Firefox (4)
2) Safari (5)
3) Opera (11.1)
That’s quite a good benchmark, especially for Internet Explorer. On the latter I would like you to notice that Internet Explorer is not as strong as it was just a few years ago. More and more people are using alternative browsers and probably the increasing number of mobile users will reduce further the number of IE users.
Back to the HTML5 & CSS3 Support site, it shows compatibility for the mentioned browsers for:
a) CSS3 properties
b) CSS3 selectors
c) HTML5 web applications
d) HTML5 graphics and embedded content
e) HTML5 audio and video codecs
f) HTML5 forms inputs
g) HTML5 forms attributes
All we need to know, after all… and possibly more than that.
The site offers the possibility to check what is supported by the user browser, so that we can see “live” what will work on our very own browser. To do so just go to What's my IP?
I will probably post more information on the subject in the future, but that’s all for now.
Happy programming to all.
a) Do we really need them? What I am saying is that we do not really want to use new features just because they are cool and they make us great web designers. We need to understand when new stuff really serves our purposes. If it’s only a matter of style – believe me – it is not worth it.
b) Are we ready for possible non standard solutions? In the past when HTML or CSS couldn’t help us with a specific effect, we looked for help with JavaScript. Today it is the same: Modernizr, CSS3 PIE or Selectivzr can really help us in dealing with compatibility issues. That might affect site speed and usability.
c) Are HTML5 and CSS3 the future? Well, this is difficult to answer. It is my personal opinion that they will be. It is decided – someway.
d) Are HTML5 and CSS3 really helping us? Before the (slow) introduction of the new standards, we were used to find alternative solutions (as said just before). HTML5 and CSS3 were conceived to help us in creating astonishing new web site in an easier way. With compatibility issues, we are actually back to square one: we need possibly more workarounds to ensure that – almost – every possible user will be able to use our web site the way it was meant to. That means more work just for possibly not necessary embellishments.
But we are frantically drawn to new stuff, aren’t we? We need to explore and know about every single HTML5 and CSS3 new feature. And I am. The fact that I published more than one article about it lately, proves that. However, it is again a matter of browsers and HTML5 and CSS3 support.
I just want to stress the idea once more: before using HTML5 or CSS3 new features, think about the purpose. If it is an enhancement and it improves usability, then we should use it. If it’s just a matter of embellishment, it might be not worth the efforts and the energy.
The above questions describe general and plausible worries. I believe that before searching for solutions in new standards we should spend some time in answering them. After that, if we still think a property or a particular selector is what we need, then we should start to investigate the browser support and compatibility. Then – because the work is not finished – we need to take into account all the possible fallbacks. That means investigate what will happen if a visitor uses a non supported browser: what will he see? Will he be able to navigate the site? Or will he be able to enjoy his staying on the site and to use the complete set of features conceived for a correct and full site experience?
Said that, we arrived to a point where we actually need to know exactly which HTML5 and CSS3 features are supported by – possibly – every browser. Recently I found a web site that might help us in understanding that. The place is called HTML5 & CSS3 Support. Basically it is a bunch of tables where you can check if new features are supported. The browsers considered are:
- Windows:
1) Firefox (3.06 and 4.0)
2) Safari (5)
3) Internet Explorer (6, 7, 8, 9 and 10)
4) Chrome (10)
5) Opera (11.1)
- Mac:
1) Firefox (4)
2) Safari (5)
3) Opera (11.1)
That’s quite a good benchmark, especially for Internet Explorer. On the latter I would like you to notice that Internet Explorer is not as strong as it was just a few years ago. More and more people are using alternative browsers and probably the increasing number of mobile users will reduce further the number of IE users.
Back to the HTML5 & CSS3 Support site, it shows compatibility for the mentioned browsers for:
a) CSS3 properties
b) CSS3 selectors
c) HTML5 web applications
d) HTML5 graphics and embedded content
e) HTML5 audio and video codecs
f) HTML5 forms inputs
g) HTML5 forms attributes
All we need to know, after all… and possibly more than that.
The site offers the possibility to check what is supported by the user browser, so that we can see “live” what will work on our very own browser. To do so just go to What's my IP?
I will probably post more information on the subject in the future, but that’s all for now.
Happy programming to all.