This page only includes OS X-only browsers that are currently being distributed: Safari 1.x, OmniWeb 4.5/5.0, iCab 2.6 and above (current version 2.9.7), iCab 3.0 beta and Mac IE 5.2.x. Camino/Chimera is based on the Gecko layout engine and is therefore included in the Abridged Guide to CSS Support, not here. For older versions of OmniWeb (version 4.2 and below), see the MacEdition Guide to CSS Support in Discontinued OmniWeb versions and accompanying Notes on Pre-WebCore OmniWeb.
| Code | What it means |
|---|---|
| U | Untested |
| OK | OK: supported on all relevant tags. |
| P | Partial: correctly implemented but only for subset of required elements or properties. |
| Q | Quirky: works in most cases, but some odd bugs. |
| N | Not supported: doesn't work, but doesn't destroy content either |
| B | Buggy: works in ways that compromise the aesthetics. |
| D | Destroyed: obscures or otherwise messes up content. |
| Property | Safari 1.0/ OmniWeb 4.5 final (see documentation at Apple) | Safari 1.1 and 1.1.1 (OS X 10.3.x) | Safari 1.2 (OS 10.3.x) | Mac IE 5.2.x | iCab 2.6–2.9.x | iCab 3.0 beta |
|---|---|---|---|---|---|---|
| Form elements styled? | No. Aqua styling | No. Aqua styling | P: Aqua Styling, but some scaling of font sizes | Yes, but some quirks | P: background-color but not border,
for example. See notes for
more info. |
OK |
| background | OK | OK | OK | OK | See below | OK |
| background-attachment | OK: prev. bug fixed in v.60. | OK | OK | OK | OK | OK |
| background-color | OK | OK | OK | OK | OK except inline content (span), form
elements and list elements (see notes) |
OK |
| background-image | OK | OK | OK | OK | OK | OK |
| background-position | OK but see above | OK | OK | OK | OK | OK |
| background-repeat | OK | OK | OK | OK | OK | OK |
| border-collapse | N (as shown in the page you’re looking at) | N: Slated for future version post 1.1 | OK | N | N (untestable because borders on table cells not supported) | OK |
| border-spacing | N (as shown in the page you’re looking at) | N (as shown in the page you are looking at) | OK | N | N | OK |
| border | OK (see below) | OK | Ok | OK | P: all but table cells/rows and inline elements.
Note IMG is an inline element, so borders around images
that are links cannot be turned off in iCab using CSS; the HTML
attribute border="0" must be used instead. |
OK |
| border-bottom-color | OK | OK | OK | OK | P: see above | OK |
| border-bottom-style | OK. NB dotted is IE-style dashed in beta versions[1] | OK | OK | OK | P: see above | OK |
| border-bottom-width | OK | OK | OK | OK | P: see above | OK |
| border-color | OK | OK | OK | OK | P: see above | OK |
| border-left | OK | OK | OK | OK | P: see above | OK |
| border-left-color | OK | OK | OK | OK | P: see above | OK |
| border-left-style | OK. NB dotted is IE-style dashed in beta versions[1] | OK | OK | OK | P: see above | OK |
| border-left-width | OK | OK | OK | OK | P: see above | OK |
| border-right | OK | OK | OK | OK | P: see above | OK |
| border-right-color | OK | OK | OK | OK | P: see above | OK |
| border-right-style | OK. NB dotted is IE-style dashed in beta versions[1] | OK | OK | OK | P: see above | OK |
| border-right-width | OK | OK | OK | OK | P: see above | OK |
| border-style | OK. NB dotted is IE-style dashed in beta versions[1] | OK | OK | OK | P: see above | OK |
| border-top | OK | OK | OK | OK | P: see above | OK |
| border-top-color | OK | OK | OK | OK | P: see above | OK |
| border-top-style | OK. NB dotted is IE-style dashed in beta versions[1] | OK | OK | OK | P: see above | OK |
| border-top-width | OK | OK | OK | OK | P: see above | OK |
| border-width | OK | OK | OK | OK | P: see above | OK |
| bottom | OK | OK | OK | OK | N: absolute positioning not supported | OK |
| caption-side | Qu: some problems with left-side captions, but top and bottom ok | Qu: some problems with left-side captions, but top and bottom ok | Qu: some problems with left-side captions, but top and bottom ok | P (top/bottom only) | N | Top and bottom only, captions not styled, bottom interferes with table bottom |
| clear | OK | OK | OK | Q: Incorrectly inherited to child elements | Float not supported, so clear irrelevant. | OK |
| clip (NB: behavior changed radically in CSS2.1) | P: overflow not handled properly | No longer tested because of change in spec | No longer tested because of change in spec | P | N | No longer tested because of change in spec |
| color | OK | OK | OK | OK | OK | OK |
| content | P/B (See discussion) | As reported, fixed in 1.1 | OK | N | N | OK |
| counter-increment | * | N | N | N | N | OK (no other browser does?) |
| counter-reset | * | N | N | N | N | OK (no other browser does?) |
| cursor | P: pointer only? | Full support slated for post-1.1 version | OK | OK | N | OK |
| direction | ok but test pages not decisive | ok but test pages not decisive | ok but test pages not decisive | N | N | N |
| display | Not run-in or inline-block |
OK: run-in and inline-block now supported | OK | P | N | P: Not run-in but all others ok (even table-cell). |
| empty-cells | N | Qu: compresses hidden rows but doesn’t hide them completely. | Qu: compresses hidden rows but doesn’t hide them completely. | N (NB MSN for OS X gets this right) | N | Qu: compresses hidden rows but doesn’t hide them completely. |
| float | OK | ok (assuming no regression) | OK | Q: See float bugs in Bug Guide | B: images only, and can obscure text content if used. | OK |
| font | OK | OK (does do inherit) |
OK | OK | OK | OK |
| font-family | OK | Q? Doesn’t
accept inherit? |
OK - does do inherit | OK | OK | OK – and adds in ligatures automatically! |
| font-size | Handled but assumes 72dpi not 96dpi in beta versions. Uses 96dpi in version 1.0. | OK (see note at left for version 1.0) | OK | OK | OK | OK |
| font-size-adjust | N | N | N | N | N | N |
| font-stretch | N | N | N | N | N | Uses letterspacing |
| font-style | OK. | OK | OK | OK | OK | OK |
| font-variant | P: small-caps not supported, treated as all-caps (see W3C test page) | P: small-caps not supported, treated as all-caps (see W3C test page) | OK. small-caps now supported | OK | N | Small caps supported, but glitches
with :first-line pseudoclass? |
| font-weight | OK | OK | OK | OK | OK | OK |
| height | ok | OK | OK | OK | B: many problems, even with simple pixel values. Resizing images in CSS works for pixel values ok. | OK judging by simple tests |
| left | ok | OK | OK | OK | N: absolute positioning not supported | OK |
| letter-spacing | OK | OK | OK | OK | OK | OK |
| line-height | OK | OK | OK | OK | OK | OK |
| list-style | OK | OK | OK | OK | P: images not supported but other properties ok | OK |
| list-style-image | OK | OK | OK | OK | N | OK |
| list-style-position | OK | OK | OK | OK | Q: inside and outside supported, but background colors apparently in the wrong place. | OK |
| list-style-type | OK: including latin and alpha types, lower-greek
and hebrew. (Leading zeros don’t appear to be supported) |
OK: including latin and alpha types, lower-greek
and hebrew. (Leading zeros don’t appear to be supported) |
OK | P : Only the basic CSS1 properties, not CSS2
ones like lower-greek or lower-latin. |
P: only CSS1 properties, not CSS2 like lower-greek,
some minor glitches |
Subject to font availability, includes Hebrew, CJK ideographs etc. |
| margin | OK | OK | OK | OK | Generally too large on block elements; seems to add to default value instead of replacing it. Zero margins not honored for some elements (eg P, headings). | OK |
| margin-bottom | OK | OK | OK | OK | See margin above | OK |
| margin-left | OK | OK | OK | OK | See margin above; also % units calculated as % of viewport, not parent element. | OK |
| margin-right | OK | OK | OK | OK | See margin above; also % units calculated as % of viewport, not parent element. | OK |
| margin-top | OK | OK | OK | OK | See margin above | OK |
| marker-offset | N | N | N | N | N | N? (available tests not obvious) |
| max-height | N | N | N | N | N | OK |
| max-width | P: not if element is positioned or replaced | P: not if element is positioned or replaced | P: not if element is positioned (replaced elements ok) | N | N | Ok, though height of replaced elements (images) resizes too! |
| min-height | N | N | N | N | N | OK |
| min-width | P: non-positioned non-replaced elements only | P: non-positioned non-replaced elements only | P: not if element is positioned (replaced elements ok) | N | N | Ok, though height of replaced elements (images) resizes too! |
| outline | P: Not form elems | P: Not form elems | P: Not form elems | OK | N | OK |
| outline-color | See above | See above | See above | OK | N | OK |
| outline-style | See above | See above | See above | OK | N | OK |
| outline-width | See above | See above | See above | OK | N | OK |
| overflow | P: scroll and auto
not supported (treated like hidden) |
OK: scroll and auto
now work |
OK | Q: see Bug Guide | N | OK |
| padding | OK | OK | OK | OK | P: all but table cells | OK |
| padding-bottom | OK | OK | OK | OK | P: all but table cells | OK |
| padding-left | OK | OK | OK | OK | P: all but table cells | OK |
| padding-right | OK | OK | OK | OK | P: all but table cells | OK |
| padding-top | OK | OK | OK | OK | P: all but table cells | OK |
| position | OK: (Quirks with relatively positioned elements fixed in build 60) | ok (assuming no regression) | OK | Q: See Bug Guide | N | OK |
| quotes | N | N | N | N | N | OK |
| right | ok | OK | OK | OK | N: absolute positioning not supported | OK |
| table-layout (alternative test page) | ? Claimed in Konqueror docs but test page not decisive | Looks ok for table-layout: fixed. |
Looks ok for table-layout:
fixed. |
? | Q: Some tests seem to work ok, but not others | Looks ok for table-layout:
fixed. |
| text-align (NB no browser does char alignment) | OK | OK | OK | OK | Not justify |
Not justify |
| text-decoration | OK | OK | OK | OK | Q: Child elements have own text color instead of being spanned by parent’s decoration color. | OK |
| text-indent | OK | OK | OK | OK | OK | Percentages of own width, not parent’s (version 2.x got this right) |
| text-shadow | N | OK: the first browser to support this! | OK | N | N | N |
| text-transform | Some glitches with special characters and elements inside words | Special characters now transformed correctly but some problems with elements inside words | Special characters now transformed correctly but some problems with elements inside words | OK | OK | OK |
| top | ok | OK | OK | OK | N: absolute positioning not supported | OK |
| unicode-bidi | N: but direction does work |
N | N | N | N | N |
| vertical-align | OK | OK | OK | OK | N | OK |
| visibility | P: All except collapse |
P : All except collapse |
Qu: collapse only partial | P: All except collapse (MSN gets
this right) |
N | Qu: collapse only partial |
| white-space | Q: can't override pre setting of PRE
and XMP elements |
OK: glitch in 1.0 fixed | OK | OK | OK | OK |
| width | ok | OK | OK | OK | Percent horizontal width values are calculated relative to the browser window, not relative to the containing block. Some glitches for pixel-value widths, but they generally work ok. Resizing images in CSS works for pixel values ok. | OK |
| word-spacing | OK | OK | OK | OK | OK | OK |
| z-index | OK | OK | OK | OK | Absolute positioning not supported, so this property is not relevant | OK |
Direct-child
selector (>) |
OK but some quirks on long chains of descendents. (See point 3 in Eric Meyer’s test page) | OK | N: Doesn’t support, but doesn't destroy | OK | ||
| attribute selectors | OK | OK | OK | N | D: Renders all elements of the type (eg P) with the style, not just those with that attribute. | OK |
| universal selector | OK | OK | OK | OK | N | OK |
| Sibling selector (+) | OK | OK | OK | OK | N (see test page) | OK |
Multiple classes (p.one {} p.two {},
<p class="one two">) |
OK | OK | OK | OK | OK | OK |
Multiple classes in same rule (p.one.two,
<p class="one two">) |
OK | OK | OK | OK | N | OK |
| :before and :after | OK | OK | OK | OK | N | OK |
| :first-line pseudoclass | OK | OK | OK | OK | N | OK |
| :first-letter pseudoclass | OK - OW has some glitches in inheritance through a child element (see list item test) | OK | OK | OK | N | OK |
| :first-child pseudoclass (CSS2) (test) | OK | OK | OK | OK | N | OK |
| :link, :visited pseudoclasses | OK | OK | OK | OK | OK | OK |
| :hover pseudoclass | OK | OK | OK | P: a elements only |
N | OK |
| :lang pseudoclass | N | N | N | OK | N | OK |
| @import url("../file.css") | OK | OK | OK | OK | OK | OK |
| @import url(../file.css); | OK | OK | OK | OK | OK | OK |
| @import url(../hide1b.css) screen; | OK | OK | OK | OK | OK | OK |
| @import "../hide2.css"; | OK | OK | OK | OK | OK | OK |
| media attributes | Generally OK but some quirks on exotic combinations. | Generally OK but some quirks on exotic combinations. | Generally OK but some quirks on exotic combinations. | OK | N: does not ignore media="screen"
but does not support print stylesheets |
OK, including Hixie’s exotic tests |
| @media rules | OK | OK | OK | N | N: ignores rule | OK |
| Tantek box-model hack | OK | OK | OK | OK | OK | OK |
| High-pass filter (including inline version) | Passes linked but not inline version | OK | OK | OK | Bug: Passes Hack, but does not support all of CSS1 or CSS2 | OK |
| Caio’s hack | OK: Hides from Netscape 4 as intended but not Safari | OK: Hides from Netscape 4 as intended but not Safari | OK | OK: Hides from Netscape 4 as intended but not IE | OK: Hides from Netscape 4 as intended but not iCab | OK: Hides from Netscape 4 as intended but not iCab |
| Be Mean to Opera Hack (test) | B: Replicates Opera’s parsing bug | OK | OK | OK | B: Doesn’t support child selector | OK |
| Owen Hack (test) | OK | OK | OK | OK | B: Fails both “Be Nice to Opera Hack” and Owen Hack | OK |
This page was compiled by CodeBitch and hosted by MacEdition, based on analysis of the CSS1 and (some of the) CSS3 Selectors Test Suites provided by the W3C, Eric Meyer’s CSS2 Test pages, CSS2 Test pages provided by Richinstyle, and CodeBitch’s own tests of CSS compatibility, with added information from pages provided by Johannes Koch, Albin.Net, Ian Hickson and David Baron. Some information was initially drawn from other compilations of bug information for Safari, and from the Konqueror documentation, but all such information has been independently verified by CodeBitch.
No warranties are given on the correctness of this page, since this depends both on the correctness of the tests and correctness of my interpretation of the tests. All reasonable efforts have been made to ensure accuracy. Corrections, clarifications and updates for new versions of these browsers will be gratefully appreciated. Thanks are due to Matt McIrvin, the rest of the MacEdition staff, and numerous dedicated web developers with Macs, who have sent comments, diagnoses and screenshots.
Last Modified: 26 December 2004 (12:30PM AEDST) CodeBitch
This work is licensed under a Creative Commons License.