Browser Specific CSS

[duclet]

Well, I just stumbled upon this and I find this to be a pretty good solutions to getting browser specific CSS without the need to using hacks. Best of all, I can do it for all kinds of browsers instead of just using the star hack which only works for IE. The original code uses JavaScript but I change it to use PHP instead. Here is what you will need to do:

1. Create a User Definded Tag with the following content (I'll call it user_agent):

Code: Select all

// The list of browsers
$browsers = array(
    'Firefox' => ' Firefox/',
    'Internet_Explorer' => ' MSIE ',
    'WebKit' => ' AppleWebKit/', // Safari & Google Chrome
    'Opera' => 'Opera/'
);

// Output the browser
foreach($browsers as $class_name => $search_key) {
    if(is_numeric(strpos($_SERVER['HTTP_USER_AGENT'], $search_key))) {
        echo $class_name;
        return;
    }
}

// If we made it here, the browser is not on the list
echo 'Unknown_Browser';

Now, in the template, just use this tag as a class name. For example:

Code: Select all

...
</__body class="{user_agent}">
...

And there you have it. Any browser specific CSS can be done with:

Code: Select all

/* Firefox specific CSS */
body.Firefox p { /* something */ }

/* Safari specific CSS */
body.WebKit p { /* something */ }

When you think about, that was pretty simple.

[JeremyBASS]

hello, nifty stuff... here is a long list of other specific broswers... in case you can put it to good use  ... laters

[szetlan]

duclet: I don't recommend the class={user_agent} approach, since you wind up having to class virtually every object on your page.  What you want is for a stylesheet to apply to the entire page if and only if it matches a browser filter.  The conditional comment combined with {stylesheet name="ie-only-stylesheet"} is probably the easiest way to go.  It's a shame there's not a way to do that automatically, though, since it won't be readily apparent in the template/css associations.

[duclet]

Why would you class every single object? Just do it like you would normally. Then if there are some specific CSS to a browser, you add that to the CSS.

[Russ]

I'm with szetlan, its not the browser string you should be targeting but the browsers capabilities In any event what about mobile IE or mobile Opera or indeed mobile Webkit? It just is not going to work to well. Browsers strings for desktops are bad enough, but for mobile devices it is a nightmare...

Best approach is to supply a nice standard css for those compliant browsers (Opera, Firefox, Webkit) and then some extra CSS specifically for IE using the tags. This is of course further complicated by IE8.

For mobiles I'd go with very restrained CSS styles (almost none), don't forget a fall back handheld stylesheet, and you might want to make an exception for capable devices like the iPhone, Android etc.