Targeting Safari 3 with CSS and JavaScript: Safari3 Hacks & Filters

See also Safari 3.0 CSS3 Support
Google Chrome and Safari 3.1 CSS3 Support and
CSS Hack/Filter for Google Chrome and Safari 3.1

CSS Filter: Safari CSS Hack

Not that Safari 3.0 on Windows is a grade-A browser yet, and not that I have figured out any reasons to need to hack for this browser yet, but two good potential CSS filters include using :first-of-type and -webkit-min-device-pixel-ratio.

:first-of-type

Safari is the only browser that seems to understand the :first-of-type pseudo class. Safari fails only in that if you add a siblingnode of the same type with javascript prior to the first of the type, safari will target both of the elements instead of just the new one. That failure shouldn’t be a concern in 99.999% of the cases.

To target Safari, simply code:

body:first-of-type p {color:#ff0000;}

Notes

  • :first-of-type is a CSS3 selector, and as such, other browsers will eventually start supporting it, and will therefore be targeted by this filter. In other words, while this is a simple method to target Safari 3.0 to the exclusion of all other current browsers, it is not future proof.

-webkit-min-device-pixel-ratio

Safari added the feature, device-pixel-ratio, that determines how a CSS pixel relates to a device pixel. This CSS3 media query allows for the inclusion of a separate CSS file:

<link rel="stylesheet" media="screen and min-device-pixel-ratio: 0" href="safari3.css"/>

This "if" statement includeing min-device-pixel-ratio will return "true" for Opera 9, Firefox 2.0 and Safari 3, so while it’s a good solution for omitting IE, it won’t work for targeting Safari 3.0 only.

@media screen and (-webkit-min-device-pixel-ratio:0){
                p {color: #00ff00;}
}

The above syntax is more browser specific, and targets both Safari 3.0 and Opera 9. The benefit of this filter/hack over the :first-of-type pseudoclass is that since CSS3 is supposed to support device-aspect-ratio and possibly device-pixel-ratio the -webkit portion of the syntax will likely not be supported by additional browsers in the future. In other words, it seems like a more future-proof solution than the :first-of-type, even though :first-of-type is a more browser specific solution at the moment.

Notes:

  • Webkit is basically the "opensource" framework that is the basis for the Safari browser, so -webkit is not standard.
  • For more on Safari and DPI visit Webkit’s High DPI Web Sites blog entry.
  • In the Opera CSS support list ,device-aspect-ratio and min-device-aspect-ratio are listed as supported. Although not listed, Opera supports media query device-pixel-ratio when tested.

Targeting Safari 3 with JavaScript

Safari is the only browser that supports the window property devicePixelRatio. So, similar to that old fashioned document.all, you can browser sniff this way:

<script type="text/javascript">
   isSafari3 = false;
   if(window.devicePixelRatio) isSafari3 = true;
</script>

Hedger Wang provides a sample in his blog.

Notes:


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

11 Responses to Targeting Safari 3 with CSS and JavaScript: Safari3 Hacks & Filters

  1. SteeleR says:

    thanks, man.. that really works.. it was hard to find a sollutin for safari..

  2. You could write this JavaScript at the end shorter like:
    var isSafari3 = Boolean(window.devicePixelRatio);
    or even:
    var isSafari3 = !!window.devicePixelRatio;

    Two instructions is waste of space. ;)

  3. While experienced visitors will no doubt see what’s necessary, novices — like me — may experience some difficulty getting your:

    @media screen and (-webkit-min-device-pixel-ratio:0){
    p {color: #00ff00;}
    }

    . . . to work properly. The reason? Unless I’m mistaken (which is quite possible!), there seems to have been a typo in your code — shouldn’t there be a semi-colon after the “0″ in “-ratio:0)” ?

    Thanks for posting this filter/hack — the only one of its kind that I’ve so far found on the net!

  4. You could even drop “window.” as every “global” variable is in fact a property of window and type:
    isSafari3 = !!devicePixelRatio;

  5. Actually, I would like to delete my last response. It gives an error for an undefined variable. You could approach it with typeof devicePixelRatio !== ‘undefined’, but it could be longer than typing just “window.”.

  6. David Storey says:

    Techniques here considered harmful.

    People shouldn’t use a CSS property to detect a browser. Opera also supports first-of-type

    something with the -webkit- prepend may be fairly safe as no other browser should implement it

    using JavaScript like that is also very harmful. Opera breaks on many sites due to people assuming document.all = IE. This is not true. The same is true of devicePxelRatio/ Just because browsers don’t support it at the time of writing, doesn’t mean it will always be the case. Use object detection for what you are actually using instead.

  7. Chaz says:

    great article and nice hack. it’s a shame the first-of-type hack will only last so long as it looks ideal.

  8. Spencer says:

    So, I see the javascript solution to target Safari only, but where does the CSS go. I am needing to target only Safari with some CSS that looks a bit different in that browser than in the others.

    Thanks!

  9. estellevw says:

    Hi Spencer-

    The first part of the article is on CSS, so you would place the CSS in your CSS using the body:first-of-type selector in front of your selector (just realize, adding a selector increases your specificity), or, in the second case, between the brackets like the p.

    YOu don’t want to put your CSS in your javascript. It is best to separate content (XHTML) from presentation (CSS) from behavior (JS)

  10. Thanks for the info. I was struggling to fix a bug on Google Chrome. Its now fixed because of body:first-of-type

    Cheers
    Sridhar Kuppalli

  11. Ben Swift says:

    Wow.. you’re great & so’s this website!!

    Only thing I’d suggest is to not use comic sans :P

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>