Developing for WebKit Browsers

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:

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

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

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:

Happy coding!
Atg

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>