CSS Support in Popular Browsers

By popular browsers I basically mean Netscape Navigator and Microsoft Internet Explorer, although a new browser called Opera is looming on the horizon. The levels of support in each fourth-generation browser vary widely, as do the areas in which that support can be found. Here¹s a brief overview of where things stand with the 4.x browsers.

Leading the pack is Internet Explorer. In terms of narrow support‹simple support for individual properties‹IE hovers at somewhere around 90 percent of the CSS1 specification. Once you start combining the properties, though, that figure drops a bit. For example, you might be able to float an image to the left or right, and you might be able to set a margin on normal images, but setting margins on a floated image might not work quite so smoothly.

Explorer falls down mainly in its support of the box model, which is the set of properties that governs borders, margins, padding, and simple positioning like floating. Combining these can be particularly tricky, and some support doesn¹t extend to everything in HTML. To pick one example, you can set a border all the way around block-level elements, like paragraphs, but try to set a border on an inline element like a hyperlink, and you¹ll see no results at all. The weakest area of support is found in the classification properties, especially display and white space.

On the other hand, Explorer does a pretty good job with font properties, and it¹s also fairly good with text properties, like line height and text decoration (the major weakness being vertical-align). Support for backgrounds is fairly good, with only a few problems marring the picture. Another bright spot is support for length, percentage, and color units, which is relatively close to perfect.

Top Explorer trick: Support for float is particularly sparse; only a few elements can be floated, such as images and tables. The only ³text² element you can float, or even set a width for, is DIV. Thus, if you want to float a paragraph or a list to one side or the other, wrap it in a DIV and then float the DIV, like this:

<DIV style="float: right; width: 33%;">
<P>This is text to be floated.</P>

Lagging pretty far behind Explorer, we find Netscape Navigator. Navigator supports a little more than half of the specification, and that¹s just narrow support. Combining properties is about as risky as in Explorer, although different problems arise in Navigator. Navigator¹s biggest strength is the font properties, which it handles about as well as Explorer (with only a few small quirks spoiling the soup). Text properties such as text-decoration and line-height are supported, but there are still a few bugs still lurking about.

For most other areas, though, Navigator offers only so-so to fair support. For example, the support for the box, background, and classification properties is unfortunately spotty. While you can define a background image for an element, you can¹t position it or fix it in position. The box properties are not only halfway supported, but there are lots of errors in the implementation of those that have been attempted. If you set a background color on a paragraph, it will color only the space behind the letters, not the entire content box of the paragraph. There are many other CSS1-support problems to be found in Navigator, sadly.

Top Navigator trick: If you want to set a background color on a paragraph, you need to add a zero-width border to it, like this:

P {background-color: yellow; border: 0px solid none;}

This will, for some reason, force Navigator to fill in the entire content box with the background color you specify.

As for support of CSS2, there¹s very little out there. Both Navigator and Explorer make some attempts at supporting positioning, but each is incomplete and buggy‹in completely different ways, of course. There are a few other features here and there, but nothing really coherent (or stable) enough to be considered usably supported.

Meanwhile, a new contender in the CSS1 sweepstakes is the up-and-coming Opera, a Windows 95 browser being written by a small Norwegian firm called Opera Software ( Opera¹s main claims to fame at this point are a fairly strict adherence to W3C standards such as HTML 3.2 and CSS1, and the fact that the entire installation package is a little over 1MB in size. Opera is still in beta right now, but thus far its CSS1 support has been as good as anything else available, and it just may be in the lead by the time version 3.5 goes final.

With Microsoft and Netscape coming close to offering new fifth-generation releases, the situation could change quite a bit. This is especially true in light of Netscape¹s decision to include the much-praised NGLayout engine in Navigator 5. It¹s still too early to tell exactly what that will mean, but it¹s a safe bet that it will make our lives more interesting‹and it just might raise the bar on CSS support.