CSS: How to write CSS rules to detect or target Chrome, Safari or Opera browsers only?

by Yang Yang on April 1, 2010

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.

Robin April 2, 2010 at 11:02 am

Great idea for targetting these browsers! Never thought of resorting to PHP.

selim May 18, 2010 at 7:31 pm

I am impress.thanks

JC June 28, 2010 at 9:54 am

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

jc June 28, 2010 at 9:59 am

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.

Zuuperman August 17, 2010 at 6:12 pm

To bad it only works for non-cached pages.

Proxy Zone December 26, 2010 at 3:38 am

Hehe, this will help for my website right now, thanks dude.

Winter February 3, 2011 at 2:45 pm

Whyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Not use css hack

santosh September 24, 2011 at 5:25 pm

Is it possible to display pupup when a browser is chrome…

Sagan December 9, 2011 at 2:12 pm

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()

suyash sumaroo July 24, 2012 at 3:30 pm

Nice idea – will definitely use it in my future websites

Comments on this entry are closed.

Previous post:

Next post: