blog.thelemur.com

Testing CSS has been a hurdle for many web developers and their HTML-based projects. This article contains a proposed workflow for fixing CSS discrepancies found during CSS testing.

What is a Browser Testing Suite?

A browser testing suite captures screenshots of web pages as they appear in different browsers and different operating systems. Visit this site to see a list of available browser testing suites. I use browsershots because of its price point (free).

Testing Procedures

1. Start with an HTML-based page
2. Create two standards compliant CSS files:
   • css/screen/layout.css
   • css/screen/site.css
3. Include the default layout and site CSS files in the HTML header
4. Test your work with a browser testing suite
5. If there are display differences between browser versions following the steps outlined below

Fixing CSS for a Specific Browser

IE6 is the culprit in the following example:

1. Duplicate the compliant layout CSS file and rename it layout_IE6.css
2. Modify the layout_IE6.css files for IE6 compatibility
3. Use a scripting language to inject the IE6 links after the standards compliant links. Refer to this post for details
4. Test your changes with a browser testing suite. You’ll only need to run tests for IE6
5. Don’t delete unchanged styles from the IE6 CSS file

References

• http://www.smashingmagazine.com/2007/10/02/
  browser-tests-services-and-compatibility-test-suites/
• http://www.melbournechapter.net/wordpress/web-accessibility/
  cman/2006/05/12/css-ie-hacks-recommendations/

Tags: CSS, Testing

This entry was posted on Thursday, June 26th, 2008 at 10:15 pm and is filed under Development Procedures. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.