Be it in print or web, a design, once accepted by a customer has to be as close to pixel-perfect as possible all across the various browsers and operating systems. Now, if you have any experience with implementing designs you may know this is no small task to perform.
Not only do the different browsers have different default stylings, they interpret many things in their own quirky way. Often even follow-up versions of one specific browser present things differently.
Enter CSS hacks. There are a whole universe of stupid and impossible to remember hacks which mostly take advantage of browser bugs to perform magic such as hiding CSS rules from specific browsers and user agents, or kicking browsers that don’t follow the specs into line.
Internet Explorer has something really useful called conditional comments to target the different versions of Microsoft’s browser. You will find conditional comments in almost every minor to major website’s CSS these days. Targetting IE type browser versions with conditional comments are a big step ahead the the aforementioned CSS hack techniques.
Coming mainly from a programmer’s background I have a rather different approach of targetting almost any browser and specific browser version individually.
My CSS hack workflow
- Style everything for a web standards compliant browser like Firefox or Opera.
- Load an additional PHP file which outputs CSS styles with specific hacks.
- That’s it you’re done.
Here’s my css_hacks.php file that contains the different CSS adjustments needed, just import this file after your default CSS files, adjust the path to the PHP class and start adding your styles.
require 'browser.php'; $browser = new Browser; if ($browser->name == 'firefox' && $browser->version > 3) { echo ' body {background: #333} a:link {color: #fff} '; } if ($browser->name == 'msie' && $browser->version < 6) { echo ' body {background: #ccc} a:link {color: #111} '; } if ($browser->name == 'msie' && $browser->version <= 6 && $browser->os == 'macintosh') { echo ' body {background: #eee} a:link {color: #222} '; }
Finally, my PHP class broswer.php which detects the user’s operating system, the browser and more importantly the browser version.
class Browser { private $props = array('version' => '0.0.0', 'name' => 'unknown', 'agent' => 'unknown', 'os' => 'unkown'); public function __construct() { $browsers = array("firefox", "msie", "opera", "chrome", "safari", "mozilla", "seamonkey", "konqueror", "netscape", "gecko", "navigator", "mosaic", "lynx", "amaya", "omniweb", "avant", "camino", "flock", "aol", "webtv", "netpositive", "mspie", "galeon", "icab", "phoenix", "firebird"); $this->agent = strtolower($_SERVER['HTTP_USER_AGENT']); if (eregi("win", $this->agent)) $this->os = "windows"; elseif (eregi("iPhone", $this->agent)) $this->os = "iphone"; elseif (eregi("mac", $this->agent)) $this->os = "macintosh"; elseif (eregi("linux", $this->agent)) $this->os = "linux"; elseif (eregi("OS/2", $this->agent)) $this->os = "os/2"; elseif (eregi("BeOS", $this->agent)) $this->os = "beos"; foreach($browsers as $browser) { if (preg_match("#($browser)[/ ]?([0-9.]*)#", $this->agent, $match)) { $this->name = $match[1]; $this->version = $match[2]; break; } } } public function __get($name) { if (!array_key_exists($name, $this->props)) { SimpleError("No such property or function.", "Failed to set $name", $this->props); } return $this->props[$name]; } public function __set($name, $val) { if (!array_key_exists($name, $this->props)) { SimpleError("No such property or function.", "Failed to set $name", $this->props); die; } $this->props[$name] = $val; } }
[...] CSS hacks & browser version detection – a new approach | Reinhold … [...]
[...] CSS hacks and browser version detection - a new approach – Link. [...]
Helpful hack. Thanks
useful “browser” class, thanks so much