HTML5. We have seen articles upon articles about it, some people love it, some people are turned off by it (like Zuckerberg). However, it’s something that is here. Now. Something that you see every day, whether it be that iOS app, the registration form you filled out or the files you uploaded via simple drag and drop. HTML5 sits behind the scenes performing magic wonders that many give no second thought to and just assume as standard.
HTML5 makes your forms awesome. It gives new field types, validation, placeholder text, auto-completion with data lists and progress bars. One of my new favorite sites for discovery and checking if a particular feature is ready for prime time is HTML5 Please. You can easily hop on over there, type in the name of the tag or other CSS3/HTML5 feature you want and get an instant response of browser support in a straightforward manner.
HTML5 Please is great for when you want to know if something is ready for use, however exploration and learning how to actually use HTML5 is not its strong point.
The best HTML5 learning tool I have found can be found at Dive Into HTML5. This resource does an amazing job of making things incredibly easy to understand and walks the developer through the entire process of how the spec itself was made. It’s a must-read for a new developer in the world of HTML5. It is also available as a book by Mark Pilgrim entitled HTML5: Up and Running.
Finding resources and examples of how to do a specific task once you understand what exists and if it’s supported can be tricky. One of my favorite resources, aside from the all important Google, is HTML5 Rocks. They do a great job of providing editable examples of many of the features in the spec and provide some nice tutorials if that is more your speed. The site is quite active with people cranking out articles and tutorials that walk people through some of the cutting edge stuff.
However, with all this awesome HTML5 goodness there comes the issue of presenting it in a useful manner on the page. Consider CSS3 to be your spit and polish on your glorious HTML5. In comes the almighty CSS3 – with its new updates, the world is at your fingertips. Be careful though, the new spec can be abused to make some monstrosities of dropshadows, rounded corners and text shadows. As with everything, balance is always good. Below I’ve included a couple CSS resources to check out.
More recently I have been working with creating custom shapes and images utilizing only CSS. This can significantly improve page load times because the image would be rendered from a small set of rules versus downloading the entire image file from the server directly. A great resource to see some of the basic things that can be created and to push your imagination is CSS-Tricks.com. In about 40 lines of code I can create a space invader that scales well and is based on a single element.
Utilizing just CSS you can do some pretty amazing things. A little over a year ago when I was just getting into CSS animations, I was able to create a videogame using only CSS. There is only one image on the entire page and that is for the mouse cursor. With the changes in browser compatibility, less/sass for browser specific transformations, we can make our websites load quickly, be responsive and decrease time needed to make changes.
These are some of my favorite HTML5 resources and guides – what are yours? Let me know in the comments!