The Basics of Cross Browser Compatibility and CSS Hacks Usage

Cross browser compatibility is one of the problematic issues of CSS (Cascading Style Sheets). The things that look perfect in Mozilla browsers can be terrible in Internet Explorer as well as just break in Netscape. Of course, the largest group of viewers use IE, but still web developers should take into consideration the flaws of IE design for all other browsers as well.

Browsers – The Main Differences

It is necessary for a good CSS developer to be familiar with the individual browsers and know what CSS versions and levels of compliancy they support. Knowing why they do what they do is a crucial part. Of course, you may not know all the ins and outs of the browsers. Your task is to understand the vast majority of differences among them.

Here you can find some principles concerning each browser that help you a lot. The browsers that will be explained are Mozilla and Firefox, Safari, Internet Explorer 5+ for Windows and Mac, Opera and Netscape 6+.

There are quite a lot of other browsers such as Mozilla’s browser project Camino for Mac, Konqueror or Maxthon. In short, there are really too many of them to cover in this post. The other thing is that most of them are based on the same technologies as the browsers we have mentioned above. Thus, Maxthon is based on IE; and if it works on Firefox, it’s very likely going to work on Mozilla and Camino.

Mozilla and Firefox

The Mozilla Group offers you the open-source Gecko browser engine that is used by the Mozilla browser suite as well as by a diverse range of products. It should be noted that Gecko is highly standards-compliant. It is supported by many platforms. Firefox is a Mozilla browser. Such Mozilla based browsers like Firefox are considered to be the earliest browsers that support CSS quite well.

Safari for Mac

Safari is an OS X browser that uses a variant of Konqueror’s KHTML browser engine. There are three reasons why Apple chose to base Safari on KHTML instead of Gecko: KHTML was faster, KHTML’s source code is smaller and cleaner, and Apple doesn’t need Gecko’s multi-platform support. On the whole, this browser behaves like Mozilla.

Opera

Made by Opera Software, the Opera browser can work with various operating systems including embedded systems. Opera is well known as fast, small and standards-compliant browser that is available on many platforms. It fully supports CSS 2.1, so your validated CSS will render properly in Opera with the strict doctype as well as in quirks mode.

Netscape 6 and up

In comparison with other browsers Netscape 6 has the best CSS support on the web. Only Mozilla browsers can be proud of fewer bugs. On the whole, Netscape is rather similar to Mozilla browsers and even tries to introduce a different type of style sheet in JavaScript in order to avoid CSS compliancy altogether.

Internet Explorer 5 and up

With the huge improvement in CSS support for Internet Explorer when Microsoft updated IE3 to IE4, as well as with newer versions of IE problems that have been solved in version 6 for Windows and 5.5 for Mac, IE remains to be quite buggy. For example, IE6 for Windows doubles margins of floated elements or duplicate text in multiple floats as well. All these issues can’t be covered within one article, so let’s try to find out the things that make different with regards to CSS compatibility.

Why are these browsers so different? The answer on this question is quite simple. There are no standards adopted by all the browser vendors. Thus, you need some practice and skill to make your site look the same across all the browsers.

The other important thing to consider is that Internet Explorer is used by almost 70% of people, while only about 30% use non-Microsoft browsers. Thus, among newest browsers IE provides you with the biggest problems with regards to compatibility. The main problem with IE is that is tries to assume what to do, instead of following your CSS instructions. It also doesn’t support many CSS standards that Mozilla and Netscape browsers do.

Make Them Perfect for Your Page

Putting your web page for IE into quirks mode can help you to make IE do what you need. Quirks mode is a rendering mode where a browser tries to handle sloppy code in the way that they did in the mid- to late 90’s. This quirks mode allows the browser to imitate bugs in earlier browser versions so that they render the old, quirkily coded pages exactly the same as they used to.

However, if you put your page into quirks mode for IE you also do it for other browsers. Thus, you need to use a trigger that will switch between strict mode and quirks mode depending upon the type of browser. This is known as “doctype switching” and is supported by most modern browsers. According to the standards, any (X)HTML document should have a doctype which informs the browser of the version of (X)HTML the document is using. Here is the example of doctype:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Strict mode is also supported by modern browsers. To trigger strict mode the presence of the doctype is quite enough. In other words, your page doesn’t have to validate according to the chosen doctype. However, as any rule it has its exception. In IE6, the page displays in quirks mode if a doctype that triggers strict mode is preceded by an xml prologue:

<?xml version=”1.0″ encoding=”iso-8859-1″?>

Thus, CSS coders can achieve valid pages that require a doctype, but still want their pages to render in quirks mode. Note that older browsers ignore this tag and doctype switching. They operate in quirks mode anyway.

Another Solution to Try

Creating multiple style sheets for multiple browsers is another solution of cross-browser compatibility. You just need to use a JavaScript code to return the version and type of browser the web visitor is using. Design issues are the other thing to pay attention to and CSS hacks that can help you a lot.

The “html>body” selector is the first one to consider. It selects any body element that is a child of an HTML element. In order to interpret correctly, compliant browsers (except IE) need white space on either side of the child selector (html > body or html> body or html >body:

html>body { overflow: visible; } /* show to IE */
body { overflow: auto; } /* show to everyone else */

Here is the underscore hack, which allows you to show CSS only to IE excluding all other browsers:

body {
background: blue; /* show to Mozilla/Safari/Opera */
_background: red; /* show to IE */
}

This is quite useful if you need to give IE a set of separate instructions because something will appear wrong if you don’t.

However, this hack won’t work in IE5 for Mac. Thus, you need extra hack that is known as the Mac Backslash Hack. It allows IE5/Mac to ignore any CSS rules contained within the hack’s boundaries. Using a backslash before the asterisk: \*/ you hide the end-comment marker for IE5/Mac. In other words, IE5/Mac accepts anything which follows as a part of the comment while all other browsers understand and apply the following rules:

body {
background: blue; /* show to Mozilla/Safari/Opera */
_background: red; /* show to IE */
/* commented backslash hack for IE5-Mac \*/
background: green;
/* end hack */
}

As you see, CSS hacks can be rather complicated in case you don’t understand the bugs that the browsers have to begin with. Hope this info help you in some way.