PDA

View Full Version : target safari for css



ggalan
09-29-2010, 09:02 PM
i just found this script to target safari



<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.



<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


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


<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?