Safari 3 CSS Support

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:

This entry was posted in Browsers, CSS (including hacks), iPhone, Web Development. Bookmark the permalink.

7 Responses to Safari 3 CSS Support

  1. crs says:

    Very helpful article! Thanks a lot!

  2. hmmm says:

    who the hell uses ie7 or safari anyway? get with the times. and the iphone is for fanboys. repackaged currently existing technology, great invention apple.

  3. phila says:

    This is good information! Hey ‘hmmm’ all new PC’s with Vista have IE7 installed, all Macs have Safari installed, so those are huge numbers in and of themselves. iPhone is fast on it’s way to dominating the mobile web market. If Apple keeps dropping price it will speed that up even more. At Bank of America we have witnessed a HUGE increase of iPhone users in the last 2 months; in July iPhone users were 5% of our population, now it is over 30%.

  4. Me says:

    Not only is IE7 on all those veesta pee-cees and Safari on all those Macs, Safari is now available for PC.

    iPhone is repackaged technology? What about all those patents Apple took out? (they claimed 200)

    People who call enthusiasts for something “fanboys” are usually fringe or jealous.

  5. Nicholas says:

    Hopefully I can enlighten you regarding the :lang() selector. I submitted the patch that made an initial stab at implementing it. All it does is behave like *[lang~=”en”] (that is, to check the lang attribute is or begins with the specified language followed by a hyphen). It does no inheritance at all, not from previous elements and not from the Content-Language HTTP header. It was felt that this limited support was better than none at all, until such time as WebKit can do proper inheritance (something which impacts rendering speed memory footprint, which with the iPhone’s limited resources, is not a change Apple is willing to make lightly).

  6. Pingback: Safari 3 CSS support | What did you mean ?

  7. estellevw says:

    PLEASE NOTE:

    This blog post was written based on safari 3.0. Safari 3.1 was realeased a bit ago, and supports ALL the selectors.

Leave a Reply

Your email address will not be published. Required fields are marked *