Identification

Look for IE-only display issues (outside the norm) when CSS files contain many style rules. Rules near the bottom of the stylesheet will not be applied. The issue can be confirmed with the IE dev toolbar. To do so use dev toolbar to save off the CSS file downloaded from the web server, and then scroll to the bottom of the CSS tab in the toolbar (assumes IE8 dev tools). Compare the last style rule displayed in the tab with the last rule in the actual file itself. If they do not match, and the CSS is valid, the limit has been reached.

Solution

Reduce the number of CSS selectors per file to a number less than 4096. Several approaches for doing so include:

• Refactoring existing CSS
• Splitting the CSS payload into multiple files
• Reevaluating current browser support strategy (wink, wink)

If the stylesheet under scrutiny contains IE-only hacks interspersed with standards compliant CSS, consider moving the hacks into a separate file and using Conditional Comments to pull them in. Otherwise, the best option may be to split the CSS payload into multiple files–resulting in an extra HTTP request for all browsers, not just IE. Reevaluating browser support is another option, but probably not feasible for large-scale applications.

Regardless of which approach is taken, something will need to be done for IE once the per-file limit is reached. Though 4095 selectors ought to be enough for anybody…

Tools for Firefox and Chrome

Build for standards.

• Chrome includes a powerful set of development tools out of the box, including remote debugging.
• Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse.
• HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla.
• Web Developer adds a menu and a toolbar with various web developer tools.
• IE Tab, an extension from Taiwan, embeds Internet Explorer in a Mozilla/Firefox tab. Handy but doesn’t work on a Mac.
• ColorZilla provides Advanced Eyedropper, Color Picker, Palette Viewer and other colorful goodies for your Firefox.
• YSlow analyzes web pages and tells you why they’re slow.
• HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers.
• MultiFirefox is a small launcher utility that allows you to run multiple versions of Firefox side-by-side (Mac only).
• User Agent Switcher to spoof user agent strings for browser support testing.
• Fangs renders a text version of a web page similar to how a screen reader would read it.
• Google Toolbar to visualize Page Rank.

Tools for Internet Explorer

Ensure application compatibility.

• Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages. It also allows for the inspection of the MSIE-specific CSS passed in through the use of Conditional Comments.
• A look-alike is just that, not the real thing. Here are the Internet Explorer Application Compatibility VPC Images, made available by Microsoft for use in testing browser compatibility with MSIE.
• HttpWatch is a tool for monitoring HTTP traffic in IE.

Performance & Testing

Polish it to a bright shine.

• JSLint helps in checking how bad your script sucks. Just copy/paste and pray.
• WebPagetest will help access how slow your site is once it’s built.
• Validator.nu (X)HTML5 Validator validates HTML5.
• HTML5 outliner provides an easy to use document outline.
• Selenium IDE for automated testing, helping unlock the potential for test-driven development in the UI layer.
• Paros is a simplistic proxy tool that allows you to trap raw HTTP request and response headers for analysis and testing.