CSS for Mobile Browsers : WebKit Extensions (part 1) - Text Stroke and Fill

Note:

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:

• -webkit-border-radius defines a rounded-corner box. Modern mobile browsers also understand it as border-radius.

• -webkit-box-shadow defines a shadow for a block element (similar to text-shadow).

• -webkit-columns specifies the width and count of columns.

• -webkit-border-image 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.

• -webkit-text-fill-color defines a color to use for filling the text (inside the stroke).

We’ll look at a few of them here in more detail.

1. Text Stroke and Fill

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 1 shows which browsers render these two extensions.