box-sizing). Explorer doesn’t support one bit of CSS3.
| Selector | IE 6 | Firefox | Mozilla | Safari 1.2 | Opera | |
|---|---|---|---|---|---|---|
^ SelectorSelects an element whose attribute begins with a certain string.» Test Page | No | Yes | Yes | Yes | No | Attribute selectors are the most widely supported bits of CSS3. |
$ SelectorSelects an element whose attribute ends in a certain string.» Test Page | No | Yes | Yes | Yes | No | |
* SelectorSelects an element whose attribute has a certain sustring in its value.» Test Page | No | Yes | Yes | Yes | No | |
~ SelectorSelects an element that is a previous sibling of another element.» Test Page | No | No | Yes | No | No | |
| This doesn’t work in the first few builds of 1.7b. | ||||||
| Pseudo Class | IE 6 | Firefox | Mozilla | Safari 1.2 | Opera | |
|---|---|---|---|---|---|---|
:containsSelects an element with certain text contents.» Test Page | No | No | No | No | No | Example syntax: h2:contains("Welcome") would select any h2 with "Welcome" as its inner text. |
:selectionSelects an element whose text is selected.» Test Page | No | No | No | Yes | No | |
:enabled/:disabledSelects form fields that are enabled or disabled.» Test Page | No | No | No | No | No | |
:nth-child()Selects a certain child of an element.» Test Page | No | No | No | No | No | |
The Argument for this is the child's index number, like body:nth-child(2) would select the body's second child. The test page uses even and odd, which are also acceptable arguments. | ||||||
:value()Selects a form element with a certain value.» Test Page | No | No | No | No | No | |
I don't see a need for this at all, when you can just use input[value="whatever"]. | ||||||
::marker()Apply styles to list item markers.» Test Page | No | No | No | No | No | |
The styles set for this apply to the actual marker, not the LI itself. To render the test page correctly the browser must also support the counter-increment declaration. | ||||||
:not()Negation of a selector.» Test Page | No | Yes | Yes | Yes | No | |
The test page has input:not([DISABLED]) which means it selects all input fields that aren’t selected. | ||||||
| Declaration | IE 6 | Firefox | Mozilla | Safari 1.2 | Opera |
|---|---|---|---|---|---|
OpacityMake an element opaque.» Test Page | No | No | Yes | Yes | No |
The value for this must be a fraction, like .5. | |||||
border-imageUse an image as a border.» Test Page | No | No | No | No | No |
box-shadowGive shadows to arbitrary boxes.» Test Page | No | No | No | No | No |
List StylesNew CSS3 List Style types.» Test Page | No | No | No | No | Minimal |
Opera 7 and Explorer 5 Mac only support list-style-type: box;. All other browsers support none of the new styles. | |||||
caption-sidePosition of table caption.» Test Page | No | Yes | Yes | Yes | Yes |
| I know this is CSS2 but I tested this anyway. | |||||
min-/max-font-sizeSet a minimum or maximum font size.» Test Page | No | No | No | No | No |
Text stylesExtensions to text styles.» Test Page | No | No | No | No | No |
| This is complicated. See the test page and CSS3 Text Module for more details. | |||||
AppearanceGive an element a certain appearnce.» Test Page | No | Alter | Alter | No | No |
This is supposed to give a block level element the appearnce of miscellaneous things on the users computer. Possible values include tooltip and push-button.• Mozilla supports -moz-appearance, but only on Windows XP and Mac OS X. | |||||
Font AppearanceGive fonts special appearances.» Test Page | Yes | Yes | Yes | Almost | Yes |
This is also CSS2 but included in CSS3 UI. Fonts can have values like font: 13px status-bar bold;, which would make the text have the same font-family as the computer’s status bar. See the spec for more.• Safari 1.2 doesn’t support the “ status-bar” value. | |||||
box-sizingThis is used to switch Box Models.» Test Page | No | Alter | Alter | No | Yes |
Use this to switch from the bad box model to the right one with box-sizing: border-box. • Explorer 5 Mac supports this as well. • Mozilla needs -moz-box-sizing.
| |||||
iconReplace elements with icons.» Test Page | No | No | No | No | No |
With this you can replace elements with the icon property and display: icon. The UA must support both to properly render the icon.• Safari 1.2 information pending… | |||||
resizeDenote how an element can be resized.» Test Page | No | No | No | No | No |
contentOverwrite content of an element.» Test Page | No | No | No | No | Yes |
In CSS2, content could only be applied to before or after the element. In CSS3 you can assign content to the element itself. | |||||
text-shadowApply shadows to text (obviously)» Test Page | No | No | No | Yes | No |
A compatibility table of new background properties.
| Declaration | IE 6 | Firefox | Mozilla | Safari 1.2 | Opera |
|---|---|---|---|---|---|
background-clipShould the background go into the padding and border areas?» Test Page | No | No | No | No | No |
background-sizeSpecify a size for the background.» Test Page | No | No | No | No | No |
background-quantityHow many times should the background image repeat?» Test Page | No | No | No | No | No |
background-spacingSpecify a space between background images.» Test Page | No | No | No | No | No |