Testing focus styles for mouse clicks

Please see the associated blog article for background.

Test examples

1 - Default, no CSS applied.
Link 1

2 - Outline removed.
Link 2

3 - Outline removed, then put back as author style.
Link 3

4 - Outline removed on :focus and :active, then put back as author styled :focus.
Link 4

5 - Outline removed, then webkit focus added, plus an author fallback for non-webkit browsers.
Link 5

6 - Outline removed, colours switched on :focus.
Link 6

7 - Outline removed, with a:focus:hover.
Link 7

Best CSS to use

The zen approach is to not remove the outline style, and to either leave it alone or change something like the foreground/background colour.

If you need to remove outlines from particular links, I would use this:

a.specific-class:focus:hover { outline: none; }

Results

The table below shows the results from the above conditions across various browsers. I've added a background colour to indicate whether it is 'good' or not. I.e. an outline style must show when using the keyboard, and should not show when using a mouse. I've left 'author outline' neutral for keyboard as that's ok, but does depend on what the author has picked as the outline, ideally it would be the user's preference.
NB: The table is wide, you might need to horizontally scroll.

Example of odd looking outline

The outline is often odd when you have block elements floated to one side, like the following example: