Browser info in template, stylesheet, pages

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Post Reply
rooon
Forum Members
Forum Members
Posts: 113
Joined: Mon Dec 05, 2011 4:40 pm
Location: Nederland

Browser info in template, stylesheet, pages

Post by rooon »

*** What does this do? ***

The UDT (user defined tag) detects the name and version of the browser. Now you can create for example 'browser classes' for your stylesheet.
Here is a list of browsers and devices that are recognized:

ie = Internet Explorer
ff = Firefox
cme = Chrome
opr = Opera
saf = Safari
knq = Konqueror
irn = Iron
mob = Mobile
ipho = iPhone
ipod = iPod
ipad = iPad
mac = Mac

*** How do I use it? ***

1. Copy the code in an User Defined Tag and give it the name: get_user_agent

2. Insert {get_user_agent} into your template or page.
This will display the browser name and version.

- A more flexible way to use it is capturing the browser info and assign it to a variable. This variable can be used in your template/pages.

Code: Select all

{process_pagedata}{strip}
{capture assign=usag}{get_user_agent}{/capture}
{/strip}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*** Example 1 ***

Create a class in the </__body> that can be used in your stylesheet:

Code: Select all

</__body{if $usag != ''} class="{$usag}"{/if}>
If IE8 is the browser: </__body class="ie ie8">

...and a html/css example...
html:
<span class="mytext">What color is this?</span>
css:
span.mytext {color: #f00}
.ie span.mytext {color: #0f0}
.ie8 span.mytext {color: #00f}

*** Example 2 ***

Use the browser info in an {if} block, for example:

Code: Select all

{if !strpos($usag,'ie6')===false}
 ....
{else}
 ....
{/if}
*** The code for the User Defined Tag ***

Code: Select all

/*
 * User Defined Tag - Name: get_user_agent
 * Insert {get_user_agent} in your template.
 *
 * Extracted from the Kirby toolkit. This toolkit is completely free to use as long as you put
 * a link http://toolkit.getkirby.com to my page in your code somewhere.
 * License: MIT License. No restriction or limitation to use, copy,
 * modify, merge, publish, distribute and/or sell the software.
 */

$ua = mb_strtolower($_SERVER["HTTP_USER_AGENT"], 'UTF-8');
$name = '';
$version = '';
$device = '';
if(!preg_match('/opera|webtv/i', $ua) && preg_match('/msie\s(\d)/', $ua, $array)) {
  $name = 'ie';
  $version = $array[1];
} else if(strstr($ua, 'firefox/3.')) {
  $name = 'ff';
  $version = 3;
} else if(preg_match('/firefox\/(\d+)/i', $ua, $array)) {
  $name = 'ff';
  $version = $array[1];
} else if(preg_match('/opera(\s|\/)(\d+)/', $ua, $array)) {
  $name = 'op';
  $version = $array[2];
} else if(strstr($ua, 'konqueror')) {
  $name = 'kq';
} else if(strstr($ua, 'iron')) {
  $name = 'ir';
} else if(strstr($ua, 'chrome')) {
  $name = 'chm';
  if(preg_match('/chrome\/(\d+)/i', $ua, $array)) {
    $version = $array[1]; }
} else if(strstr($ua, 'applewebkit/')) {
  $name = 'sf';
  if(preg_match('/version\/(\d+)/i', $ua, $array)) {
    $version = $array[1]; }
} else if(strstr($ua, 'mozilla/')) {
  $name = 'ff';
}
if(strstr($ua, 'j2me')) {
  $device = 'mob';
} else if(strstr($ua, 'iphone')) {
  $device = 'ipho';
} else if(strstr($ua, 'ipod')) {
  $device = 'ipod';
} else if(strstr($ua, 'ipad')) {
  $device = 'ipad';
} else if(strstr($ua, 'mac')) {
  $device = 'mac';
} else if(strstr($ua, 'darwin')) {
  $device = 'mac';
}
$css = $name;
if ($version != '') $css .= ' ' . $name . $version;
if ($device != '') $css .= ' ' . $device;
echo $css;
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Re: Browser info in template, stylesheet, pages

Post by applejack »

Browser and user agent detection isn't that useful these days. Take a look at Modernizer, it is more useful to detect for capabilities.
rooon
Forum Members
Forum Members
Posts: 113
Joined: Mon Dec 05, 2011 4:40 pm
Location: Nederland

Re: Browser info in template, stylesheet, pages

Post by rooon »

I agree as long as you don't mind loading a javascript library (frontend) and if you want a lot of feature detection...
Most designers only need to know the browser name and version. Then a php script on the server is a faster and nicer solution.
How to use modernizer in a {if}...{/if} block?
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Re: Browser info in template, stylesheet, pages

Post by applejack »

You don't need it for IE as you can use

Code: Select all

<!DOCTYPE html>
<!--[if lte IE 7]> <__html class="ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8]>     <__html class="ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9]>     <__html class="ie9 no-js" lang="en"> <![endif]-->
<!--[if !IE]><!--> <__html class="no-js" lang="en">     <!--<![endif]-->
Then in stylesheet you can target by using .ie7 or .ie8 etc

For Modernizr e.g.

Code: Select all

jQuery(document).ready(function($){
	if (Modernizr.touch) {
		do something for touch device
	} else {
		do something for none touch device
	}
});
or

Code: Select all

if (!Modernizr.textshadow) {
		use a polyfill
}
rooon
Forum Members
Forum Members
Posts: 113
Joined: Mon Dec 05, 2011 4:40 pm
Location: Nederland

Re: Browser info in template, stylesheet, pages

Post by rooon »

This is used in boilerplate and comes sometimes with headaches. In html4 it is not allowed to use class="..." in the <__html> element, but in html5 any element can have a class.

And again, the if block is in the frontend, not in the cmsms backend. Explain how you want to use it in an conditional block in your cmsms templates, pages, stylesheets, and modules.
Post Reply

Return to “Tips and Tricks”