This can be a nightmare to deal with, as you cannot ask all users of a web site to change their browser settings.

One workaround is to use a ‘cache buster’ parameter in your GET request. Something like this:

var urlToFetch = 'whatever.php?randNum=' + new Date().getTime();

This works very well, but can have drawbacks, depending on your server setup. For example, if your application server sits behind a caching layer, you wouldn’t want the URL to be different every time for idempotent requests, as the cached version would never get used, and so your application server would get a direct hit every time.

One way around this without using to parameters is to set the ‘Cache-Control’ response header to direct the browser how to cache the response.

The ‘Cache-Control’ header can have various values, one of which is ‘no-cache’. This tells the browser that it should not cache the response, so the next time the same URL is requested, new content will always be sent (as there is no previous version in the browser’s cache).

This is how we do it using Groovy:

response.addHeader "Cache-Control", "max-age=0,no-cache,no-store"

So really, which method you use boils down to this: If you know that the cache buster will have a performance hit on your setup, then don’t use it, otherwise use whichever method you prefer.

Also, as a developer, I can highly recommend changing your IE cache settings to ‘Every visit to the page’.

We’re finding that with some of our automated testing, IE 7 still caches the odd file now and then. To get around this, we have modified our ‘Cache-Control’ header to include two non-standard properties, ‘post-check’ and ‘pre-check’, and added an ‘Expires’ header as well:

response.addHeader "Cache-Control", "max-age=0,no-cache,no-store,post-check=0,pre-check=0";
response.addHeader "Expires", "Mon, 26 Jul 1997 05:00:00 GMT"

a { text-decoration:none; }
a:hover { text-decoration:underline; }

The above example sets all anchors to have no underline text decoration, and the hover pseudo-class sets all anchors to have an underline on them. When the user hovers their mouse over a link, an underline will show under the link. When they move their mouse away, the hover pseudo-class stops taking effect and the underline is removed.

Pseudo-classes are supported with all modern browsers, but this support is only for the anchor element. Any attempt to use a pseudo-class on any other element will not work in Internet Explorer 6.

There are other pseudo-classes that can be used to provide a more usable experience for those that primarily use a keyboard to navigation through a page. The first of these is the focus pseudo-class (which take affect when the element gains focus – such as tabbing to the element). This pseudo-class can be used to style elements when they receive focus.

Building on the initial example, the addition of a focus pseudo-class will ensure that the same hover effects (in this case some underline text decoration) are applied when the user tabs focus to the anchor.

a { text-decoration:none; }
a:hover, a:focus { text-decoration:underline; }

This would be fine, except that Internet Explorer 6 doesn’t understand the focus pseudo-class at all! The solution is to use the active pseudo-class to extend the CSS rule.

a { text-decoration:none; }
a:hover, a:focus, a:active { text-decoration:underline; }

The order of the pseudo-class rules is important (and if you get the order wrong, you may experience some of the CSS rules displaying inconsistently across browsers). As a general rule, always put pseudo-classes in the following order:

link, visited, hover, focus, active

So, whenever you define a hover pseudo-class CSS rule, consider adding in a focus and then an active pseudo-class at the same time – it will help users that choose to use the keyboard to navigate your site.

The solution is rather trivial – and also very simple to achieve.

Open the System Preferences application and choose Keyboard & Mouse then change the Keyboard Shortcuts option to “All controls” (this can also be toggled using Control-Function-F7 if you are so inclined).

You can now use the tab key to cycle through checkboxes (use the spacebar to select a checkbox when you have cycled to it) and radio buttons (you can use up/down or left/right arrow keys to toggle a radio button when the group is in focus).

A similar option is available in Safari (MacOSX as well as Windows) in the Preferences menu option (within the Edit menu). Select the Advanced tab and select “Press Tab to highlight each item on a webpage”. When enabled, this option allows you to cycle through all elements that can receive focus using option+tab (this includes standard links on the page as well).

I’d like to credit this “discovery” to Brad Jasper and Dylan Ryan at MacTips: Tips & Tricks – but the post is no longer available. Thanks for the heads-up guys!