CMS Made Simple Forums

Posted: **Fri Oct 05, 2012 6:30 pm**

*** 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;

Posted: **Sat Oct 06, 2012 11:27 pm**

Browser and user agent detection isn't that useful these days. Take a look at Modernizer, it is more useful to detect for capabilities.

Posted: **Sun Oct 07, 2012 1:18 pm**

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?

Posted: **Sun Oct 07, 2012 4:30 pm**

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
}

Posted: **Mon Oct 08, 2012 10:01 am**

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.

CMS Made Simple Forums

Browser info in template, stylesheet, pages

Browser info in template, stylesheet, pages

Re: Browser info in template, stylesheet, pages

Re: Browser info in template, stylesheet, pages

Re: Browser info in template, stylesheet, pages

Re: Browser info in template, stylesheet, pages