O'Reilly logo

Programming the Mobile Web by Maximiliano Firtman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

WebKit CSS Extensions

Safari on iOS is the most complex mobile browser at the time of this writing. As mentioned in Chapter 7, 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.

WebKit Functions

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

Warning

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 9-7 (there are others, but they work only in Safari for desktop). Some of these functions, such as scale and rotate, are also available for the Android and webOS browsers.

Table 9-7. CSS functions available in Safari on iOS

Function

Description

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required