We are small web app development company. We are planning to upgrade to HTML5/CSS3 and we are going through training phase(We are using video tutorials). While HTML5/CSS3 seems promising, there seem to be so many issues with cross-browser compatibility as well as many new APIs. Is there any template we can use right away while waiting for full recommendation from W3C? Currently, are there libraries/tools we can use to ensure cross-browser support?
Help much appreciated. :)
Right now your best bet is to follow what the browsers can do. Therefore, follow the different vendors' browser development blogs on the subject.
By the way, HTML5 is mostly a set of unrelated features going from markup to new functionalities such as WebGL and client storage (WebSQL). HTML5 builds upon previous specs HTML standards and clarifies many features. On the other end, CSS is the culmination of CSS1+CSS2+CSS3.
Go on the web, all the information is there!
I will try to keep adding resources...
You don't "upgrade" to HTML5 and CSS3. HTML5 is HTML, period. Since it takes years and years for such standards to become finalized, you transition to using the new elements and properties. It's never a wholesale change where one day you are using all new tools with little regard for the older ones.
Libraries and templates are helpers but aren't necessities. Pickup elements and properties as you need them. Do not start using the new stuff just because it's there.
It will be a while before html & css3 will be supported but in the mean time if you would like to get a head start check out themeforest they have plenty html5 and php templates that you can start hacking away in. Another great tool is to check out this noupe post where they list some free html5/css3 tutorials.
Let's split the cross-browser compability into two parts: new HTML5 elements / attributes and HTML5 APIs.
Elements: Browsers that don't support the new HTML5 elements (like <section>), e.g. older versions of IE, will just print the content and ignore the styling. You can use a little JavaScript hack to make the elements stylable in IE: HTML5shim.
Attributes: Using the new HTML5 attributes is completly fine as well. Browsers that don't understand them will just ignore them. With Modernizr you can check if the HTML5 / CSS3 feature is available and if not just provide a fallback with JavaScript.
To provide support for the new HTML5 APIs you can use polyfills to add support for missing features. Here's a good list: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
By the way: It's a good idea to use some HTML5 APIs like localStorage as a progressive enhacment. If it's just a little feature that's for enhacing the user experience, it's fine to do it with HTML5 and let older browsers just have the normal version.
jQuery is the most popular cross-browser library. It will use HTML5 features on browsers that support it and rolls back gracefully to something else when needed. It's updated frequently and is very feature rich.
quirksmode http://www.quirksmode.org/compatibility.html is a list of all HTML/CSS/DOM features and which browsers support them and to what degree.
w3schools http://www.w3schools.com/ is an excellent resource for seeing how specific HTML/CSS/DOM features works with code samples.
jsfiddle http://jsfiddle.net/ is an online javascript/HTML/CSS editor. It's a great way to test ideas before putting them in code. It's also a great way to share code samples with others.
jsPerf http://jsperf.com/ is an online code speed checker. If you're not sure of the best way to do something in javascript, you can run samples here. The results are also shareable.
Paul Irish and friends just launched Move The Web Forward:
You love web standards. You want to give back to the community. Curious about where to start? We're here to help.
...
Learn
One of the most beautiful things about the web is that it's constantly changing. While these changes and improvements can be overwhelming, we're here to help you get caught up! Here are some great resources to walk you through how browsers work, and help keep you up to date on their improvements.
...
