target safari for css

**ggalan** · 09-29-2010, 09:02 PM

i just found this script to target safari

Code:

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

but where would i add the "safari.css" line to point to a different css file?

**bluewalrus** · 09-29-2010, 09:23 PM

You could also do this using the user agent and serverside script. If you'd want to do it with a server side solution let me know.

**ggalan** · 09-29-2010, 09:33 PM

i guess i wasnt clear, i have a file called safari.css
where do i write that in the JS above?

yes i would like to hear more about a server sided solution

**bluewalrus** · 09-29-2010, 10:50 PM

Server Side version. I forget where I got this but I didn't right it, I made some modifications but don't think they're present here.

PHP Code:


<head>
<?php
function browser_info($agent=null) {
  // Declare known browsers to look for
  $known = array('msie', 'firefox', 'safari', 'webkit', 'opera', 'netscape',
    'konqueror', 'gecko');
  // Clean up agent and build regex that matches phrases for known browsers
  // (e.g. "Firefox/2.0" or "MSIE 6.0" (This only matches the major and minor
  // version numbers.  E.g. "2.0.0.6" is parsed as simply "2.0"
  $agent = strtolower($agent ? $agent : $_SERVER['HTTP_USER_AGENT']);
  $pattern = '#(?<browser>' . join('|', $known) .
    ')[/ ]+(?<version>[0-9]+(?:\.[0-9]+)?)#';
  // Find all phrases (or return empty array if none found)
  if (!preg_match_all($pattern, $agent, $matches)) return array();
  // Since some UAs have more than one phrase (e.g Firefox has a Gecko phrase,
  // Opera 7,8 have a MSIE phrase), use the last one found (the right-most one
  // in the UA).  That's usually the most correct.
  $i = count($matches['browser'])-1;
  return array($matches['browser'][$i] => $matches['version'][$i]);
}
$ua = browser_info();
if ($ua['firefox']) { 
    echo '<link rel="stylesheet" type="text/css" href="firefox.css" />';
}
if ($ua['msie']) { 
    echo '<link rel="stylesheet" type="text/css" href="ie.css" />';
}
if ($ua['opera']) { 
    echo '<link rel="stylesheet" type="text/css" href="opera.css" />';
}
if ($ua['safari']) { 
    echo '<link rel="stylesheet" type="text/css" href="safari.css" />';
}
?>
</head>

EDIT: Eit you can also target specific versions for example

Code:

if ($ua['safari'] < 3)

For more examples see here: http://php.net/manual/en/function.get-browser.php I found where I got that.

**ggalan** · 09-30-2010, 12:30 AM

thank you! can this also detect if it is mac firefox vs pc firefox?

**bluewalrus** · 09-30-2010, 01:37 AM

It will now hah

PHP Code:


<head>
<?php
function browser_info($agent=null) {
    global $os;
    // Declare known browsers to look for
    $known = array('msie', 'firefox', 'safari', 'webkit', 'opera', 'netscape', 'konqueror', 'gecko');
    // Clean up agent and build regex that matches phrases for known browsers
    // (e.g. "Firefox/2.0" or "MSIE 6.0" (This only matches the major and minor
    // version numbers.  E.g. "2.0.0.6" is parsed as simply "2.0"
    $agent = strtolower($agent ? $agent : $_SERVER['HTTP_USER_AGENT']);
    if (preg_match('/linux/', $agent)) { 
        $os = "Linux";
    }elseif (preg_match('/macintosh|mac os x/', $agent)) {
        $os = 'Mac';
    } elseif (preg_match('/windows|win32/', $agent)) {
        $os = 'Windows';
    } else {
        $os = 'Unknown';
        //Set this to the operating system you'd expect because if they get here it was unrecognizible
    } 
    $pattern = '#(?<browser>' . join('|', $known) . ')[/ ]+(?<version>[0-9]+(?:\.[0-9]+)?)#';
    // Find all phrases (or return empty array if none found)
    if (!preg_match_all($pattern, $agent, $matches)) return array();
        // Since some UAs have more than one phrase (e.g Firefox has a Gecko phrase,
        // Opera 7,8 have a MSIE phrase), use the last one found (the right-most one
        // in the UA).  That's usually the most correct.
    $i = count($matches['browser'])-1;
    return array($matches['browser'][$i] => $matches['version'][$i]);
}
$ua = browser_info();
if ($os == 'Mac') {
    if ($ua['firefox']) { 
        echo '<link rel="stylesheet" type="text/css" href="mac_firefox.css" />';
    }
//    if ($ua['msie']) { 
//        echo $ua['msie'];
//    } MAC NO LONGER HAS AN IE IF YOU WANT TO TEST FOR IE YOU COULD...
    if ($ua['opera']) { 
    echo '<link rel="stylesheet" type="text/css" href="mac_opera.css" />';
    }
    if ($ua['safari']) { 
    echo '<link rel="stylesheet" type="text/css" href="mac_safari.css" />';
    }
} elseif ($os == 'Windows') {
    if ($ua['firefox']) {
        echo '<link rel="stylesheet" type="text/css" href="windows_firefox.css" />';
    }
    if ($ua['msie']) { 
        echo '<link rel="stylesheet" type="text/css" href="windows_ie.css" />';
    }
    if ($ua['opera']) { 
            echo '<link rel="stylesheet" type="text/css" href="windows_opera.css" />';
    }
    if ($ua['safari']) { 
            echo '<link rel="stylesheet" type="text/css" href="windows_safari.css" />';
    }
} elseif ($os == 'Unknown') {
                echo '<link rel="stylesheet" type="text/css" href="default.css" />';
}
?>
</head>

Oh, yea I didn't do the conditionals for Linux but you get the just of it?

Thread: target safari for css

Thread Tools

Search Thread

target safari for css

The Following User Says Thank You to bluewalrus For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions