Firefox Hacks [Electronic resources] نسخه متنی

Hack 45. Use Gecko CSS Style Magic

Give your web pages extra style using fancy
Gecko CSS extensions.

The Gecko display engine inside Firefox can do marvelous things to
your web page with its standard, forward-looking, and custom CSS
style properties. This hack looks at a few of its custom features.
The most marvelous thing Gecko and Firefox can do together is, of
course, XUL [Hack #68] . But
that's a separate
subject.

Firefox and Mozilla identify most of their CSS enhancement keywords
with the prefix -moz. These keywords may appear as
style properties, property values, or pseudoselectors. Examples
include:

/* Three style rules with Gecko Magic */
p  { -moz-float-edge : border-box; }
p  { background-color : -moz-dialog; }
p:-moz-drag-over { color : red; }

Use of these style extensions is fairly harmless, because outside of
Mozilla browsers, they do nothing. There are too many custom
properties to list here; in fact, it's a bit of a
treasure hunt to find them all. We'll cover just a
few of the most useful ones.

5.3.1. Add Fancy Borders

Firefox can go further
than the simple dotted and dashed border
styles defined by CSS2. Once a border exists, it can be given rounded
corners:

p {
border : solid thick;
border-width : 20px;
padding : 20px;
-moz-border-radius : 20px;  /* Gecko Magic  */
}

Gecko also defines -moz-border-radius-topleft,
-moz-border-radius-topright, and so on for
individual corners.

Alternatively, such a border can be given a color gradient:

p {
border : solid thick;
border-width : 20px;
padding : 20px;
-moz-border-right-colors : /* Gecko Magic */
red orange yellow green blue purple transparent brown pink;
-moz-border-left-colors : 
red orange yellow green blue purple transparent brown pink;
-moz-border-top-colors : 
red orange yellow green blue purple transparent brown pink;
-moz-border-bottom-colors : 
red orange yellow green blue purple transparent brown pink;
}

Unfortunately, there's no all
borders style property yet. Each color is one pixel wide,
and the last color fills any remaining pixels.

If both techniques are used at once, then gem corners result. Figure 5-3 shows a page illustrating all three effects.
With a little design, soft gradients and other eye candy are
possible.

Figure 5-3. Gecko custom CSS border styles

5.3.2. Add Fancy Colors

Firefox also supports fancy colors,
which take the form of CSS2 placeholder
colors. These next two examples show a paragraph colored like a
dialog box and a paragraph colored like an operating
system's hyperlink:

/* all Gecko magic */
p.dialog { background-color : -moz-dialog;
color : -mox-dialog-text; }
p.href   { color : -moz-hyperlinktext; }

Figure 5-4 shows the result (the link is purple
when viewed live on Windows).

Figure 5-4. Gecko custom colors from the operating system

5.3.3. Add Unbreakable Fonts

Firefox fonts are a large matter [Hack #30] . Gecko CSS supports
this
special, unbreakable font:

p { font : -moz-fixed; } /* Gecko Magic Font */

This is a fixed-width system font that is available at every single
pixel size (and part pixel size), as shown in Figure 5-5.

Figure 5-5. Gecko's unbreakable fixed font

5.3.4. Add Fancy Blending

Firefox supports all the following effects:
translucency,
transparency,
alpha blending, and
opacity.
Ultimately,
they're all based on one technology: see-through
content support. On an increasing number of operating systems,
Firefox is very close to supporting translucency against the
surrounding desktop environment. That's done (for
example) with this style:

html { background-color : transparent; } /* Gecko Magic */

For Firefox 1.0, the simpler content effects use this style:

p { -moz-opacity :  0.3; }  /* Gecko Magic */

This allows text and images to overlay each other in a see-through
manner. Firefox also supports alpha blending within PNG images and
also between PNG images and other content. Figure 5-6 shows alpha blending at work. The two words
Over and Under are <span> contents
positioned absolutelyone with 0.3 opacity, the other with 0.5.
Note how the text is darker where the two words overlap. This
can't be done in Internet Explorer.

Figure 5-6. Gecko's opacity support illustrated with text

Opacity is another tool that allows gentle and subtle shading
effects. Such effects make web sites appear visually pleasing and
very professional.