Uncle Jim's Web Designs and Tutorials
Site Development Optimization
Writing Cascading Style Sheets
Author: Jim Stiles
Cross Browser Style Sheet Issues:
One of the greatest issues for designers using Cascading Style Sheets is lack of functionality due to cross-browser incompatibility. Nothing ticks off designers more than finally completing their web design, then finding out it looks great in Internet Explorer and Opera, but looks terrible in a Mozilla browser and completely breaks up in Netscape. The biggest mistake a web designer or developer using CSS can make is to design for only one browser. In this article, I will discuss some methods for circumventing these issues.
Understanding Browser Differences:
There are many "minor" browsers, such as Mozillas Camino for Mac, Konqueror, and many more that do support CSS 2.1. Mainly because they are based on the technologies of the major browsers. There will always be browsers that do not fully or even partially support CSS 2.1, like text-based Lynx and older browsers and obviously, there wont be any work-arounds for those browsers.
Mozilla and Firefox
Mozilla-based browsers, such as FireFox use what is known as the open-source Gecko browser engine, which were the earliest browsers to support CSS fairly well and are, for the most part, standards compliant.
Safari for Mac
Safari is an OS X browser using a variant of Konqueror's KHTML browser engine. Apple supposedly chose to base Safari on KHTML instead of Gecko due to the thin, clean code. This browser behaves roughly in the same manner as Mozilla, after some minor rendering tweaks are made.
Opera Software makes the Opera browser for many operating systems, including embedded systems, and is renowned as a browser that is multi-platform, quick, small, and standards-compliant. Opera fully supports valid CSS 2.1.
Netscape 6 and up
Internet Explorer 5 and up
There was such a huge improvement in CSS support for Internet Explorer when Microsoft updated IE3 to IE4 that to date, it is still the largest browser upgrade for IE. The newer versions of IE have several known issues, of which many were solved in version 6 for Windows and 5.5 for Mac. Because IE 5 is still one of the most popular browser versions available, much consideration must be made in regard to style sheet compatability.
How to Handle the Differences
One thing you can do to help Internet Explorer truly do what you want it to do instead of "figuring it out for you" is to put your web page for IE into quirks mode. Quirks mode is a rendering mode where a browser tries to handle sloppy code in the way that they did a decade ago. In quirks mode, the browser will mirror earlier browser versions and render them exactly the same as they used to.
The problem with this is that if you put your page into quirks mode for IE or older browsers, then youre putting the page into quirks mode for other browsers as well. Therefore, you have to use a trigger that will switch between strict mode and quirks mode depending upon the type of browser that is detected. This is referred to as "doctype switching", which is supported by all 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. A doctype normally looks like this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
The other mode that modern browsers recognize is strict mode. Your page does not have to validate according to the chosen doctype; the mere presence of the doctype is enough to trigger strict mode. There is one exception to this rule: in IE 6, if a doctype that triggers strict mode is preceded by an xml prologue, the page displays in quirks mode. It looks like this:<?xml version="1.0" encoding="iso-8859-1"?>
This was done to allow CSS coders to achieve valid pages which require a doctype, but still wished their pages to render in quirks mode. Older browsers completely ignore this tag as well as doctype switching, and operate in quirks mode no matter what.
Testing your CSS compatability:
The following link is provided for testing your browser for CSS-1 compatability:
What are CSS hacks:
CSS Hacks are small bits of style coding that were made to either effect specific browsers or to ensure specific browsers were not effected by the rest of the style coding.
Why are CSS hacks used:
Due to modern browsers inherent lack of support for CSS standards, a number of techniques have been created in order to hide CSS stylesheets, rules, and declarations from browsers that misunderstand or mis-interpret them. They are also used to set special values to the existing CSS property in different browsers so as to acheive the same appearance on all of the most popular browsers.
What are the dangers of CSS hacks:
Make no mistake, CSS hacks can be very dangerous for your web site. If you use a hack to by-pass one bug and not all of them, then you are just asking for trouble.
Other Articles and Tutorials by Jim Stiles:Introduction to Cascading Style Sheets
Validating Your Website
Securing Your Website
Introduction to Dynamic HTML
Microsoft Office Application Tutorials
Introduction to Computer Maintenance
Computer and Browser Security
Understanding Computer Viruses
Home Network Security
Web Site Security Vulnerabilities
Fighting Email Spammers
Fighting Forum Spammers