If you’re “lucky” enough to find yourself developing for iThings, you know you’re in a mixed-blessing situation: on one hand, you get a chance to play with absolute cutting-edge technology, pushing the browser as far as it can go, using things you won’t be able to do in regular websites for years and years to come; on the other hand, you’ve got to learn how to do all this new stuff, including best practices and testing, knowing that, unless iThings are all you develop for, you likely won’t use any of it again for some time…

So, to try to make the learning and testing part as easy as possible, here are a few notes on what I picked-up doing my last WebKit-only couple projects…

Start with these Thomas Fuchs‘ articles:

• http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/
• http://mir.aculo.us/2010/08/27/creating-awesome-css3-animations/

Then, when you get really ambitious, check-out these lists:

• http://css-infos.net/properties/webkit.php
• http://qooxdoo.org/documentation/general/webkit_css_styles

And if you’d like to start pushing this to your regular sites when you can, check-out these resources for other browsers:

• https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
• http://msdn.microsoft.com/en-us/library/ms531207%28VS.85%29.aspx

Here’s a great tip on how to determine whether the user’s browser is a WebKit browser (using feature detection, not browser detection), slightly modified from a Snipplr article:

var supports = (function(){
  var div = document.createElement('div'),
    vendors = ['Webkit'], // you can add other vendors to this array
    len = vendors.length;
  return function(prop) { // check if the user's browser
    if ( prop in div.style ) return true;
    prop = prop.replace(/^[a-z]/, function(val) {
      return val.toUpperCase();
    });
    while (len--) {
      if ( vendors[len] + prop in div.style ) { return true; }
    }
    return false;
  };
})();
// test whether webkitTransform is supported by user's browser
if ( supports('webkitTransform') ) {
  // set-up transition events using -webkit-transforms
} else {
  // set-up transition events using jQuery or something else
}

And here are a few other resources you might want to sift through:

• The go-to resource for CSS3 news and resources:
  http://www.css3.info/
• The WebKit blog:
  http://webkit.org/
• And a couple specific WebKit blog articles:
  http://webkit.org/blog/138/css-animation/
  http://webkit.org/blog/324/css-animation-2/
• Apple’s Transitions examples (need to use Safari):
  http://www.apple.com/html5/showcase/transitions/ (don’t let the URL fool you, it covers CSS3 too…)
• Tutorials:
  http://insideria.com/2010/02/controlling-animation-using-cs.html
  http://css3.bradshawenterprises.com/
• And which browser supports what?
  http://html5readiness.com/ (again, don’t let the URL fool you, it covers CSS3 too…)
• Or let Modernizr do the work for you:
  http://www.modernizr.com/
• Need some inspiration?
  http://www.apple.com/ipad/ready-for-ipad/
  http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/
  http://designshack.co.uk/articles/css/10-amazing-examples-of-innovative-css3-animation

Happy coding!
Atg

Top⇪