JavaScript
Managing Cross Browser issues with JS browser detects & Conditional Comments
Last Updated (Monday, 20 October 2008 08:21) Written by Alex Grande Tuesday, 02 September 2008 00:39
JavaScript - JavaScript Design Patterns
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>
$("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> <![endif]--> <!--[if IE 6]> <div> <![endif]--> <!--[if IE 7]> <div> <![endif]-->Results:
IE5+ gets <div>
IE6 gets <div>
IE7 gets <div>
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; }
| < Prev | Next > |
|---|