How To Start Using HTML5 + CSS3 Now!
Whether you hear 2012 or 2022, it doesn’t matter when HTML5 will be completely “finished” because enough of it is ready that you can start using HTML5 now! And CSS3 for that matter!
In case you’ve been living under a rock for sometime, HTML5 and CSS3 are the future of web standards (click for a quick overview). The browser is a much more powerful tool than it used to be, and the changes and advances in HTML5/CSS3 reflect that. No longer are the days of static web pages, now audio/video, animations, drawing, and other features that you used to have to go to Flash or plugins for are available and supported natively. HTML5 is also going to completely revolutionize SEO because now search engines will be able to identify what specific elements in pages are instead of just understanding paragraph/header text and divs.
There are already many well-written articles on the advances of HTML5 (do a quick search on Smashing Magazine, A List Apart, Think Vitamin, or Speckyboy, and you can even buy some books for that matter) so I won’t waste my breath. But what I will do is go over tools available now to help you get started.
Here is a list of links to 27 resources to get you using HTML5 & CSS3 today!
Get familiar with all the new features and experiment with samples of code and tutorials.
Can I Use…
Goes over what is supported in different versions of different browsers. A comprehensive set of tables that covers CSS3, HTML5, JS API, etc. You can search specifically for things or use the check boxes to show/hide categories and options.
Tests your browser for how compatible it is with HTML5 right now (out of a possible score of 300). It is impossible to reach 300 right now but if you use Chrome, your score is the highest @ 231 (yet another reason to love Chrome).
HTML5 enabling script for Internet Explorer specifically. Creates the new HTML5 DOM elements so styles can be applied to them.
Similarly, a script that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer.
Badass template free to download to get you familiarized with HTML5. Great to use as a base and then strip down elements you don’t need.
Illustrator to HTML5 Canvas Plugin
Web app (Friefox only) that allows you to convert video files to the ogv and webm codecs to be used with the new HTML5 video tags.
Note, if you use the new video tags you should have your source files in this order: .mp4/.m4v, .ogv and/or .webm, and then fallback to Flash (all inside the video tags)
VideoJS: An HTML5 Video Player
Open source HTML5 video player with Flash fallback with easy customization.
A simple script that enables audio and video tags in all major browsers.
An in-browser stylesheet that you can edit and see real-time updates to help get acquainted.
Using CSS3 Transitions, Transforms, and Animations
A good overview of what can be done and what’s supported by different browsers.
Free program that allows you to create animations with a timeline and property inspector and then spits it out as HTML/CSS. Again, the code ain’t pretty but just think of what you can do without Flash and without any real knowledge of new CSS transition properties.
Very cool and easy to use CSS3 code generator.
Another CSS3 code generator. I think I actually like this UI of this one better.
CSS3 Button Generator
A lovely button generator, complete with preview and code!
Font Squirrel @font-face kits
@font-face has been around for a while, but here you can find a bunch of free-to-use font kits that include EOT, TTF, WOFF, and SVG fonts. Or you can upload your own font and create your own kit. Lovely!
Generates a basic HTML5 layout using new markup elements based on what you want to include (with a list of checkboxes to choose from)
Pingback: HTML5 CSS3 « netpack