WebKit For Dummies Cheat Sheet - dummies
Cheat Sheet

WebKit For Dummies Cheat Sheet

From WebKit For Dummies

By Chris Minnick

Use WebKit to create websites and mobile web apps. WebKit-based browsers, such as Safari and Chrome, are rapidly expanding their audiences and market share. These handy guidelines will help you develop applications that work with these products.

Common WebKit Browsers

Every web browser has a browser engine, such as WebKit, at its core. This table lists the most common web browser engines, along with the web browsers that use them. Just three or four browser engines power the vast majority of web browsers in use today. WebKit-specific browsers can improve your performance.

Browser Engine
Internet Explorer Trident
Firefox Gecko
Safari WebKit
Chrome WebKit
Arora WebKit
Midori WebKit
OmniWeb WebKit
Shiira WebKit
Epiphany WebKit
iCab WebKit
SRWare Iron WebKit
Konqueror KHTML
NetSurf NetSurf
Novell Evolution GtkHTML
Opera Presto

Maximizing WebKit Mobile

If you’re creating a website that will be viewed in a WebKit-powered mobile device, follow these rules. A few simple steps will make your pages fast and robust, however they’re viewed.

  • Use the HTML5 doctype.

    <!DOCTYPE html>
  • Optimize the mobile viewport.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Use a fluid layout with a minimum width of 320 pixels.

    #page-wrapper {
           background: white;
           min-width: 320px;
           max-width: 1260px;
           margin: 10px auto;
  • Make clickable buttons touch-friendly.

    Apple recommends a size of at least 44 pixels x 44 pixels.

  • Set custom home screen icons.

    For iPhone 4 with high-resolution Retina display:

    <link rel="apple-touch-icon-precomposed" sizes="114x114" 

    For first-generation iPad:

    <link rel="apple-touch-icon-precomposed" sizes="72x72" 

    For non-Retina iPhone, iPod Touch, and Android 2.1+ devices:

    <link rel="apple-touch-icon-precomposed" 

    For Nokia devices:

    <link rel="shortcut icon" href="img/l/apple-touch-icon.png">
  • Configure iOS Web app settings.

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style"
    content="black-translucent"> <link rel="apple-touch-startup-image" href="img/l/splash.png">
  • Optimize your images.

    Use alternatives to bitmap graphics, such as CSS3 or SVG, whenever possible.

  • Don’t use mouse-over effects.

    If your site navigation depends on hovering over a menu to see the submenu, the site will be unusable on touch screens.

  • Minimize JavaScript with Closure (http://closure-compiler.appspot.com/home).

    Turn this:

    // ==ClosureCompiler==
    // @compilation_level SIMPLE_OPTIMIZATIONS
    // @output_file_name default.js
    // ==/ClosureCompiler==
    function hello(name) {
           alert('Hello, ' + name);
    hello('New user');

    Into this:

    function hello(a){alert("Hello, "+a)}hello("New user");
  • Use the application cache. Not only will it make your app usable in offline mode, it will also improve performance.

<html manifest="myapp.appcache">