Smarty Forum Index Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon.

New Plugin: Browser Body Class

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Plugins
View previous topic :: View next topic  
Author Message
jhabbley
Smarty n00b


Joined: 25 Jun 2008
Posts: 2

PostPosted: Wed Jun 25, 2008 4:38 pm    Post subject: New Plugin: Browser Body Class Reply with quote

After struggling with the many different methods of proper cross-browser CSS integration, I decided to find a clean solution that could be used easily.

The requirements:
No hacks
No conditional includes.
No separate stylesheets for different browsers
No dynamic stylesheets.

The solution:
A new smarty plugin function: {browser_body_class}

The concept is rather simple. In your page template modify the BODY tag as follows

BODY class="{browser_body_class}"

This function will generate several class names based on the operating system, browser, and version. Using these permutations, you can specify stylesheet rules to target specific browsers.

For example:

Using Internet Explorer 7 on a PC, your BODY class names are:
BODY class="win_ie_7 win_ie ie_7 win ie"

Using Internet Explorer 6 on a PC, your BODY class names are:
BODY class="win_ie_6 win_ie ie_6 win ie"

Using Safari 5.2.5 on Mac OSX, your BODY class names are:
BODY class="mac_safari_525 mac_safari safari_525 mac safari"

You get the idea...

Now... in your *single* stylesheet, you can specify CSS rules for specific browsers. For example:

Code:

P  { color: #000000 } /* black text for all browsers */

BODY.ie P  { color: #FF0000} /* red text for all IE browsers */
BODY.firefox P { color: #00FF00 } /* green text for all Firefox browsers */
BODY.safari P {color: #0000FF } /* blue text for all Safari browsers */


Or if you wanted get more specific:
Code:

BODY.ie_7 P { color: #FFFF00 } /* yellow text for IE 7 */
BODY.ie_6 P { color: #44444 } /* grey text for IE 6 */


Obviously, font colors are just an example. This would be more ideally be used for browser-specific layout issues with padding, margins, and IE's mystical 'has-layout' issues.

The {browser_body_style} plugin:
Code:

<?php
/**
 * Smarty plugin
 * @package Smarty
 * @subpackage ewtplugins
 */

/*
 * Smarty {browser_body_style} function plugin
 *
 * File:     function.browser_body_style.php<br>
 * Type:     function
 * Name:     browser_body_style
 * Date:    May 22, 2008
 * Purpose:  generate browser/os-specific class names for the body tag to facilitate browser-specific CSS
 * @author   Jason Habbley <jason at edgeworkstech dot com>
 * @version  0.1
 * Examples:
 *
 * In your template:
 *  <body class="{browser_body_style}">
 *
 * In IE 7, renders as:
 *  <body class="win_ie_7 win_ie ie_7 ie">
 * In Firefox 3 (PC), renders as:
 *  <body class="win_firefox_3 win_firefox firefox_3 win firefox">
 * In Mac OSX Safari 5.2.5, renders as:
 *  <body class="mac_safari_525 mac_safari safari_525 mac safari">
 *
 * In your CSS, you can now use the BODY class to override styles per browser:
 *   P            { color: #000000; }
 *   BODY.ie P      { color: #FF0000; } /* All IE browsers have red text * /
 *  BODY.ie_7 P      { color: #00FF00; } /* ALL IE 7 browsers have green text * /
 *  BODY.firefox P   { color: #0000FF; } /* ALL firefox browsers have blue text * /
 *  BODY.mac      { color: $00FFFF; } /* ALL mac browsers have purple text * /
 */


function smarty_function_browser_body_style($params, &$smarty)
{

    $browser = array ("IE","OPERA","MOZILLA","NETSCAPE","FIREFOX","SAFARI");
    $os = array ("WIN","MAC");
    $info['browser'] = "OTHER";
    $info['os'] = "OTHER";
 
    foreach ($browser as $parent)
        {
        $s = strpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $parent);
        $f = $s + strlen($parent);
        $version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);
        $version = preg_replace('/[^0-9,.]/','',$version);
        if ($s)
            {
            $info['browser'] = $parent;
            $info['version'] = $version;
            }
        }
 
    foreach ($os as $val)
    {
        if (eregi($val,strtoupper($_SERVER['HTTP_USER_AGENT']))) $info['os'] = $val;
    }
   
   $output = array();
   //os_browser_version
   $output[] = join("_", array($info['os'], $info['browser'], (int)$info['version']));
   //os_browser
   $output[] = join("_", array($info['os'], $info['browser']));
   //browser_version
   $output[] = join("_", array($info['browser'], (int)$info['version']));
   //os
   $output[] = $info['os'];
   //browser
   $output[] = $info['browser'];

   return strtolower(join(" ", $output));
}
?>


Thoughts?
Back to top
View user's profile Send private message
U.Tews
Administrator


Joined: 22 Nov 2006
Posts: 5068
Location: Hamburg / Germany

PostPosted: Thu Jul 10, 2008 6:12 am    Post subject: Reply with quote

This will work only if you have caching disabled or make the call to the plugin dynamic.
Back to top
View user's profile Send private message
jhabbley
Smarty n00b


Joined: 25 Jun 2008
Posts: 2

PostPosted: Wed Jul 16, 2008 2:02 pm    Post subject: Reply with quote

Ah, good point. Simple enough to fix.

Below is a version of the plugin written as an insert plugin (which are not cached).

To use this function, the code in your template only varies slightly:
Code:

<body class="{insert name="browser_body_style"}">


The {browser_body_style} plugin - insert style:
Code:
<?php
/**
 * Smarty plugin
 * @package Smarty
 * @subpackage ewtplugins
 */

/*
 * Smarty {browser_body_style} insert plugin
 *
 * File:     insert.browser_body_style.php<br>
 * Type:     insert
 * Name:     browser_body_style
 * Date:    July 16, 2008
 * Purpose:  generate browser/os-specific class names for the body tag to facilitate browser-specific CSS
 * @author   Jason Habbley <jason at edgeworkstech dot com>
 * @version  0.2
 */


function smarty_insert_browser_body_style($params, &$smarty)
{

    $browser = array ("IE","OPERA","MOZILLA","NETSCAPE","FIREFOX","SAFARI");
    $os = array ("WIN","MAC");
    $info['browser'] = "OTHER";
    $info['os'] = "OTHER";
 
    foreach ($browser as $parent)
        {
        $s = strpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $parent);
        $f = $s + strlen($parent);
        $version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);
        $version = preg_replace('/[^0-9,.]/','',$version);
        if ($s)
            {
            $info['browser'] = $parent;
            $info['version'] = $version;
            }
        }
 
    foreach ($os as $val)
    {
        if (eregi($val,strtoupper($_SERVER['HTTP_USER_AGENT']))) $info['os'] = $val;
    }
   
   $output = array();
   //os_browser_version
   $output[] = join("_", array($info['os'], $info['browser'], (int)$info['version']));
   //os_browser
   $output[] = join("_", array($info['os'], $info['browser']));
   //browser_version
   $output[] = join("_", array($info['browser'], (int)$info['version']));
   //os
   $output[] = $info['os'];
   //browser
   $output[] = $info['browser'];

   return strtolower(join(" ", $output));
}
?>
Back to top
View user's profile Send private message
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Plugins All times are GMT
Page 1 of 1

 
Jump to:  
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 vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP