Of course, Firefox slowly gaining in this competition, but still IE still dominates if we are talking about global usage. For many people internet still associates with the little blue e and maybe such tendency remains to be true for next generations.

The other war is all about the future of the browsers and this time the main heroes are developers and communities. With the help of web development community Firefox has such market share today. So, let’s be aware of the responsibility we have in this fight.

IE – the Story of Success?

Old times were simple. We have IE6 that ruined all our masterpieces in web development. So, any alternative to this appreciated greatly. With our sites look amazing in all other browsers except this, IE Microsoft got a bad reputation in the web development world.

Of course, Microsoft had interest in our problems but perhaps, its reaction was too slow. Thus, instead of good browser we had great ideas. Anyway we were able to fix the crap in IE6 with a separate CSS file. With conditional CSS files you can provide less than perfect software.

Some time passed and we got IE7. It was the time when IE6 lost its war and gained awful reputation. However, to be honest, a decent CSS professional could work around most bugs rather quickly. But that time we had IE7 that was a great improvement to IE6. Of course, it can’t be called perfect, but still some bugs disappear.

Today to make site for IE7 is as simple as for other browsers. Still we have a separate file with conditional comments, but Firefox, Safari and Opera also have their own drawbacks.

Not so long ago, IE8 was announced. It passed the acid2 test and positioned itself next to Opera leaving Safari and Firefox behind. We really can influence improvement in the browser situation – as it happened due to our criticism on IE6. However, there should be too many complaints to ditch Microsoft. But still they provided us with a browser that can really compete with its rivals.

Reference: www.onderhond.com/blog/work/the-browser-wars

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.

Mad with CSS?

Today there are no problems concerning a lack of browser support for CSS because ‘version 5′ browsers began to offer a full implementation of CSS. The problem is in interpreting CSS commands in different ways that is a usual thing for browsers. With such tricks appeared, many web developers prefer to switch back to pixel-perfect table layouts. But wait! Just learn more about CSS and different browser interpretations stop to be a mystery for you. What is more, there are not so many of them and using various hacks makes you life easier.

How CSS Hacks Turn ‘Mad With’ Into ‘Mad About’

CSS hacks work by sending one CSS rule to the browser or several browsers for your choice and the second CSS rule that overrides the first command to the other browsers. In case you have two CSS rules within the same selectors, the second CSS rule will almost always take priority.

For example, you need the space between a page’s header area and content to 25px in Internet Explorer. It may be great for Internet Explorer, but for Opera, Safari and Firefox this gap is not appropriate and you want to make a 10px gap instead. Here are two CSS rules that help you to perform the best in all browsers:

#header {margin-bottom:25px}
#header {margin-bottom:10px}

In this case the first command is for IE while the second is for all other browsers. However, there is no good news by now, because all browsers can understand both CSS rules. In other words, they all use the second rule, because it comes after the first.

And now a CSS hack should be inserted to hide the second CSS rule from IE. In such a way, IE won’t know that the rule exists and just will use the first CSS rule. Seems to be quite simple? Let’s find out the details.

Browser Detection for Internet Explorer

If you need to send different CSS rules to IE, you can use the child selector command that IE can’t understand. This command consists of two elements one of which is the child of another. Thus, html>body refers to the child body with parent html.

Here is the example of the header margin that illustrates our CSS command:

#header {margin-bottom:3em}
html>body #header {margin-bottom:1em}

Because of the html>body CSS command, IE can’t understand the second CSS rule and ignore it using the first rule. All other browsers will use the second rule.

Browser Detection for Internet Explorer 5

IE5 requires different CSS rules because of its misinterpretation of the box model. For example, padding and borders are not included when we specify the width of some element in CSS. IE5 incorporates them both into the width value and, as a result, elements widths are smaller in this browser.

Here is the CSS rule that results in a width of 10em for all browsers except IE5 where the width will be 5em. IE5 just incorporate two sets of padding and border, on both the left and right, when calculating the width with the following rule:

#header {padding: 2em; border: 0.5em; width: 10em}

You can solve this problem using box model hack invented by famous Tantek Çelik. For browser detection and sending different CSS rule to IE5 you should use the following:

#header {padding: 2em; border: 0.5em; width: 15em;
voice-family: “\”}\”"; voice-family:inherit; width: 10em}

Don’t ask how it works. Just use it. Need details? IE5 will use the first width value of 15em. As we have mentioned above, 5em of it will be taken up by two sets of padding and border (for the left and for the right). That will cause the width of 10em in IE5.

The 15em value will be overridden by the second value of 10em by all other browsers except IE5, because it can’t understand the CSS command that comes immediately after all those squiggles.

However, nothing is perfect and the box model hack is not an exception to this rule. For example, it can ‘kill’ the next CSS rule in IE5. But there are a lot of other box model hacks that can help you.

Browser Detection for Internet Explorer on the Mac

IE on the Mac is also quite capricious with CSS. Thus, many developers code sites in such a way that they work in IE/Mac. Of course, it may not offer the same level of design or functionality that is offered with other platform or browser, but still it is a good solution.

To hide a command with IE/Mac hack is quite simple. Just wrap a set of stars and dashes around CSS rules:

/* Hide from IE-Mac \*/
#header {margin-bottom:3em}
#footer {margin-top:1.5em}
/* End hide */

These commands will be ignored by IE/Mac. Such CSS hack is rather useful if some area of the site doesn’t work properly in IE/Mac. If it is something unimportant you can hide it from IE/Mac just like this:

#noiemac {display: none}

/* Hide from IE-Mac \*/
#noiemac {display: block}
/* End hide */

The first CSS rule hides the entire section assigned the noiemac id. The second CSS rule displays this section (can’t b seen by IE/Mac)

Browser Detection for Netscape 4

Netscape 4 has limited support for CSS. Thus, making a CSS layout for this browser can be quite a difficult task. Today most web developers prefer to hide the CSS file from this browser. You can do this with the @import directive to call up the CSS document:

@import url(cssfile.css);

Thus, Netscape 4 can’t understand this @import directive and will display a non-styled version of the site.

Make Sure to Check Your Site in the Different Browsers

This is a must. Just download the major browsers such as Firefox, IE5, IE6, Opera and Safari and check your site on PC and Mac. There are quite a lot of sites offering you their services in case you don’t have access to a Mac, so search for them.

The other main rule in case certain page elements appear differently in different browsers is stop worrying… and start making some trial-and-error changes playing with CSS rules. Anyway, you can fix it up with CSS hacks that always ready to help you make your site look great.

To remember all the CSS hacks seem to be impossible so I decide to create such a list that can be of use for you too.

So, let’s start.

CSS for Internet Explorer:

/* for all versions */
.class { *color: #8abdce; }

/* for Internet Explorer 6 */
.class { _color: #8abdce; }
or
.class { -color: #8abdce; }

/* /* for Internet Explorer 7 */
*+html .class { color: #8abdce; }

/* for Internet Explorer 7 */
*:first-child+html .class { color: #8abdce; }

/* for Internet Explorer 7 */
html>body .class {
*background: #F00;
}

/* for Internet Explorer 8 */
.ie8only { color /*\**/: #fff\9 }

CSS Hacks for Opera:

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;}
}

html:first-child .class { color: #8abdce; }

*|html[xmlns*=""] .style {
background: #F00;
}

CSS Hacks for Firefox:

html:root .class { color: #8abdce; } /* this also works for Safari */

.class, x:-moz-any-link { color: #368EF1; }

@-moz-document url-prefix() {
.style {color: #F00;}
}

/* for FireFox 1-2 */
@-moz-document url-prefix() {
color: #F00;
}

CSS Hacks for Safari:

html[xmlns*=""] body:last-child .class { color: #368EF1; }

CSS Hacks for Safari and Google Chrome:

body:last-child:not(:root:root) .style {
color: #F00;
}

body:nth-of-type(1) p {
color: #333333;
}

Of course, hacks are evil, but sometimes they help to solve the problems.