WIth so many browsers out there, it can get very challenging to test CSS across all the different ones. Fixing a layout problem in one can end up causing errors in another. Anyone who has spent anytime doing any CSS work knows that this can be a bear of a task to handle.
Over the years browsers have become increasingly standardized with some key exceptions to the rule. In order to accommodate for these variants we’ve set up a standard process to check for browser compatibility. Right out of the gates we’ll identify, with our client, the necessary browser targets for a given project. This usually runs the typical gamut unless there is something unique about the project that explicitly requires additional browsers and devices.
One key thing to note – we will set up HTML code and content beforehand so that content is laid out correctly. We will rarely begin integrating CSS until we’ve identified and setup all elements on the page.
From Newest to Oldest
Fortunately the above rule about standardization has been pretty consistent. The groups pushing the latest browsers have worked very hard to meet the standards set forth by the W3C and development community. This makes it the best place for us to start since it will help us insure that our CSS is setup to meet those standards. Once we have met the proper display requirements in these newer browsers we’ll continue through the older versions until we reach our minimum requirement.
Our first step is to select a specific browser in which to develop. This will typically be Firefox 3, or Safari 3/4. With the recent launch of Internet Explorer 8, this browser also becomes a viable option, but since our production environment is run primarily on Macs, it’s easier for us to pick one of the cross-platform browsers over Internet Explorer.
After layout, styles and sprite functionality display correctly in the latest browsers we continue down to our next tier. This tier is usually closely related to the above tier in that they use similar browser frameworks, but we run tests nonetheless to guarantee consistency. This next tier usually consists of Google Chrome, Firefox 2, and Opera.
The first two tiers will typically consist of small rendering issues – independent browser correction of CSS mistakes; incorrect style declaration that gets too browser specific, or something else similar. From here we’ll move down into Internet Explorer 7. While IE 7 showed significant improvements over it’s predecessor it still contains several CSS rendering problems. For this reason we will address IE 7 in a separate tier. Corrections made at this level will usually live in a separate CSS file that overrides previous declarations. To avoid any conflicts we’ll incorporate this new CSS file using IE conditionals that check for IE 7.
After all the above browsers have been addressed, we’ll move to IE 6, which is commonly known for it’s severe problems with rendering standards-based CSS. Following the same method taken for IE 7, we’ll finally include a conditional for IE 6 browsers that address the specific problems inherent with this browser.
Browser Version Testing Order
To review, we would go through browsers in the following order to address cross-browser CSS:
- Tier 1: Safari 3/4, Firefox 3, Internet Explorer 8
- Tier 2: Safari 3, Firefox 2, Opera
- Tier 3: Internet Explorer 7
- Tier 4: Internet Explorer 6
This approach has proven to cut down significant amounts of development time because we will have:
- avoided using potentially harmful hacks in our core CSS,
- created clean standard-based code at the top level,
- progressively corrected any issues as moved forward with development without the need having to move back up the version ladder
Of course, other browsers can be added to or removed from your list, but the idea is to move down the chain so that you avoid including erroneous code in your more standards compliant browsers.