Safari 3 CSS Support July 10, 2007
Safari 3.0 has the best CSS, including CSS3, support of any popular browser. Below I go over Safari CSS Selector support and then show how to include multiple background images, and how to create rounded corners without the use of background images (FF has a similar method)
CSS Selectors and Safari 3.0
Below are the various CSS selectors, including CSS3 selectors, and Safari 3.0 for Windows and iPhone support. Green / √ means current support. Orange / Δ means that the browsers have some support for the selector. Red / Χ means that the browser is non-compliant. Non-compliant selectors can be used and a valid way to target individual browsers.
| Selector | iPhone | Windows XP | Comments |
|---|---|---|---|
| * | √ | √ | |
| E | √ | √ | |
| .class | √ | √ | |
| #id | √ | √ | |
| E F | √ | √ | |
| E > F | √ | √ | |
| E + F | √ | √ | |
| E[attr] | √ | √ | |
| E[attr=val] | Δ | Δ | Safari is case sensitive in cases where it need not be (this is the exact opposite of the IE7 quirk) |
| E[attr~=val] | Δ | Δ | |
| E[attr|=val] | Δ | Δ | |
| :first-child | Δ | Δ | When a new first child is created via javascript, the previous first child maintain :first-child attributes. Otherwise, this pseudo-class works |
| :link | √ | √ | |
| :visited | √ | √ | |
| :lang() | √ | √ | Has an inheritance quirk that I haven’t been able to replicate |
| :before | √ | √ | |
| ::before | √ | √ | |
| :after | √ | √ | |
| ::after | √ | √ | |
| :first-letter | √ | √ | |
| ::first-letter | √ | √ | |
| :first-line | √ | √ | |
| ::first-line | √ | √ | |
| The following selectors are new to CSS3 (above were in previous versions) | |||
| E[attr^=val] | Δ | Δ | Safari is case sensitive in cases where it need not be (this is the exact opposite of the IE7 quirk) |
| E[attr$=val] | Δ | Δ | |
| E[attr*=val] | Δ | Δ | |
| E ~ F | √ | √ | |
| :root | √ | √ | |
| :last-child | Χ | Χ | |
| :only-child | Χ | Χ | |
| :nth-child() | Χ | Χ | |
| :nth-last-child() | Χ | Χ | |
| :first-of-type | Δ | Δ | When a new first of a type is created via javascript, the previous match maintain :first-of-type attributes. Otherwise, this pseudo-class works |
| :last-of-type | Χ | Χ | |
| :only-of-type | Χ | Χ | |
| :nth-of-type() | Χ | Χ | |
| :nth-last-of-type() | Χ | Χ | |
| :empty | Χ | Χ | |
| :not() | √ | √ | |
| :target | √ | √ | |
| :enabled | √ | √ | |
| :disabled | √ | √ | |
| :checked | √ | √ | |
Mulitple Background Images
In a single element, you can declare multiple background images. If you open up this blog entry in Safari, the following paragraph will look like it’s in a quote bubble:
This is styled only in Safari. No other browsers currently support this CSS3. This is a simple paragraph with a single class. The CSS for this paragraph follows.
#conversation p {
background:
url("img/top-left.png") no-repeat top left,
url("img/top-right.png") no-repeat top right,
url("img/bottom-left.png") no-repeat bottom left,
url("img/bottom-right.png") no-repeat bottom right,
url("img/left.png") repeat-y left,
url("img/top.png") repeat-x top,
url("img/right.png") repeat-y right,
url("img/bottom.png") repeat-x bottom;
}
CSS Rounded Corners
Safari and Firefox now enable rounded corners simply thru CSS (no more background images>
div.box {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
}
Setting -webkit-border-radius will impact all four corners. You can set corners individually with the following:
-webkit-border-top-left-radius-webkit-border-top-right-radius-webkit-border-bottom-left-radius-webkit-border-bottom-right-radius
Notes:
- See also Web Development for the iPhone: Targeting Safari on the iPhone, and
- See also Targeting Safari 3.0 with CSS and JavaScript
