The Simplest Way to Create a Cross Browser Compatiable Website

By Atif Tuesday April 14, 2009

stress Making your website cross browser compatible is not easy isn’t it ? Of course all the hard work can make it possible but many designers give up half way the cross browser compatibility for a Valid Markup. (Sometimes I used to do it too until I found this thing)

There exists some layouts where you have to either compromise either with the cross browser compatibility or with the Valid Markup, like using CSS or HTML hacks can no doubt make your layout cross browser compatible but you will lose the Green Valid XHTML badge. But in this scenario we are going to achieve both the goals.

One way of doing this will be creating different stylesheets for each browser and selecting the one required for the browser dynamically by finding out User Agent using Javascript. This is a good one if your layout renders very different in each browser. But if you just need to render some element differently in each browser then this thing is for you.

Thanks to Rafael Lima there is a small javascript snippet called CSS Browser Selector, which empowers CSS Selectors, if you know CSS you already know selectors. This script gives you the ability to write browser specific CSS Code. Now you don’t need to attach a different stylesheet for each browser. Just use the proper selector for each browser and you get what you need. This is very simple to use. You need to attach a javascript to your web page. You can download the script from here Just save it on your hard disk and attach it to your HTML page in between the <HEAD></HEAD> tags.

Not just the browsers but this scripts support CSS Selectors based on Operating System and also based on if the javascript is enabled or not.

Styling the elements is very simple, all you need to do is add a browser specific css selector to style it as the way you want. See the example below

.ie7 .example {
  background-color: orange
}
.ff .example {
  background-color: gray
}
.win.ff .example {
  background-color: red
}
.linux.ff .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.chrome .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}

The element with class example will have different color in each browser. For a whole list of tags supported you can see here

Thanks to Christian Felder for the image

2 Comments

masone on Tuesday 14, 2009

Neat idea but I don’t see any benefit of choosing this method over conditional comments in the HTML.

The downside is that it only works with Javascript activated. If anyone thinks that this would be okay because 98% of the browsers have Javascript activated has not understood the basic rules of the internet from my point of view.
Moreover I think that you will get heavily in trouble if the stylesheet gets coplex because of the specific selectors.

My recommendation would be to use conditional comments.
Atif on Tuesday 14, 2009

hi masone, this might not be a good idea for pro developers but I think it is a good solution for all the amateur or newbie web developers, because optimizing a website for IE 6 can be a great hassle. The plus point here is that they would be able to maintain both compatibility as well as the w3c valid markup.