• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 5 posts ] 
Author Message
 Post subject: Browser info in template, stylesheet, pages
PostPosted: Fri Oct 05, 2012 6:30 pm 
Offline
Forum Members
Forum Members

Joined: Mon Dec 05, 2011 4:40 pm
Posts: 67
Location: Voorburg, Nederland
*** 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:
{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:
</__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:
{if !strpos($usag,'ie6')===false}
 ....
{else}
 ....
{/if}


*** The code for the User Defined Tag ***

Code:
/*
 * 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;


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Browser info in template, stylesheet, pages
PostPosted: Sat Oct 06, 2012 11:27 pm 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 1017
Location: London
Browser and user agent detection isn't that useful these days. Take a look at Modernizer, it is more useful to detect for capabilities.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Browser info in template, stylesheet, pages
PostPosted: Sun Oct 07, 2012 1:18 pm 
Offline
Forum Members
Forum Members

Joined: Mon Dec 05, 2011 4:40 pm
Posts: 67
Location: Voorburg, Nederland
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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Browser info in template, stylesheet, pages
PostPosted: Sun Oct 07, 2012 4:30 pm 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 1017
Location: London
You don't need it for IE as you can use

Code:
<!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:
jQuery(document).ready(function($){
   if (Modernizr.touch) {
      do something for touch device
   } else {
      do something for none touch device
   }
});

or

Code:
if (!Modernizr.textshadow) {
      use a polyfill
}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Browser info in template, stylesheet, pages
PostPosted: Mon Oct 08, 2012 10:01 am 
Offline
Forum Members
Forum Members

Joined: Mon Dec 05, 2011 4:40 pm
Posts: 67
Location: Voorburg, Nederland
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting