Multiple Browser Coding Guidelines

The features of different Web browsers, such as CSS and JavaScript support, can cause Web applications to work differently from one browser to another. This lack of continuity among browsers not only causes an application to look bad, but it often causes it to break.

Acid3 Test

 Acid3 is a test from the Web Standards Project that checks how well a web browser follows certain selected elements from web standards, especially relating to the Document Object Model (DOM) and JavaScript.

 Acid3 test focuses on technologies used on modern, highly interactive websites characteristic of Web 2.0, such as ECMAScript, HTML 4.01 Strict, XHTML 1.0 Strict and DOM Level 2. It includes several elements from the CSS2 recommendation that were later removed in CSS2.1 but reintroduced in World Wide Web Consortium (W3C) CSS3 working drafts.

Layout Engine

Browser

Acid3 Score

Presto

Opera 10

100/100

WebKit

Safari 4.0

100/100

Chrome 4.0

100/100

Gecko

 

Firefox 3.5.7

93/100

Firefox 3.6

94/100

Firefox 3.7a2

97/100

Firefox 4.0

?/100

Trident

 

IE 6.0

12/100

IE 7.0

14/100

IE 8.0

20/100

IE 9.0

32/100

Acid3 Test Score Chart

 

Tool of Choice

 One can handle most of the browser issues by using hacks but hacks are dangerous. Since they are based on non-standard exploits, you can’t predict how they are going to behave in future browsers. The tool of choice for fighting these problems is the conditional Stylesheet and JavaScript. Browsers provide comment tags, to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.

Conditional Stylesheets and JavaScripts

 The core idea is based on the method of Conditional Comments found in Internet Explorer, extended to include other browsers, and to move the conditional statements inline with your CSS definitions.

Conditional-CSS isn’t really all that interested in which browser the user using, but rather what is rendering engine the user’s browser utilizes. This is why Conditional-CSS uses ‘Gecko’ rather than the well known Firefox as one of its browser conditions. Likewise for Safari ‘Webkit’ is used. This allows other browsers using the same rendering engines to receive the same targeted CSS. An exception to this rule is made for IE (rather than using ‘Trident’) since this is what the IE conditional comments use and Trident isn’t particularly well known. Similarly for Opera, since only the Opera browser uses it’s Presto rendering engine, ‘Opera’ is used.

How to go about it?

  1. Choose one of the standard conforming browsers (Acid3 score 100/100) like Chrome 4.0 or Opera 10 to create and test a standard compliant Stylesheets and JavaScripts common for all browsers.
  2. Create a separate Stylesheet and Javascripts for each of the browser versions you want to target e.g. IE and Firefox versions.
  3. Include the Stylesheets and JavaScripts from step 2 by using conditional comments. This overrides the statements in the common CSS and javaScript file created in step 1.

 <!--[if IE]> <style type="text/css">@import "IE-override.css";</style> <![endif]-->

 This CSS file is only loaded if the detected browser is IE, otherwise it won’t. You should put this conditional statement into the head of your html file after every other CSS import code. It should be the last in the list, so that it overwrites the main css files:

 Now if for example you had a statement in your main.css file: #logo { margin:10px } and it doesn’t work properly in IE, you can add the same statement with a different value in your IE-override.css file: #logo { margin:20px }.

 

The Conditional Comment Code Examples

 The syntax to note is “!” stand for “not”, so !IE means “not IE”. gt means “greater than”, gte means “greater than or equal”, lt means “less than”, lte means “less than or equal.”

Target ALL VERSIONS of IE

 <!–[if IE]>

            <link rel=”stylesheet” type=”text/css” href=”all-ie-only.css” />

<![endif]–>

 Target everything EXCEPT IE

 <!–[if !IE]>

            <link rel=”stylesheet” type=”text/css” href=”not-ie.css” />

<![endif]–>

 Target IE 7 ONLY

 <!–[if IE 7]>

            <link rel=”stylesheet” type=”text/css” href=”ie7.css”>

<![endif]–>

 Target IE 6 ONLY

 <!–[if IE 6]>

            <link rel=”stylesheet” type=”text/css” href=”ie6.css” />

<![endif]–>

 Target IE 6 and LOWER

 <!–[if lt IE 7]>

            <link rel=”stylesheet” type=”text/css” href=”ie6-and-down.css” />

<![endif]–>

 <!–[if lte IE 6]>

            <link rel=”stylesheet” type=”text/css” href=”ie6-and-down.css” />

<![endif]–>

 Target IE 7 and LOWER

 <!–[if lt IE 8]>

            <link rel=”stylesheet” type=”text/css” href=”ie7-and-down.css” />

<![endif]–>

 <!–[if lte IE 7]>

            <link rel=”stylesheet” type=”text/css” href=”ie7-and-down.css” />

<![endif]–>

 

Target IE 8 and LOWER

 <!–[if lt IE 9]>

            <link rel=”stylesheet” type=”text/css” href=”ie8-and-down.css” />

<![endif]–>

 <!–[if lte IE 8]>

            <link rel=”stylesheet” type=”text/css” href=”ie8-and-down.css” />

<![endif]–>

Target IE 6 and HIGHER

 <!–[if gt IE 5.5]>

            <link rel=”stylesheet” type=”text/css” href=”ie6-and-up.css” />

<![endif]–>

 <!–[if gte IE 6]>

            <link rel=”stylesheet” type=”text/css” href=”ie6-and-up.css” />

<![endif]–>

 Target IE 7 and HIGHER

 <!–[if gt IE 6]>

            <link rel=”stylesheet” type=”text/css” href=”ie7-and-up.css” />

<![endif]–>

 <!–[if gte IE 7]>

            <link rel=”stylesheet” type=”text/css” href=”ie7-and-up.css” />

<![endif]–>

 Target IE 8 and HIGHER

 <!–[if gt IE 7]>

            <link rel=”stylesheet” type=”text/css” href=”ie8-and-up.css” />

<![endif]–>

 <!–[if gte IE 8]>

            <link rel=”stylesheet” type=”text/css” href=”ie8-and-up.css” />

<![endif]–>

February 13, 2010 | Filed Under Browser | Leave a Comment 

Learn how to develop for Android, Beyond HelloWorld

Marko Gargenta delivers a tutorial-style talk on how to develop for Google’s Android platform (beyond the HelloWorld) at the San Francisco Android User Group.

February 6, 2010 | Filed Under Mobile | Leave a Comment 

Oracle OLAP Option

The Oracle 10g Enterprise Edition OLAP Option extends the analytic capabilities of the Oracle database by providing new multidimensional datatypes, a multidimensional calculation engine, and a framework to build OLAP applications using SQL, PL/SQL and Java. Uniquely, the OLAP Option uses the Oracle database to store and manage its data, allowing you to take advantage of the scalability, reliability and manageability of the Oracle 10g platform.

February 1, 2010 | Filed Under Database | Leave a Comment