100% No CSS Hacks

I have been wanting to write a CSS post for a while now, so I thought CSS hacks would be a good topic. By now, I think everybody knows that using CSS hacks is not a good thing, or at least I hope they do!

A method that I have seen gaining popularity over the last few years was to add a CSS class for IE browsers to the HTML tag. I totally agree with this method, however I have personally been taking this method a step further for a long time now and use it for all browsers, not just IE.

If you are using PHP, you can do the following:

function getBrowserUACSS() {
    
    $ua = strtolower($_SERVER['HTTP_USER_AGENT']);
    
    if (preg_match('/linux/i', $ua)) {
        $platform = 'linux';
    }
    else if (preg_match('/macintosh|mac os x/i', $ua)) {
        $platform = 'mac';
    }
    else if (preg_match('/windows|win32/i', $ua)) {
        $platform = 'windows';
    }
    
    // browsers to sniff and the css class name to give them
    // yes browser sniffing sucks, but it will do for now
    $browsers = array(
        'chrome'  => 'chrome',
        'safari'  => 'safari',
        'opera'   => 'opera',
        'msie'    => 'ie',
        'firefox' => 'ff'
    );
    
    $browser_css_string = '';
    
    foreach ($browsers as $browser => $css_class) {
        if (preg_match('#(?' . $browser .')[/ ]+(?[0-9]+(?))#', $ua, $version)) {
            $browser_css_string = $platform . ' ' . $css_class . ' ' . $css_class . '_v' .$version[2];
            break;
        }
    }

    return $browser_css_string;
}
?>

From the example above, I can target virtually all browsers on all platforms using a single stylesheet and individual css classes.

/** all IE browsers **/
.ie {}

/** IE6 only **/
.ie_v6 {}

/** IE6 and IE7 only **/
.ie_v6, .ie_v7 {}

/** all Firefox browsers **/
.ff {}

/** Chrome 17 only on Mac **/
.mac.chrome_v17 {}

/** etc... **/

As you can see, it’s a lot better than using hacks or multiple stylesheets, and you can target any browser running on any platform.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *


two + = 5

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>