Cross Browser CSS Techniques

When it comes to Web Design, having a great look is key, but getting it to work in all browsers is even more key. Unfortunately, as much as some of us would love, the world doesn’t run on a single browser. And even more unfortunate is that all those browsers don’t work and handle client side operations the same.

CSS was originally developed in the 1970′s for other programing languages (most notably: SGML). When HTML first showed up at the birth of the web, CSS was not used initially. Any design was hard coded into the html. Eventually, the use for CSS was realized, and implemented in a need to separate content from presentation.

So why is there such huge differences in CSS rendering between browsers? Different browsers simply render CSS differently as a result of browser bugs or lack of support. For example, the dreaded Internet Explorer 6.0 implemented many CSS 2.0 properties on a system that was meant for 1.0 rules. As much as we hate Internet Explorer 6 for it’s CSS shortcomings, it didn’t have the luxury of starting when CSS 2.0 was the norm, being that it was released in 2001.

Modern browsers who don’t have 100% compliance… shame on you! You have no excuse!

What follows is a few useful pointers to keep in mind when developing a website.

For starters, when starting any site, it’s always best to clear out the default attributes on elements. Why? Because each broswer defaults are different, and if you reset them all, you can avoid having to create conditional statements for different browsers later down the road.

A good example is Internet Explorer renders paragraph )<p>) elements with 10 pixel margins, whereas Firefox uses 5 pixels.

Here a good script to clear out all the defaults:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

* {
  margin:0;
  padding:0;
}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {
  font-size:1em;
  font-weight:normal;
  font-style:normal;
}
ul,ol {
  list-style:none;
}
fieldset,img,hr {
  border:none;
}
caption,th {
  text-align:left;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
td {
  vertical-align:top;
}

This clears out all the defaults so then you can set them and they’re render the same on each browser then. Sometimes, just clear out out the padding and margin will do just fine, but if you plan on using any of the element specified above, I’d suggest resetting their values.

One thing you’ll eventually start using is separate CSS files to fix Internet Explorer issues. Using condition statements that are only recognized by Internet Explorer, you can target Internet Explorer users and even specific versions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!--[if IE 5]> // IE 5
<link rel='stylesheet'  href={link}' type='text/css' />
<![endif]-->
 
<!--[if !IE 5]> // Not IE 5
<link rel='stylesheet'  href={link}' type='text/css' />
<![endif]-->
 
<!--[if lt IE 7]> // IE before 7
<link rel='stylesheet'  href={link}' type='text/css' />
<![endif]-->
 
<!--[if gte IE 6]> // IE 6 or later
<link rel='stylesheet'  href={link}' type='text/css' />
<![endif]-->
 
<!--[if lte IE 7]> // IE 7 or before
<link rel='stylesheet'  href={link}' type='text/css' />
<![endif]-->

The basic structer is simple:

• lt is less than
• lte is less than or equal to
• gt is greater than
• gte is greater than or equal to

A good thing to get accustom with the CSS hacks targeting specific browsers, more specifically, Internet Explorer. Simply appending a * in front of the attribute name will affect only Internet Explorer.

1
2
3
4
5
6

div {
  width:200px; /* All browsers */
  *width:250px; /* Target all Internet Explorer versions */
  _width:300px; /* IE 6 */
  .width:200px; /* IE 7 */
}

Why use this way as oppose to using the previously mentioned conditional statement? You might not want to create a whole separate style sheet if you only need to fix a few elements for Internet Explorer. So this method is convenient for that.

What about the other broswers? There are hacks to target other browsers as well:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* Opera */
@media all and (min-width: 0px){
  div {
    width:210px;
  }
}
/* Safari */
html:lang(en)>body div {
  width:215px;
}
/* Chrome */
body:nth-of-type(1) div{
   width:225px;
}

There are just a few tips to keep in mind when developing website. They can save you a lot to time if you implement these as you develop. Eventually, it will just become part of your development.

:)