608 - Stories In Flight | HTML5/CSS3 Cheatsheet

Here are some simple cut-and-paste examples of HTML5/CSS3 features that are currently (mid-2010) usable across a number of web browsers, chief among them Firefox, Safari, Chrome and Opera. For many of the CSS3 examples, Internet Explorer is the lone holdout with a limited number of workarounds, however these features degrade gracefully and may still be useful on new projects as long as this limitation is kept in mind. Both for SVG and Canvas there exist solid workarounds in the form of JavaScript libraries that allow even Internet Explorer to display these new objects, and in the case of SVGweb it may be a good idea to use this workaround for all browsers to limit the variability of the SVG rendering across platforms. Please note: With the exception of SVGWeb, no Internet Explorer workarounds have been included on this page - most of the examples will therefore not work in IE6, IE7 or IE8. And if you want to discuss any of the code below or leave a correction or suggestion, you can leave comments below and here is also The Web We Should Have on my blog. Thanks! On this page: HTML5 DOCTYPE Rounded Corners Rounded Corners Redux: Circles Box Shadows Text Shadows Border Images Transform Rotate Column Layout SVG Canvas Canvas Text Canvas Text Rotate Some more complex subjects are also discussed in these separate pages: CSS3 Transforms Ruby Annotations Multiple Background Images HTML5 Audio and JavaScript Control HTML5 Audio Data API - Spectrum Visualizer JavaScript: Binary Loader Google Font API and Font Loading Behavior JavaScript: Sorting DIVs JavaScript: HTML5 Video with SRT Subtitles ...and don't forget to leave some comments below!

2010-09-09 13:41:04