Detect browser type or device type and assign custom CSS in WordPress

Howdy!

With the advent of responsive web design in recent years, developing “mobile only” websites has somewhat become a thing of the past. That is to say we no longer need to maintain a separate version of a website for mobile devices as we once did.

All that said, it is sometimes necessary to address things on specific devices or specific browsers. A potential scenario could be that a particular jquery plugin, sticky header menu or HTML form may not work in Safari (for example) where it works fine in IE, FireFox and Chrome. There are quite a lot of differences between all the major browsers that any web developer or web designer should be aware of.

A scenario we recently had to deal with here @ Shift8 was a particular WordPress sticky / fixed header menu that was overlapping content only on iPhone devices using Safari. A user on an iPhone using Chrome did not see the problem.

So how do you deal with this scenario? Well one option would be to apply css specific for the Browser type.

Apply CSS only for IE

You can apply CSS styling that will only be applied to IE simply by making the following opening and closing comment tag in your code :

Apply CSS only for Chrome

If you wanted to only apply css declarations to Chrome, you could simply make the following declaration in your CSS :

@media screen and (-webkit-min-device-pixel-ratio:0) { 
 .whatever-class { padding-top:10px; } 
}

Apply CSS only for Firefox

Similarly to Chrome, if you wanted to apply CSS only for Firefox browsers, you would simply make the following CSS statement :

@-moz-document url-prefix() {
    .whatever-class {
        padding-top: 10px;
    }
}

There are similar “hacks” to detect and apply CSS for Safari. However these methods are only as relevant as the current browser engine dictates. For example, if you are using Chrome on an iOS device, the iOS version of Chrome is using the Safari engine. I wouldn’t call these types of tricks 100% reliable, though for FireFox/Chrome/IE declarations, they work fairly reliably for the most part.

Once you get into scenarios where you are having to address specific issues on a particular browser on a particular device, then it might be worth it to consider using a browser/user-agent detection library in PHP and assigning respective CSS only if the particular conditions are matched.

There is a particular php based browser detection library created by Chris Schuld that we have used a few times that is very solid and reliable.

The php library can be loaded in your WordPress site’s functions.php and CSS files can be applied after certain conditions are met.

Load the browser detection library in WordPress’ functions.php

First off , you want to download the browser detection library and place the Browser.php file in your wp-content/themes/whatever-theme folder. Then you will want to include it with a require_once declaration :

/* load browser detect library */
require_once( get_stylesheet_directory() . '/Browser.php' );

Create a function to assign custom CSS stylesheets in wordpress based on browser and user-agent conditions

Again still in the functions.php file in WordPress, you will want to create a function that will ultimately do a bunch of checks, dependent on the recently included Browser.php file, and apply CSS files based on the results of those checks.

add_action( 'wp_enqueue_scripts', 'custom_load_custom_style_sheet' );
function custom_load_custom_style_sheet() {
	/* this is where the browser detection code will go */
}

Detect the browser matches and apply CSS based on the result in WordPress

Okay so lets say you want to detect if the browser is Safari (doesn’t matter about version) and apply a CSS file if the condition matches. Here’s how to do it using the Browser library :

$browser = new Browser();
if( $browser->getBrowser() == Browser::BROWSER_SAFARI ) {
	wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory_uri() . 'https://dmgbuscdkh46d.cloudfront.net/safari.css', array(), PARENT_THEME_VERSION );
}

Match both browser and device and apply CSS in WordPress

In this scenario we will use nested IF-statements in PHP to complete the logic. There are many ways to accomplish the same thing in PHP but this works for us and the differences in syntax/arrangement in php are trivial :

$browser = new Browser();
if( $browser->getBrowser() == Browser::BROWSER_SAFARI ) {
	wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory_uri() . 'https://dmgbuscdkh46d.cloudfront.net/safari.css', array(), PARENT_THEME_VERSION );
	} 
else if ($browser->getBrowser() == Browser::BROWSER_IPHONE) {
	if (preg_match("/safari/i", $browser->getUseragent())) {
		wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory_uri() . 'https://dmgbuscdkh46d.cloudfront.net/iphone_safari.css', array(), PARENT_THEME_VERSION );
	}
}

So what we’re doing here is detecting if the browser is safari. If it is , we apply safari.css. If the device is an iPhone AND the browser is Safari, then we apply iphone_safari.css. In our own scenarios the css we are actually applying is just differences in padding and margin adjustments to make sure alignment is perfect on those devices.

Here is the whole block of code in our functions.php for your reference :

// load browser detect library	
require_once( get_stylesheet_directory() . '/Browser.php' );

// apply css file for safari only
add_action( 'wp_enqueue_scripts', 'custom_load_custom_style_sheet' );
function custom_load_custom_style_sheet() {
	
	$browser = new Browser();
	if( $browser->getBrowser() == Browser::BROWSER_SAFARI ) {
		wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory_uri() . 'https://dmgbuscdkh46d.cloudfront.net/safari.css', array(), PARENT_THEME_VERSION );
		} 
	else if ($browser->getBrowser() == Browser::BROWSER_IPHONE) {
		if (preg_match("/safari/i", $browser->getUseragent())) {
				wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory_uri() . 'https://dmgbuscdkh46d.cloudfront.net/iphone_safari.css', array(), PARENT_THEME_VERSION );
		}
	}
/* debugging 	
	echo 'browser : ' . $browser->getBrowser();
	echo '
platform : ' . $browser->getPlatform();
	echo '
version : ' . $browser->getVersion();
	echo '
user agent : ' . $browser->getUserAgent();
*/
}

I hope this is helpful to someone out there!