The open source project WebKit added many extensions to CSS, and several of these are under discussion for addition to CSS3. In the mobile world we have many WebKit flavors (Safari, Android, webOS, Symbian, etc.), and the extensions compatibility isn’t perfect across all of them.
Many of the WebKit extensions had counterparts for other desktop
browsers, like Mozilla Firefox (using the
-moz- prefix) or Opera (using the
-o- prefix). In CSS3, many of these extensions
are implemented without any prefix.
The following is a list of the most common WebKit extensions, in compressed form:
a rounded-corner box. Modern mobile browsers also understand it as
-webkit-box-shadow defines a
shadow for a block element (similar to
-webkit-columns specifies the
width and count of columns.
specifies an image to use as the border for a box
-webkit-text-stroke defines a
color to use for the stroke (outline) of the text.
defines a color to use for filling the text (inside the
We’ll look at a few of them here in more detail.
The stroke and fill properties are a handy way of creating fancy effects in titles (with big fonts) without the use of images. For example:
<h1 style="-webkit-text-stroke: blue; -webkit-text-fill-color: yellow"> Great Title! </h1>
Table 7-15 shows which browsers render these two extensions.
Table 7-15. Text stroke and fill compatibility table ...