A Lizard with Style - Gecko: A Smaller, Faster Lizard - HTML with Style

Gecko: A Smaller, Faster Lizard

A Lizard with Style

Gecko's CSS support has gone through the roof. CSS1 is all just there. Three prominent additions are support for the float property, support of the first-line and first-letter pseudo-elements, support for run-in and compact boxes, and, for the good of my personal state of mind if not anything else, complete support of the box model.

The float property can be used to float any element to the right or left margin like you can float images with ALIGN=left or ALIGN=right in current browsers. This is a very useful layout option that can be used to implement side notes, margin notes and more.

The first-line and first-letter pseudo-elements are supported correctly by Gecko. You can have a different style for the first letter and the first line of an element, and the pseudo-elements change correctly when the element is resized. You can also use the float property with the first-letter pseudo-element to create "drop capitals," something that most people used images for until now. You can see these pseudo-elemens in action in the screen shot of the Gecko start page.

Run-in and compact boxes are a very nifty layout option in CSS2. Run-in boxes are boxes that become inline boxes in the next block box, so you can have headings that run into paragraphs. This effect could be achieved visually before now, but you would have to break the logical structure of your document since heading elements cannot be used as inline elements. The following screenshot shows a part of the HTML with Style front page with run-in boxes used to describe the tutorials.

Gecko with run-in boxes [Full-Size PNG] [Full-Size GIF]

I used the following CSS statements to achieve this:

DT { display: run-in; }
DD { margin-left: 0; }

Compact boxes try to fit into the the left margin of the block box directly after them, and if they can't, they appear above them. They are very useful when creating description lists where you might want a more tabular layout. The following screenshot shows the same section of the front page using compact layout.

Gecko with compact boxes [Full-Size PNG] [Full-Size GIF]

I used the following CSS statements to achieve this:

DT { display: compact; }
DD { margin-left: 5.5cm; }

And finally, Gecko correctly renders CSS boxes, including margins, borders and padding, and correctly collapses vertical margins as per the CSS specifications. This means that you can have a simple, plain HTML 4.0 document and use CSS to create interesting, original layouts using things such as drop capitals, "book style" layout where paragraphs have no vertical margins but are justified and have a first line indent, and much more. Backgrounds are now displayed correctly on block elements without borders, borders finally work properly, with separate styles supported on each side, and the infamous "3-pixel transparent padding" that has plagued Navigator 4.0 has been removed.

In short, the most important functions of CSS, those that control simple layout and appearance, finally work as expected, leading the way to adoption of CSS for controlling the appearance of pages. Wide-spread deployment of Gecko will mean that superfluous tables, spacer images and other hacks will disappear from the Web for good.

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/gecko/
Created: Dec 16, 1998
Revised: Dec 16, 1998