SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Safari detection

    I've been trying to figure out a way to target Safari 3 and I can't find a way other than these:
    • window.devicePixelRatio, which apparently only Safari 3 supports;
    • Traditional browser sniffing (navigator.userAgent and friends);
    • Some vendor-specific CSS property, e.g. -webkit-dashboard-region and use it in conjunction with a media query, which can do something else which can then be checked with JS.
    All have their pitfalls and are unpleasant in different ways. window.opera is a very nice thing and unfortunately there isn't an equivalent for any other browser it seems. Targeting IE is normally pretty simple and targeting Mozilla should be too I suppose, though since I always test in it first it tends to be the others I find fixes for when there appears to be no hack-less solution.

    I went for a hunt in window and document but didn't find anything that seemed especially useful (nothing with the words Apple, WebKit or Safari in them, basically).

    So, how would you target Safari 3, should the need arise?

  2. #2
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably the first method you mentioned,

    Code:
    <script type="text/javascript">
    
    function is_safari3() {
       isSafari3 = false;
       if(window.devicePixelRatio) isSafari3 = true;
    }
    
    
    then in your code just do a if(is_safari3()) { do something }
    
    </script>
    intragenesis, llc professional web & graphic design

  3. #3
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function isSafari3() {
        var browserString = navigator.userAgent;
        if (browserString.indexOf('Safari') != -1 && window.devicePixelRatio != 'undefined') {
    	alert('this is safari 3!');
        } else {
    	alert('this is NOT safari 3');
        }
    }
    I would go with checking the user agent string and object detection.

    Edit: minified

    Code:
    function isSafari3() {
        return navigator.userAgent.indexOf('Safari') != -1 && window.devicePixelRatio != 'undefined'
    }
    Edit: (again) - the previous function returned true on Safari 2.0.4 on Mac. The function below returns true on Safari 3 @ Windows and false on Safari 2.0.4 on Mac.

    Code:
    function isSafari3() {
        return navigator.userAgent.indexOf('Safari') != -1 
        && navigator.userAgent.indexOf('Version/3.0') != -1
        && window.devicePixelRatio != 'undefined'
    }

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't check for Safari 3 specifically, but for the WebKit version.

    Apple has more information on this. They also provide a small JavaScript to detect WebKit.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use window.orientation for the iPhone Safari.

    But I'm curious, anything specific you are trying to do?

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    I'd avoid using the useragent. While there doesn't appear to be an option in Safari on Windows for changing the useragent, I believe that there is one available on the Mac. Also there is nothing to stop someone using Internet Explorer or Firefox from changing the useragent to identify their browser as Safari since both those browser allow the browser owner to change the field to anything at all.

    I would hope that there is no real need to distinguish a particular browser from JavaScript. Surely the only thing of any significance where the browser supports JavaScript is whether the browser supports a given feature or not and for that you use feature sensing. The only instance I have ever come across where feature sensing doesn't work is where JavaScript and JScript support a different syntax for a command that both languages support and in that instance JScript conditional comments to distinguish whether the browser supports JScript or JavaScript can resolve the problem since there are no browsers that support both. The same JavaScript should work in Safari as work in Firefox and Opera provided that feature sensing is used to determine whether specific features are supported before trying to use them.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The reason I started doing this was because of this CSS:
    Code CSS:
    div a:hover + p {
      display:block;
    }
    It fails in Safari (bug 9279) and even though it isn't mission-critical content that Safari users will miss out on, I toyed with the idea of fixing it with Javascript for them. That got me thinking into how I'd target them. Then my senses got the better of me and I ditched the idea completely, but I still wondered how one would target Safari users.

    Quote Originally Posted by felgall
    While there doesn't appear to be an option in Safari on Windows for changing the useragent, I believe that there is one available on the Mac. Also there is nothing to stop someone using Internet Explorer or Firefox from changing the useragent to identify their browser as Safari since both those browser allow the browser owner to change the field to anything at all.
    There is on Windows as well but only if you have enabled the debugging menu. And yes, I also hope it is unnecessary to distinguish between browsers in Javascript. Object detection is a wonderful thing and I often wish there was something similar with CSS.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    How much effort should we put in to fixing broken behaviour? If too much effort is put in then the browser makers have little incentive to improve on it, but if no effort is made then that leads to either a poor experience for the user, or not using that feature at all.

    it's a tricky dilemma when we come to these browser inconsitancies.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    How much effort should we put in to fixing broken behaviour?
    Well, that depends on what browsers you intend things to work in and whether whatever feature is broken in Browser X is mission-critical.
    If too much effort is put in then the browser makers have little incentive to improve on it
    I don't think so, because even if web developers apply fixes to get around browser inconsistencies, they still complain a lot, submit bug reports and trash the bad browsers (one in particular). Besides, the fact that there is more than one browser fighting for market share is incentive enough.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Raffles View Post
    There is on Windows as well but only if you have enabled the debugging menu.
    I have never managed to find the option to turn that on so I assumed that it only existed for Mac.


    A number of possible ways to try to fix the CSS problem would include:
    1. looking to see if there is an alternate way to write the CSS that doesn't trigger the bug but still produces the desired result in all browsers.
    2. If you were looking for a JavaScript solution then possibly combining a test for one or more features that the target browser is known to support/not support which provides a combination that doesn't match other existing commonly used browsers combined with a useragent string test.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall
    I have never managed to find the option to turn that on so I assumed that it only existed for Mac.
    http://developer.apple.com/internet/....html#anchor14

    An easy solution is to use a span instead and place it inside the anchor and do a:hover span { ... } but I really don't want to change the markup. A javascript solution just seems like unnecessary hassle. I'd just rather have it not work in Safari until the bug is fixed, since it isn't a hugely important feature. But yeah, that seems like the best way to do it.

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Thanks for the link. I had seen that before but hadn't noticed the windows instructions.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •