Programming the Mobile Web : WebKit CSS Extensions (part 1) - WebKit Functions & Gradients

1/20/2011 3:31:27 PM
Safari on iOS is the most complex mobile browser at the time of this writing. From version 2.0 of iOS it supports a great (and strange) group of CSS extensions that allow us to use hardware-accelerated animations, transitions, and even 3D effects in our websites. Some of these extensions also work with the Android and webOS browsers, depending on the operating system version.

1. WebKit Functions

Many CSS attributes accept a function as a parameter. These functions are WebKit extensions and are all hardware-accelerated.


The gradient-related functions listed here are not officially supported in iOS, according to the Safari Reference Library. However, they work properly from OS 3.0, and on older devices they will just use a plain background.

The functions available for iPhone devices are listed in Table 1 (there are others, but they work only in Safari for desktop). Some of these functions, such as scalerotate, are also available for the Android and webOS browsers. and

Table 1. CSS functions available in Safari on iOS
cubic-beizer(p1x, p1y, p2x, p2y)Specifies a cubic bezier timing function.
matrix(m11, m12, m21, m22, tX, tY)Specifies a matrix transformation of six values with two translation elements.
matrix3d(m00, m01, m02, m03, m10, m11, m12, m13, m20,m21, m22, m23, m30, m31, m31, m33) Specifies a 3D matrix transformation of 4×4.
perspective(depth)Maps a viewing cube onto a pyramid whose base is far away from the viewer.
rotate(angle)Defines a 2D rotation around the origin of the element.
rotate3d(x, y, z, angle)Defines a 3D rotation with [x,y,z] as the direction vector of the rotation.
rotateX(angle)Specifies a clockwise rotation around the x-axis.
rotateY(angle)Specifies a clockwise rotation around the y-axis.
rotateZ(angle)Specifies a clockwise rotation around the z-axis.
scale(scaleX, [scaleY])Performs a 2D scale operation.
scale3d(scaleX, scaleY, scaleZ)Performs a 3D scale operation.
scaleX(value)Scales along the x-axis.
scaleY(value)Scales along the y-axis.
scaleZ(value)Scales along the z-axis.
skewX(angle)Performs a skew transformation around the x-axis.
skewY(angle)Performs a skew transformation around the y-axis.
translate(deltaX, [deltaY])Specifies a 2D translation vector.
translate3d(deltaX, deltaY, deltaZ)Specifies a 3D translation vector.
translateX(value)Performs a translation around the x-axis.
translateY(value)Performs a translation around the y-axis.
translateZ(value)Performs a translation around the z-axis.
from(color)Specifies the initial color in a sequence.
to(color)Specifies the final color in a sequence.
color-stop(stop_percentage, color)Specifies an intermediate color to be used at the stop_percentage value in a sequence.
-webkit-gradient(linear, start_function, end_function, [stop_function, ...])Defines a linear gradient using a start point, a final point, and optional intermediate points. This can be used in place of any image in CSS. Available from iOS 3.0.
-webkit-gradient(radial, inner_center, inner_radius,outer_center, outer_radius, [stop_function, ...]) Defines a radial gradient with a center point (inner) and another point (outer) with colors determined by a series of color-stop functions. Available from iOS 3.0.


CSS functions are not a new feature of CSS; they are available for every browser. In fact, you are probably already familiar with some of the standard functions, such as url(url_string) or rgba(red, green, blue, alpha) for defining colors.

2. Gradients

From iOS 3.0, Safari supports CSS gradient extensions as functions anywhere we can use an image (for a background, for example). Instead of using the url function to provide the URL of the image, we can use the -webkit-gradient function to define a linear or radial gradient to use as the background. This technique enables us to create really nice backgrounds for titles, containers, and cells with minimal code. The same code also works on the Android browser.

Some samples of gradient definitions include:

/* Sun effect from top-right corner */
body {
background: -webkit-gradient(radial, 50% −50, 0, 50% 0, 300, from(#676767),
to(black)) black;

body {
background: -webkit-gradient(radial, 100% −10, 50, 70% 0, 200,
from(yellow), to(white)) #FFC;

/* Simple linear gradient */
li {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#369), to(#3FF))

/* Simple 3D effect */
h1 {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#369), to(#369),
color-stop(0.5, #58B));

For position values, we can use percentages, absolute values (without px), or the constant values top, bottom, right, and left. For example, we can use top right as the second parameter of the CSS function instead of 0% 0%. Figure 1 shows what these examples might look like in the browser.

Figure 1. With just CSS you can create different gradient effects for iPhone, iPod Touch, iPad, and Android devices.


As of version 6.0, Mobile Internet Explorer supports filters and transitions, using CSS extensions with the filter style. You can create alpha, chroma, shadow, glow, mask, and other effects. For more information, see

  •  Windows Phone 7 Development : Debugging Application Exceptions (part 2) - Debugging a Web Service Exception
  •  Windows Phone 7 Development : Debugging Application Exceptions (part 1) - Debugging Page Load Exceptions
  •  Programming the Mobile Web : JavaScript Libraries
  •  Programming the Mobile Web : Ajax Support
  •  Windows Phone 7 Development : Building a Phone Client to Access a Cloud Service (part 5) - Deploying the Service to Windows Azure
  •  Windows Phone 7 Development : Building a Phone Client to Access a Cloud Service (part 4) - Coding NotepadViewModel
  •  Windows Phone 7 Development : Building a Phone Client to Access a Cloud Service (part 3) - Coding the BoolToVisibilityConvert
  •  Windows Phone 7 Development : Building a Phone Client to Access a Cloud Service (part 2) - Coding MainPage
  •  Windows Phone 7 Development : Building a Phone Client to Access a Cloud Service (part 1) - Building the User Interface
  •  Building Android Apps : Detecting Browsers with WURFL
  •  Building Android Apps : Submitting Your App to the Android Market - Preparing a Release Version of Your App
  •  Windows Phone 7 Development : Creating a Cloud Service to Access the Cloud Database (part 2) - Implementing a WCF Service to Access the SQL Azure Database
  •  Windows Phone 7 Development : Creating a Cloud Service to Access the Cloud Database (part 1) - Generating an Object Model to Access the Cloud Database
  •  Windows Phone 7 Development : Using Cloud Services As Data Stores - Creating a Cloud Database
  •  iPhone Application Development : Working with Text, Keyboards, and Buttons (part 5) - Implementing the View Controller Logic
  •  iPhone Application Development : Working with Text, Keyboards, and Buttons (part 4) - Hiding the Keyboard
  •  iPhone Application Development : Working with Text, Keyboards, and Buttons (part 3) - Creating Styled Buttons
  •  iPhone Application Development : Working with Text, Keyboards, and Buttons (part 2) - Adding Text Views
  •  iPhone Application Development : Working with Text, Keyboards, and Buttons (part 1) - Adding Text Fields
  •  Building Android Apps : Controlling the Phone with JavaScript (part 3) - Accelerometer
    Top 10
    Installing Exchange Server 2010 into an existing Exchange Server 2007 environment (part 3) - Configure Exchange Web Services
    Windows Server 2008 : Harnessing the Power and Potential of FIM
    Programming the Mobile Web : Geolocation and Maps - Detecting the Location (part 2) - Google Gears
    Securing Data from the DBA
    Windows 7 : Managing and Applying LGPOs (part 2) - Using Account Policies
    Registering a Windows Phone Device for Debugging
    Programming the Mobile Web : Testing and Debugging (part 3) - Client-Side Debugging
    Windows 7 : Using Windows Live Calendar (part 3) - Scheduling Appointments and Meetings & Viewing Agendas and Creating To-Do Lists
    Windows Phone 7 : Working with Controls and Themes - Adding Transition Effects
    Algorithms for Compiler Design: THE PREDICTIVE TOP-DOWN PARSER
    Most View
    Windows 7 : Preparing Disks for Use (part 3)
    Configuring Windows 7 on a Network
    Sharepoint 2007: Create a New Document Library
    Programming Symmetrical Encryption (part 1)
    Integrating Office Communications Server 2007 in an Exchange Server 2010 Environment : Exploring Office Communications Server Tools and Concepts
    Resolve a Hostname to an IP Address
    Windows Server 2008 : DHCP/WINS/Domain Controllers - Securing DHCP
    iPhone Application Development : Creating and Managing Image Animations and Sliders (part 3) - Finishing the Interface
    Introducing SharePoint 2010 (part 2)
    Maintaining Windows 7 with Backup and Restore (part 1) - Creating a Backup & Restoring Files from a Backup
    Managing Offline Files in Vista
    iPad SDK : Popovers - The Font Size Popover
    Windows Phone 7 Development : WebBrowser Control - Saving Web Pages Locally
    Windows 7 : Using Compression and Encryption (part 1) - Compressing Drives
    Accessing Silverlight Content with JavaScript
    iPhone Application Development : Understanding the Model-View-Controller Paradigm
    SQL Server 2008 : OPENXML, sp_xml_preparedocument, and sp_xml_removedocument
    Becoming an Excel Programmer : Where's My Code?
    Troubleshooting and Testing Network Settings
    SQL Server 2008 : Performance Tuning - Working with Query Execution Plans