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 FunctionsMany 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 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| 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 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. |
Note: 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. GradientsFrom 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))
#369;
}
/* 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. 
Note: 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
http://www.mobilexweb.com/go/iefilter.
|
