Some of my favorite HTML5 and CSS3 tools and info

• http://w3viewer.com/ – The W3C spec (for LOTS of things) made simpler to read and navigate.

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

• http://www.selectivizr.com/ – ie-css3.js is script that makes IE support certain selectors. It works in tandem with other JavaScript libraries.
• http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#attributeselectors - Great chart showing you exactly what version of IE supports various types of selectors. (And Tumblr seems to be terminating that link early due to the parenthesis in it. You need the whole bit, so you’ll probably have to copy/paste.)
• http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ – The classic Berea Street article on CSS3 selectors.
• http://www.yourhtmlsource.com/stylesheets/advancedselectors.html - A great resource explaining a variety of more advanced selectors in simple language.
• ttp://24ways.org/2009/cleaner-code-with-css3-selectors - A great article with nice examples of uses of new selectors—as well as how to get the same support in older browsers using Javascript.
• :nth-child tester from CSS Tricks to let you test your selector prowess!
• http://www.westciv.com/tools/ - Tools to help you build more complex CSS3 effects like gradients as well as simpler effects like box shadow. Copy the code and you’re done.
• http://border-radius.com - The quickest, easiest way to get all the border-radius properties in one place. For the addled memory.
• http://css3please.com/ - Great “edit in place” tool for creating CSS3 rules while seeing a preview of the properties effects.
• http://www.css3generator.com/ – Another good tool for creating various CSS3 rules while viewing your work in a compliant browser.
• http://mothereffingtextshadow.com/ – Create crazy text shadow effects that are mother effing cool!
• http://www.fontsquirrel.com/ – Create or download font-face kits for use in all browsers (be sure if you’re creating one, you have legal right to do so). All free for commercial use.
• http://www.fontspring.com/ – FontSquirrel’s sister site with low cost, high quality fonts for commercial use.
• http://welcome.totheinter.net/columnizer-jquery-plugin/ – Columnizr jQuery Plugin that gives support to multiple columns of text to older browsers (check for support using Modnernizr and serve this jQuery to non-supporting browsers).
• http://www.colorzilla.com/firefox/- New addition to Colorzilla’s already wonderful color sampling tool and website analyzer — the Ultimate CSS Gradient Generator. Firefox only.
• http://www.display-inline.fr/projects/css-gradient/ – Great gradient generator that includes support for IE/Opera as well as the ability to download a gradient.png (though I don’t recommend using the IE filters for gradients).
• http://gradients.glrzad.com/ – This tool only creates CSS3 gradients. But I like it because it gives you both -moz and -webkit syntaxes without having to rebuild the gradient.
• http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/ – RGBA and HSLA generator for Internet Explorer — creates the IE filter syntax needed for rgba/hsla support in IE. Again, I don’t recommend IE filters due to the performance hit most give, but they are available.
• http://www.w3conversions.com/sandbox/css3/gradients/index.html – Personal examples showing how to use two-toned gradients as image-free faux columns.
• http://www.useragentman.com/IETransformsTranslator/- Allows you to create transforms visually and gives you the code for modern browsers as well as the IE filter code to force IE compliance (broken record—I don’t love IE filters—but you’re free to use them).
• http://www.paulrhayes.com/experiments/cube/multiCubes.html – Nice experiment showing multiple 3D-looking cubes with animation using CSS3 (and only 2D transforms/transitions).
• http://robertnyman.com/css3/background-size/background-size.html – Great illustration of the background-size property.
• http://dev.opera.com/articles/view/css3-border-background-boxshadow/ – Good examples here of the various border, background and box-shadow properties.
• http://www.quirksmode.org/css/background.html – Great information on backgrounds with support chart.
• http://www.standardista.com/css3 - A variety of CSS3 support charts.
• http://code.google.com/p/universal-ie6-css/ - Not a CSS3 tool, but if you’re using a lot of it, and your client doesn’t demand IE6 have the same design as everyone else, use IE6-css to give IE6 basic styling and great typography. I think we should all tell our client this is standard, and anything else for IE6 is an additional charge.
• Nice Media Query tutorial from CSS-Tricks
• Nice example of Media Queries from Daniel Davis, Opera Software