Cover by Maximiliano Firtman

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

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

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required