It’s easy to target firefox, just write as expected by the standards, at least most of the time. It’s also easy to target IE and any specific versions of them by a few of the famous hacks or the IE conditional comments to selectively include style sheets by version numbers. But how does one write CSS rules and make the browsers to recognize that they are particularly for Chrome, Safari or Opera?
Use PHP to distinguish the browsers.
echo $_SERVER['HTTP_USER_AGENT'];Put this line in a .php file, upload the file to your server and browse to it by all the different browsers you have. From the server side, $_SERVER['HTTP_USER_AGENT'] contains all the information PHP knows about the source of the request, namely your browser. Now that the server is able to recognize the client browser, you can serve up different versions of a web page by PHP and include different CSS classes according to the browser type:
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') !== false) {
// Chrome user agent string contains both 'Chrome' and 'Safari'
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== false) {
echo '<body class="chrome">';
} else {
echo '<body class="safari">';
}
} elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== false) {
echo '<body class="opera">';
} else {
echo '<body>';
}The rest is very simple. Just cascade your styles by additional classes to adapt your design to Safari, Chrome or Opera specifically. You can do a lot more than this by the server side variable $_SERVER['HTTP_USER_AGENT'], such as detecting browser versions and operating systems or writing your own web traffic statistics software.
Great idea for targetting these browsers! Never thought of resorting to PHP.
I am impress.thanks
This is great!
In my project, I wanted to find browsers that support both @font-family (download font) and support for Open Type ligatures, so I did the following. This may be good just to limit your page to one set of browsers:
==============CODE SAMPLE==================
I like this browser!
Uh, oh. Maybe you should get one of these:
Firefox, Safari, Lunascape or Arora.
==============END CODE SAMPLE==============
Oops!
My PHP code did not get picked. My bad. But how do I fix it? I am no blog expert, sorry.
Just try this link:
http://lovatasinhala.com/tipitaka/what.php
I am testing for Firefox, Safari, Lunascape, Arora and Seamonkey.
To bad it only works for non-cached pages.
Hehe, this will help for my website right now, thanks dude.
Whyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
Not use css hack
Is it possible to display pupup when a browser is chrome…
You should rarely need to do this as you can code for chrome and have alternative stylesheets for ie and special coding for FF. @santosh, you can do this using the author’s technique, and when the browser matches chrome just output a javascript alert()
Nice idea – will definitely use it in my future websites