Until all browsers completely comply with w3c specifications we have to find workarounds in order for our websites to be pixel perfect in various browsers. The browsers we need to be most concerned with include Internet Explorer, Safari, and Firefox.
Firefox is a web developers wet dream. It features many plugins that allow a web developer to write CSS, JS, and HTML in real time. Thus you do not need a hack or workaround for Firefox since you are developing your websites in Firefox.
With the release of Safari 3 for both Mac and Windows, Safari is becoming a strong player. When Safari-centric adjustments need to be made, you can use a browser detect, or when you write javascript that detects the user’s browser and can set styles only to that browser. You may have heard that browser detects bad and should be avoided, but when you do not have any other options it may be your only hope. Using Core DOM API, or just plain old javascript, browser detect code can be confusing and long. A library, like dojo, prototype, or mootools, can make life get much easier and tasks can be checked off much faster. In jquery, a popular library, it is easy to detect the browser.
In this example, not only do I detect Safari but set a CSS class called “safari” to the tag seen only by Safari’s eyes.
// detects the browser in an if statement
if ($.browser.safari) {
// Writes a class safar on the <body> tag. Or in other words, <body class="safari">
$("body").addClass("safari");
}
And in this example we write it in Mootools,
if (window.safari) {
$$("body").addClass("safari");
}
On to Internet Explorer. For styling (CSS) we can use conditional comments placed in your html. Right after the
tag insert the following code:
<!--[if lte IE 5]> <div class="ie"> <![endif]--> <!--[if IE 6]> <div class="ie ie6"> <![endif]--> <!--[if IE 7]> <div class="ie ie7"> <![endif]-->
Results:
IE5+ gets <div class=”ie”>
IE6 gets <div class=”ie6″>
IE7 gets <div class=”ie7″>
At the bottom of your document, right before the closing tag add these lines of code to close the IE <div>s.
<!--[if IE]> </div> <![endif]-->
On to the stylizing in CSS:
To write styles for Safari just start any style rule with .safari. For instance,
.safari div#title {
margin: 0 0 3px 0;
}
And similar for IE:
.ie div#title {
position: relative;
}
.ie7 div#title {
margin: 0 0 3px 0;
}
.ie6 div#title {
left: 305px;
}
If you have to make browser specific Javascript adjustments only browser detects will suffice. We already covered Safari. For Internet explorer you can write:
Jquery:
if ($.browser.msie) {
// js goes here for internet explorer
}
Mootools:
if (window.ie) {
// js goes here for internet explorer
}
Luckily, Safari and internet explorer styling adjustments are often similar. Having already adjusted IE to match Firefox, I usually need to apply similar Safari rules to the same trouble elements.
For example,
.ie div#rightNav,
.safari div#rightNav {
top: -3px;
}
#1 by Pau Garcia i Quiles on May 22, 2008 - 2:11 am
No need to write your own browser detection routines in Javascript, just use jsbrwsniff. It’s free, open source and there are thousands of sites and products already using it (for example, Zimbra and Vyatta)
#2 by Rodney Reid on May 22, 2008 - 10:27 pm
You can detect a lot of bots pretending to be real users this way too…. Along with little [script][/script] snippets that try to run javascript 3.0, etc.
#3 by Jonah Dempcy on May 25, 2008 - 2:09 pm
Although Alex explores using JavaScript libraries to detect browsers later in the article, the initial technique demonstrated does not rely on JavaScript.
Hence, it allows the user to detect browsers entirely through HTML/CSS, thus ensuring compatible CSS layouts even for non-JS-enabled browsers.
#4 by Jonah Dempcy on June 23, 2008 - 12:59 pm
Note that if (window.ie) will only work in MooTools 1.11 (and possibly earlier versions). In MooTools 1.2 they changed this to the Browser object and also changed it to the name of the rendering engine rather than the browser name (trident instead of IE, gecko instead of Firefox).
So, instead of checking if (window.ie) you would want to check if (Browser.Engines.trident) …See docs.mootools.net/Core/Browser for more info.
#5 by Jonah Dempcy on June 23, 2008 - 1:00 pm
Typo in the previous comment:
// Incorrect
if (Browser.Engines.trident)
// Correct
if (Browser.Engine.trident)
#6 by Jim Newman on July 1, 2008 - 11:53 am
Alex’s ie fix for css worked fine for divs but not for class elements. Any solution?
Jim
#7 by pamvanlonden on September 10, 2008 - 9:09 am
I’m adding this to the head section of a wordpress header file:
bracket script type=”text/javascript” bracket
if ($.browser.safari) {
$(“body”).addClass(“safari”);
}
bracket/script bracket
but am not seeing it render when I check source in Safari.
Am I missing something?
#8 by electromozzo on July 25, 2009 - 10:56 am
Nice site. go to my favorites. TNx
#9 by MishaPowerauto on July 28, 2009 - 1:16 pm
Good to see you’re doing some research to fill in the ???
wordpress.thetruetribe.com – cool!!!!
#10 by LenaShopogolik on August 5, 2009 - 10:59 am
I might change for the look kind of sexy for a Linux distro.