Book HomeWeb Design in a NutshellSearch this book

Appendix E. CSS Support Chart

Contents:

Notes

Browser compatibility -- or lack thereof -- is the biggest obstacle to adoption of CSS. This appendix provides a comprehensivev guide to how the browsers have implemented support for CSS1. Check this master list to get a rough idea of how well a given property and its values are supported.

This appendix uses the following key:

Supported

Not supported

P

Partial support (some values are supported, some aren't)

B

Buggy support (anything from mangled display to browser crashes)

Q

Quirky support (browser may not act as expected)

This list and the notes that follow are current as of January 2001. For the latest information, please visit http://style.webreview.com.

Property or Value

Windows 95

Macintosh

N4

N6

IE3

IE4

IE5

IE55

O3

O4

N4

N6

IE3

IE4

IE5

1.1

Containment in HTML

P

P

Q

Q

Q

P

B

LINK

B

<STYLE>...</STYLE>

@import

Q

Q

Q

<x STYLE="dec;">

B

B

1.2

Grouping

x, y, z {dec;}

1.3

Inheritance

B

P

B

B

(inherited values)

B

P

B

B

1.4

Class selector

B

Q

Q

Q

B

.class

B

Q

Q

Q

B

1.5

ID selector

B

B

B

B

B

B

B

B

#ID

B

B

B

B

B

B

B

B

B

1.6

Contextual selectors

B

P

x y z {dec;}

B

P

1.7

Comments

B

/* comment */

B

2.1

anchor

P

P

P

P

B

A:link

B

A:active

B

A:visited

B

B

2.3

first-line

B

:first-line

B

2.4

first-letter

B

:first-letter

B

3.1

important

!important

3.2

Cascading Order

B

P

B

P

Weight sorting

B

B

Origin sorting

B

B

B

Specificity sorting

B

P

B

B

Order sorting

B

B

5.2.2

font-family

P

P

<family-name>

P

<generic-family>

P

P

P

serif

sans-serif

cursive

B

fantasy

B

monospace

5.2.3

font-style

P

P

P

P

normal

italic

oblique

5.2.4

font-variant

Q

Q

Q

Q

normal

small-caps

Q

Q

Q

Q

5.2.5

font-weight

P

P

P

P

normal

bold

bolder

lighter

100-900

5.2.6

font-size

P

P

P

P

P

Q

<absolute-size>

Q

Q

Q

B

Q

xx-small - xx-large

Q

Q

Q

B

Q

<relative-size>

B

larger

B

smaller

B

<length>

P

B

<percentage>

P

5.2.7

font

P

P

P

P

P

P

Q

<font-family>

P

P

<font-style>

P

P

P

<font-variant>

Q

Q

Q

Q

<font-weight>

P

<font-size>

B

Q

Q

P

B

<line-height>

B

B

B

5.3.1

color

<color>

5.3.2

background-color

B

P

B

<color>

B

B

B

transparent

B

B

B

5.3.3

background-image

<url>

none

5.3.4

background-repeat

P

P

B

repeat

B

repeat-x

P

B

P

repeat-y

P

B

P

no-repeat

5.3.5

background-attachment

scroll

fixed

5.3.6

background-position

<percentage>

<length>

top

center

bottom

left

right

5.3.7

background

P

P

P

P

P

P

P

<background-color>

B

P

P

P

<background-image>

P

P

<background-repeat>

P

B

B

P

B

<background-attachment>

<background-position>

P

5.4.1

word-spacing

normal

<length>

5.4.2

letter-spacing

normal

<length>

5.4.3

text-decoration

B

B

B

B

B

B

B

B

B

B

B

B

P

none

Q

Q

Q

underline

Q

B

Q

B

Q

overline

line-through

blink

5.4.4

vertical-align

P

P

P

P

P

baseline

sub

super

top

B

text-top

middle

B

B

bottom

B

B

text-bottom

B

<percentage>

B

5.4.5

text-transform

P

capitalize

uppercase

B

lowercase

none

5.4.6

text-align

P

P

P

P

left

right

center

justify

B

B

5.4.7

text-indent

<length>

<percentage>

5.4.8

line-height

P

P

Q

P

P

normal

<number>

P

P

B

<length>

B

B

B

<percentage>

P

P

B

5.5.01

margin-top

P

B

P

P

P

B

P

<length>

P

B

P

P

P

B

P

<percentage>

P

P

P

P

B

P

auto

P

P

P

P

B

P

5.5.02

margin-right

B

B

P

P

P

Q

B

B

B

P

P

<length>

B

P

P

B

P

<percentage>

B

P

P

B

P

auto

P

5.5.03

margin-bottom

P

P

P

<length>

P

P

P

<percentage>

P

P

P

auto

P

P

P

5.5.04

margin-left

B

P

P

P

B

B

P

P

<length>

B

P

P

P

<percentage>

B

P

P

B

P

auto

B

P

5.5.05

margin

B

B

B

P

P

B

B

B

B

P

<length>

B

B

P

P

B

B

P

<percentage>

B

P

P

B

B

P

auto

P

P

B

P

5.5.06

padding-top

B

P

P

Q

B

P

<length>

B

P

P

B

P

<percentage>

B

P

P

B

P

5.5.07

padding-right

B

P

P

Q

B

P

<length>

B

P

P

B

P

<percentage>

B

P

P

B

P

5.5.08

padding-bottom

B

P

P

B

P

<length>

B

P

P

B

P

<percentage>

B

P

P

B

P

5.5.09

padding-left

B

P

P

B

P

<length>

B

P

P

B

P

<percentage>

B

P

P

B

P

5.5.10

padding

B

P

P

Q

B

B

P

<length>

B

P

P

B

B

P

<percentage>

B

P

P

B

B

P

5.5.11

border-top-width

B

P

P

B

P

thin

P

P

P

medium

P

P

P

thick

P

P

P

<length>

P

P

P

5.5.12

border-right-width

B

P

P

B

P

thin

P

P

P

medium

P

P

P

thick

P

P

P

<length>

P

P

P

5.5.13

border-bottom-width

B

P

P

B

P

thin

B

P

P

B

P

medium

B

P

P

B

P

thick

B

P

P

B

P

<length>

B

P

P

B

P

5.5.14

border-left-width

B

P

P

B

P

thin

P

P

P

medium

P

P

P

thick

P

P

P

<length>

P

P

P

5.5.15

border-width

B

P

P

B

P

thin

P

P

P

medium

P

P

P

thick

P

P

P

<length>

P

P

P

5.5.16

border-color

P

P

<color>

P

P

5.5.17

border-style

P

P

P

P

none

dotted

dashed

solid

double

groove

ridge

inset

outset

5.5.18

border-top

P

P

P

<border-top-width>

P

P

P

<border-style>

P

P

P

<color>

P

P

P

5.5.19

border-right

P

P

P

<border-right-width>

P

P

P

<border-style>

P

P

P

<color>

P

P

P

5.5.20

border-bottom

P

P

P

<border-bottom-width>

P

P

P

<border-style>

P

P

P

<color>

P

P

P

5.5.21

border-left

P

P

P

P

<border-left-width>

P

P

P

P

<border-style>

P

P

P

P

<color>

P

P

P

P

5.5.22

border

P

P

P

P

P

P

<border-width>

B

P

P

P

B

P

<border-style>

P

P

P

P

P

P

<color>

P

P

P

P

5.5.23

width

P

P

P

Q

P

<length>

P

P

P

Q

P

<percentage>

P

P

P

Q

P

auto

P

P

P

Q

P

5.5.24

height

<length>

auto

5.5.25

float

P

P

P

Q

B

Q

P

B

Q

left

B

B

B

B

right

B

B

B

B

none

5.5.26

clear

P

P

P

B

P

none

left

B

B

B

B

right

B

B

B

B

both

5.6.1

display

P

P

P

P

P

P

P

block

B

B

P

inline

B

list-item

B

P

P

none

5.6.2

white-space

P

P

P

normal

pre

nowrap

5.6.3

list-style-type

P

disc

circle

square

decimal

lower-roman

upper-roman

lower-alpha

upper-alpha

none

B

5.6.4

list-style-image

<url>

none

5.6.5

list-style-position

inside

Q

outside

5.6.6

list-style

P

P

P

P

<keyword>

P

<position>

Q

Q

Q

<url>

6.1

Length Units

P

P

B

em

ex

Q

Q

Q

Q

Q

Q

Q

px

in

cm

mm

pt

pc

6.2

Percentage Units

<percentage>

6.3

Color Units

P

P

P

P

#000

B

#000000

B

(RRR,GGG,BBB)

(R%,G%,B%)

<keyword>

B

B

6.4

URLs

B

B

B

<url>

B

B

B

E.1. Notes

1.1 Containment in HTML @import

WinIE4+ imports files even when the @import statement is at the end of the document style sheet. This is technically in violation of the CSS1 specification, although obviously not a major failing; thus the Q rating.

1.1 Containment in HTML <x STYLE="dec;">

Navigator 4 has particular trouble with list-items, which is most of the reason for the B.

1.3 Inheritance

Navigator 4's inheritance is unstable at best, and fatally flawed at worst. It would take too long to list all occurrences, but particularly troublesome areas include tables and lists.

1.4 Class selector

WinIE4/5 allows class names to begin with digits; this isn't permitted under CSS1.

1.5 ID selector

WinIE4/5 allows ID names to begin with digits; this isn't permitted under CSS1. All browsers apply the style for a given ID to more than one instance of that ID in an HTML document, which isn't permitted. This is properly an error-checking problem and not a failing of the CSS implementations, but it's significant enough to warrant the ratings shown.

2.3 :first-line

IE3 incorrectly applies :first-line styles to the entire element.

2.4 :first-letter

IE3 incorrectly applies :first-letter styles to the entire element.

3.2 Cascading Order

There are simply far too many instances of NN4 problems to list here. If writing in support of NN4, make your style sheets as simple and as independent of cascading order as possible.

5.2.2 font-family cursive

Despite a preferences setting for cursive fonts, Opera doesn't seem to apply the preference, but instead substitutes another font.

5.2.4 font-variant small-caps

IE4/5 approximates the small-caps style by making all such text uppercase. While this can be justified under the CSS1 specification, visually, it doesn't render the text in small caps.

5.2.6 font-size xx-small through xx-large

WinIE4/5/55 and MacIE4/5 all set the default font-size value to small instead of medium. (The exception is IE5/Mac when it's in strict rendering mode.) Thus, declaring an absolute font size (such as font-size: medium) almost certainly will lead to different size fonts in Navigator and Explorer. While this isn't incorrect under the specification, it's confusing to many people.

5.3.2 background-color <color>

Nav4 doesn't apply the background color to the entire content box and padding, just to the text in the element. This can be worked around by declaring a zero-width border.

5.3.2 background-color transparent

Nav4 insists on applying this value to the parent of an element, not the element itself. This can lead to "holes" in the parent element's background.

Opera 4 has a bug that shows up only when a background has been repeated, and the rest of the background of the element is transparent (either by default or when explicitly declared). Scrolling the element offscreen and then bringing it back can cause "holes" to be punched through the repeated images of ancestor elements, thus creating visual anomalies.

5.3.4 background-repeat repeat

WinIE4 repeats only down and to the right. The correct behavior is for the background image to be tiled in both vertical directions for repeat-y, and both horizontal for repeat-x. Nav4 gets this property correct on a technicality: since it doesn't support background-position, there's no way to know whether or not it will tile in all four directions if given the chance, or instead emulate WinIE4's behavior. Opera 3.6, MacIE4.5 and WinIE5 all behave correctly.

5.3.4 background-repeat repeat-x

WinIE4 only repeats to the right, instead of both left and right.

5.3.4 background-repeat repeat-y

WinIE4 only repeats down, instead of both up and down.

5.4.3 text-decoration none

According to the specification, if an element is decorated, but one of its children isn't, the parent's effect is still visible on the child; in a certain sense, it "shines through." Thus, if a paragraph is underlined, but a STRONG element within it is set to have no underlining, the paragraph underline still spans the STRONG element. This also means that the underlining of child elements should be the same color as the parent element, unless the child element has also been set to be underlined.

In practice, however, setting an inline element to none turns off all decorations, regardless of the parent's decoration. The only exceptions are Opera and IE5/Mac, which implement this part of the specification correctly. Unfortunately, Opera 4 and Netscape 6 don't span inline images with the text decoration of a parent element. In addition, Netscape 6 appears not to use a parent element's decoration, but instead replicates it onto child elements, which is subtly wrong.

5.4.3 text-decoration blink

Since this value isn't required under CSS1, only Navigator supports it (surprise).

5.4.5 text-transform uppercase

Opera 3.6 uppercases the first letter in each inline element within a word, which (according to the CSS1 Test Suite) it shouldn't do.

5.4.6 text-align justify

In Nav4, this value has a tendency to break down in tables but generally works in other circumstances.

5.4.8 line-height

Opera 3.6 applies background colors to the space between lines, as opposed to just the text itself, when the background is set for an inline element within the text. (See the CSS1 Test Suite for more details.)

5.4.8 line-height <length>

Nav4 incorrectly permits negative values for this property.

5.5.01 margin-top

All margin properties seem to be problematic, or else completely unsupported, on inline elements; see margin for details.

5.5.02 margin-right

All margin properties seem to be problematic, or else completely unsupported, on inline elements; see margin for details. Opera 4 sometimes applies right margins to all the boxes of an inline element, not just the last one. This seems to come and go somewhat randomly, but it's common enough to be easily noticeable.

5.5.03 margin-bottom

All margin properties seem to be problematic, or else completely unsupported, on inline elements; see margin for details.

5.5.04 margin-left

All margin properties seem to be problematic, or else completely unsupported, on inline elements; see margin for details. Opera 4 sometimes applies left margins to all the boxes of an inline element, not just the first one. This seems to come and go somewhat randomly, but it's common enough to be easily noticeable.

5.5.05 margin

margin is fairly well supported on block-level elements in most browsers, with the notable exception of NN4.x. margin on inline elements is fully supported in IE5/Mac, IE55/Win, NN6, and Opera 4/5. margin should never be used on inline elements in NN4.x, which has severe and page-mangling bugs.

Opera 4's problems with correctly applying right and left margins to inline elements seems to get worse with margin.

5.5.06 padding-top

All padding properties seem to be problematic, or else completely unsupported, on inline elements; see padding for details.

5.5.07 padding-right

All padding properties seem to be problematic, or else completely unsupported, on inline elements; see padding for details.

5.5.08 padding-bottom

All padding properties seem to be problematic, or else completely unsupported, on inline elements; see padding for details.

5.5.09 padding-left

All padding properties seem to be problematic, or else completely unsupported, on inline elements; see padding for details.

5.5.10 padding

padding is fairly well supported on block-level elements in most browsers, with the notable exception of NN4.x. padding on inline elements is fully supported in IE5/Mac, NN6, and Opera 4/5. padding should never be used on inline elements in NN4.x, which has severe and page-mangling bugs. Opera 3.6 honors negative padding values, which are illegal, but since you shouldn't use negative padding values, this is an easily avoided problem.

5.5.11 border-top-width

Navigator creates visible borders even when no border-style is set and doesn't set borders on all sides when a style is set. Things get really ugly when borders are applied to inline styles. IE4 and IE5 correctly handle borders on block-level elements but ignore them for inlines.

5.5.12 border-right-width

Navigator 4.x creates visible borders even when no border-style is set and doesn't set borders on all sides when a style is set. Things get really ugly when borders are applied to inline styles. IE4 and IE5 correctly handle borders on block-level elements but ignore them for inlines.

5.5.13 border-bottom-width

Navigator 4.x creates visible borders even when no border-style is set and doesn't set borders on all sides when a style is set. Things get really ugly when borders are applied to inline styles. IE4 and IE5/Win correctly handle borders on block-level elements but ignore them for inlines.

5.5.14 border-left-width

Navigator creates visible borders even when no border-style is set and doesn't set borders on all sides when a style is set. Things get really ugly when borders are applied to inline styles. IE4 and IE5 correctly handle borders on block-level elements but ignore them for inlines.

5.5.15 border-width

Navigator creates visible borders even when no border-style is set and doesn't set borders on all sides when a style is set. Things get really ugly when borders are applied to inline styles. IE4 and IE5 correctly handle borders on block-level elements but ignore them for inlines.

5.5.18 border-top

Opera 3 doesn't apply border styles to table elements, which is the reason for the P rating. IE4 and IE5 don't apply borders to inline elements.

5.5.19 border-right

Opera 3 doesn't apply border styles to table elements, which is the reason for the P rating. IE4 and IE5 don't apply borders to inline elements.

5.5.20 border-bottom

Opera 3 doesn't apply border styles to table elements, which is the reason for the P rating. IE4 and IE5/Win don't apply borders to inline elements, which is the reason for those P ratings.

5.5.21 border-left

Opera 3 doesn't apply border styles to table elements, which is the reason for the P rating. IE4 and IE5 don't apply borders to inline elements.

5.5.22 border

Opera 3 doesn't apply border styles to table elements, which is the reason for the P rating. IE4 and Win/IE5 don't apply borders to inline elements, which is the reason for those P ratings.

5.5.23 width

Navigator 4.x applies width in an inconsistent fashion but appears to honor it on most simple text elements and images. WinIE4/5 applies it to images and tables but ignores it for most text elements such as P and headings. Opera 3.6, weirdly, seems to set the width of images to 100%, but this is largely an illusion, since minimizing the window and then maximizing it again reveals correctly sized images.

5.5.25 float

float is one of the most complicated and hardest-to-implement aspects of the entire specification. Basic floating is generally supported by all browsers, especially on images, but when the specification is closely tested, or the document structure becomes complicated, floating most often happens incorrectly or not at all. The floating of text elements is especially inconsistent, although IE5 and Opera have cleaned up their act to a large degree, leaving WinIE4 and Nav4 the major transgressors in this respect. Authors should use float with some care and thoroughly test any pages employing it.

Opera 4 seems to place floated elements a little bit off from where the ideal place would seem to be, but in general, its support is extremely robust and can generally be counted on.

5.5.26 clear

Like float, clear isn't a simple thing to support. There is typically basic support, but as things get more complicated, browser behavior tends to break down. You should thoroughly test your pages when using this property.

5.6.1 display inline

Opera 3.6 almost gets inline right, but seems to honor the occasional carriage return as though it were a <BR> element, instead of plain whitespace.

5.6.3 list-style-type none

MacNav4 displays question marks for bullets when using this value.

5.6.5 list-style-position inside

The positioning and formatting of list-items when set to this value are a bit odd under MacIE4.

6.1 Length Units ex

All supporting browsers appear to calculate ex as one-half em. This is arguably a reasonable approximation, but it's technically incorrect.

6.3 Color Units <keyword>

Navigator generates a color for any apparent keyword. For example, color: invalidValue yields a dark blue, and 'color: inherit') (a valid declaration under CSS2) comes out as a vaguely nauseous green.

6.4 URLs <url>

Navigator determines relative URLs in a style sheet with respect to the location of the HTML document, not with respect to the location of the style sheet itself.

The material in this appendix has been taken from the CSS Pocket Reference by Eric A. Meyer (O'Reilly).



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.