Some of my favorite HTML5 and CSS3 tools and info

This page was originally a post on my Tumblr blog (which has since moved to my site as a WordPress blog). Since I keep adding to it, I thought I'd put it in a place where it could be more easily referenced on a regular basis. These are the tools, articles and references that I find most helpful in my work. Enjoy! (Older resources—not maintained.)

HTML5 & CSS3 Specifications and Support Charts

• http://w3viewer.com/ – The W3C spec (for LOTS of things beyond HTML5 & CSS3) made simpler to read and navigate.
• http://dev.w3.org/html5/spec-author-view/ – The HTML5 Spec for authors (all User Agent information has been removed).
• http://caniuse.com– Great resource for compatibility tables showing features in HTML5, CSS3, SVG and other new web technologies.
• http://findmebyip.com/litmus/ - Good chart showing current browser support for HTML5 and CSS3 using real world results.
• http://www.standardista.com/html5 - Good group of HTML5 support charts and info.
• http://www.standardista.com/css3 - A variety of CSS3 support charts.
• http://www.w3.org/Style/CSS/current-work -State of the various CSS3 modules.
• http://peter.sh/experiments/vendor-prefixed-css-property-overview/-Great CSS Vendor-prefix chart. Find out what's supported and when you need the prefix.
• 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.
• http://adactio.com/extras/pocketbooks/html5/ – Easy to print on a page cheat sheet for the basics.
• 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://oli.jp/2010/css-animatable-properties/—great list of animatable properties.

HTML5 Tools & Information

• 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://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://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://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.

HTML5 Tools to Enhance

• 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.
• https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills-The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks.
• https://github.com/SlexAxton/yepnope.js-A Feature-Test Based Loader For Your Polyfills! 

CSS3 Tools to Create

• :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://www.css3maker.com/ – New “create in page” tool for creating CSS3 rules while seeing a preview of the properties effects.
• 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://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.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).

CSS3 Tools to Enhance

• http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills - Good list of HTML5 & CSS3 fallbacks, shivs and tools.
• http://www.selectivizr.com/ – ie-css3.js is script that makes IE support certain selectors. It works in tandem with other JavaScript libraries.
• http://css3pie.com/—"Progressive Internet Explorer"—PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
• http://www.useragentman.com/blog/%20csssandpaper-a-css3-javascript-library/—The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others. (Works for older browsers as well as IE.)
• https://github.com/scottjehl/Respond—A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).
• 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://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.

Tutorials & Examples

• 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.lrbabe.com/sdoms/borderImage/—Border image information with a great visual demo.
• 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.
• http://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.
• 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://nicolasgallagher.com/pure-css-speech-bubbles/demo/—Great tutorial on pure speech bubbles using CSS3 and generated content (from Nicholas Gallagher).
• Nice Media Query tutorial— from CSS-Tricks
• Nice example of Media Queries —from Daniel Davis, Opera Software