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…

Example user agent string sent from a web browser during an HTTP request:
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.89 Safari/532.5

The above example, for instance, provides information such as browser and browser version, user locale (language), OS, system architecture and the layout engine used. When authoring documents for the Web, information from the user agent string can be valuable in determining how best to mark-up documents.

Getting the information is easy.

Collecting user agent strings

Two methods for accessing the user agent string include:

1. From the HTTP request header’s User-Agent field; and
2. Using DOM and JavaScript.

Reading from the User-Agent field

A benefit of using the HTTP header to gather data is simplicity of design.

HTTP request header showing the User-Agent field (in bold):

GET / HTTP/1.1
Host: livehttpheaders.mozdev.org
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.89 Safari/532.5
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

Using the HTTP header the user agent is transmitted directly to the HTTP server on page request, making it possible for servers to output the user agent string to a log file for later analysis. The user agent string alone provides enough information to implement on websites valuable browser support strategies such as graded browser support.

User agent retrieval using DOM and JavaScript

Using DOM and JavaScript, on the other hand, add additional development complexity, but provide more detailed and valuable analytic data, in addition to the user agent string alone. Tools like Urchin (now Google Analytics) utilize JavaScript and the DOM to gather analytic data about visitors.

Bookmark the following link to create a bookmarklet that will retrieve the user agent from a browser: javascript:alert(navigator.userAgent).

Regardless of the collection approach used, methods for extracting data from the string remain similar.

Data extraction methods

Once the user agent string(s) are collected, data extraction may take place. Two methods for reading and extracting information from the user agent string include brute force and pattern recognition:

• Under the brute force approach the user agent string is compared programmatically to a database of known strings. Though it offers a relatively simple implementation, the brute force approach can be difficult to maintain and becomes increasingly inefficient as comparison data sets grow larger.
• Thanks to RFC 2616 and preceding RFCs, and de facto standards for formatting user agent strings, another method known as pattern recognition is possible. Using pattern recognition the user agent string is broken into its component pieces and heuristics applied to gather information. Though more complex to implement than the brute force approach, pattern recognition does not suffer from the same problems in efficiency and maintainability in the long-run.

Due to its drawbacks in the application of extracting data form user agent strings, the brute force approach will not be discussed further in this article.

Pattern recognition on the user agent string

Check out Identify User Agent by string format recognition for an example of user agent pattern recognition. Though a little outdated, the article provides additional depth, in addition to some useful programming techniques and lax copyright restrictions.

User agent spoofing

Impersonating browsers and mobile devices is simple with Firefox. Just download User Agent Switcher plug-in and put it to the test at useragentstring.com. See Web Development and Debugging Tools for a list of tools useful for front end development.

Screenshot of a Lightview modal dialog

Though modal dialogs are not a new concept in UI design, the number of homegrown Lightbox clones appearing on the Web since major JavaScript libraries like Prototype and jQuery hit the scene has been staggering. Unfortunately, many of the clones developed leave some key usability considerations unaddressed, and struggle with common problems in accessibility. Some key usability features that should be considered during creation of a Web-based modal dialog include (1) manage focus and allow tab navigation (2) disable elements outside the modal dialog (3) give users an out and (4) provide graceful error recovery.

Manage focus and allow tab navigation

Guide the user experience by managing focusable page elements using JavaScript.

• Tabbing should allow the user to navigate back to the browser’s location bar and other tabbable toolbars.
• When the modal dialog is shown, the user should not be able to tab to document content outside the dialog content area.
• When the dialog is hidden, focus should be restored to the initial element used to activate the modal dialog, the original tab ordering should be restored and the user should no longer be able to tab to content inside the modal dialog.

Disable elements outside the dialog

Guide user interaction with page elements outside of the modal dialog and keep focus in the lightbox window.

• Display a translucent overlay above the page while the dialog is shown, giving the perception of modality while maintaining frame of reference to existing page content.
• Prevent interaction with elements outside the modal dialog using script to do the following:
  • Save and then temporarily set a new tab order for all applicable elements;
  • Save and then temporarily set the disabled flag on all applicable elements; and
  • Save and then temporarily update applicable hyperlink click handlers to return false.

Give users an easy way out

Give users the ability to exit unwanted modal dialogs without thinking much about it.

• Use a graphical [x] link the user can click to initiate the hide method. In addition, consider using the graphic as a background image for a text-based link (e.g. “Close”) to help improve comprehensibility slightly for both sighted and non-sighted users while maintaining application scalability with a single link implementation.
• While the dialog is displayed, listen for the [Esc] key. If it is pressed, exit the modal dialog and restore the previous display state.
• If the Lightbox was activated by the user, make the close link the next focusable element in the tab order.

Provide graceful error recovery

Script display methods (e.g. hide/show) should listen for script errors and, upon error, close the modal dialog and restore previous settings–including any previously focused element. Utilize the try/catch block to make it happen, but beware that suppressed errors increases debugging complexity.

Related articles

See also Roger Johansson’s Lightboxes and keyboard accessibility for additional considerations in improving Lightbox usability, with a focus on keyboard accessibility.

Recommended scripts

• ColorBox — A light-weight, customizable lightbox plugin for jQuery
• Lightview — Lightview was built to change the way you overlay content on a website

Tools for Firefox

Build for standards.

Firebug > *

• 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.
• 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.
• User Agent Switcher to spoof user agent strings for browser support testing.
• 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.

Other tools

Polish it to a bright shine.

• 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.