WordPress is a powerful system. While there are endless possibilities when it comes to extending WordPress, its core version already contains numerous functions and filters which get upgraded and extended each time WordPress is updated to a newer version.

Among many features, WP can easily recognize browser which is used for displaying a website. The other function which is in our interest for this article can add a class to the body tag.

When these two functions are put together, WordPress allows us to easily create different styles for different Browsers. If you have tried styling your website, you’ve probably encountered numerous issues across different browser.

It’s a known fact that not all popular browsers are the same. That means that different browsers can display your website differently and we’re still talking only about desktop versions. Include mobile browsers in the equation and you can easily end up in troubles. You may lose hours on styling your header until you get a perfect result in Chrome but after you open the same website in Firefox, for example, the header picture might have a different padding. And if you think of issues Internet Explorer has when it comes to many styles, a headache is guaranteed.

To avoid broken styles across different browsers, we’re about to show you a function which will help you a lot. The function will use aforementioned functions to automatically check for browser and will apply different CSS Classes for a different browser.

That means that you apply one padding for Chrome, another one for Firefox and the third one for Safari. If you ready for styling, let’s begin with the function.

Prepare WordPress for different browsers:

1. Open functions.php file
2. Copy and paste the following:

add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = 'lynx';
elseif($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_NS4) $classes[] = 'ns4';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) $classes[] = 'ie';
else $classes[] = 'unknown';
if($is_iphone) $classes[] = 'iphone';
return $classes;
}

3. Save changes

This function has prepared WordPress for the job. After you load a page on your website, a new class will be automatically added to body tag and it will look something like this:

Create styles:

Unless you already have CSS classes with same names, you still won’t be getting different results. That means that you have to create new classes in your styles.css file and create new styling rules which will be applied after a page is loaded from a specific browser. Let’s say you want to change paragraph padding just for Firefox (Gecko is the name of layout engine developed by Mozilla):

1. Open styles.css
2. Copy and paste the following:

.gecko p {
padding-top: 40px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 10px;
}

3. Save changes

By following this example, you can add numerous different styles for different browsers. While this is usually used to fix problems in displaying specific elements, no one says that you can change the entire color set for each browser if that’s something you really want.

Enjoy your styling.

The post How to apply different CSS classes for different browsers appeared first on WP Loop.