Some of my favorite HTML5 and CSS3 tools and info

by Stephanie (Sullivan) Rewis on June 1, 2010

HTML5 

  • http://www.modernizr.com/ – One of my favorite tools. Modernizr tests, and then reports back what the user’s browser supports so you can write fallback CSS and JavaScript where needed. It also adds support in IE for most new HTML5 elements (with more being added in vs 1.2). I need to write a whole blog post about this one. 
  • http://code.google.com/p/html5shiv/ - This is a great tool if all you need is IE HTML5 element support.
  • http://gsnedders.html5.org/outliner/ – Examine your HTML5 page to see if it creates the proper outline.
  • http://html5accessibility.com/ – Great chart, to be updated monthly, on HTML5 accessibility. What’s safe and what HTML5 workarounds exist. During this transitional time, we have to take care to keep the web available to everyone—regardless of capabilities.
  • http://camendesign.com/code/video_for_everybody/ - This will probably decrease in value as HTML5 video matures. But for now, it’s the best resource for adding Ogg, H.264, WebM, and Flash support to target the most user agents.
  • http://caniuse.com/ – Great resource for compatibility tables showing features in HTML5, CSS3, SVG and other new web technologies.
  • http://html5readiness.com/ – Data from caniuse.com pulled into handy chart form.
  • http://html5test.com/ - This allows you to view the page with any browser to see its current support for new technologies in HTML5.
  • http://www.miketaylr.com/code/input-type-attr.html - HTML5 input and attribute support shows a chart of the support for the new form inputs and attributes in your current browser. You’ll be able to see the manner in which they’re implemented visually as well.
  • http://adactio.com/extras/pocketbooks/html5/ – Easy to print on a page cheat sheet for the basics.
  • http://html5boilerplate.com/ - Cross-browser normalization, performance optimizations, even optional features like cross-domain ajax and flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.
  • http://www.html5rocks.com/ – Information and playgrounds that allow you to play with HTML5 features including the HTML5-related APIs.
  • http://html5doctor.com/ - Fabulous HTML5 resource. Can’t say enough good things.
  • http://diveintohtml5.org/ - The book by O’Reilly in online form. Also a great resource.
  • http://www.standardista.com/html5 - Good group of HTML5 support charts and info.
  • http://svgboilerplate.com/ - For browsers that don’t support SMIL, it’ll inject FakeSMIL so that animations work. For browsers that still don’t support HTML5 parsing, it makes it possible to use SVG inline in HTML (in other words, no need to go to XHTML and application/xhtml+xml) with ForceSVG. And for the antiquities that still roam the interwebs, it relies on SVGWeb to kick in.
  • http://westciv.com/tools/canvasConsole/ – A canvas playground that allows you to click to add code to the console and see it rendered in the other pane.

CSS3

Leave a Comment