|
Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon. |
|
View previous topic :: View next topic |
Author |
Message |
jhabbley Smarty n00b
Joined: 25 Jun 2008 Posts: 2
|
Posted: Wed Jun 25, 2008 4:38 pm Post subject: New Plugin: Browser Body Class |
|
|
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 |
|
U.Tews Administrator
Joined: 22 Nov 2006 Posts: 5068 Location: Hamburg / Germany
|
Posted: Thu Jul 10, 2008 6:12 am Post subject: |
|
|
This will work only if you have caching disabled or make the call to the plugin dynamic. |
|
Back to top |
|
jhabbley Smarty n00b
Joined: 25 Jun 2008 Posts: 2
|
Posted: Wed Jul 16, 2008 2:02 pm Post subject: |
|
|
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 |
|
|
|
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
|
|