Better CSS outline suppression

The aim of these tests is to check which combination of :focus, :hover and :active works best in order to suppress the outline when an image-replaced link is clicked with the mouse, but leave it visible for keyboard users tabbing through the page.

Update: it appears that a few bugs in Opera have been ironed out, meaning that overflow:hidden is implemented correctly and the Outline suppressed, reintroduced on :focus approach may actually be viable now, if you can live with overriding the native focus indicator in Google Chrome, Safari and Opera.

Default with overflow:hidden

Using overflow: hidden stops image-replaced links from having an outline that "spills over" to the left (when using off-left techniques). Note: there seems to currently be a bug in Opera that sees the outline still spill over in the second type of image replacement...we're on it.

Outline suppressed, reintroduced on :focus

Reintroducing outline on :focus also brings it back on :active in IE and Firefox, so it shows when the link it clicked with the mouse. Defining outline: thin dotted explicitly also overrides the standard outline look and feel in Google Chrome, Safari and Opera and results in a doubleoutline (native and thin dotted) in Opera.

Outline suppressed on :active only

Short and sweet. Instead of suppressing outline on :focus, we just do it on :active. This prevents all browsers from showing an unsightly outline when users click image-replaced links with a mouse, still lets keyboard users see where their focus currently is, and it doesn't override any of the native outline stylings or create a doubleoutline. Perfect!

Outline suppressed on :hover and :active

Update: after some recent testing I discovered that there is still an issue with just suppressing outline on :active. It appears that outline still manages to appear in the time between activating a link and the link target loading (which in hindsight is logical – after activation, the link does indeed receive focus). As my test page only uses in-page links, this issue never came up before. The slightly less elegant solution is to also suppress the outline on :hover.

The only remaining issues with this method: if a user activates a link and then uses the browser's back button, the outline becomes visible. Oh, and old versions of Internet Explorer notoriously get confused by the exact meaning of :focus, :hover and :active, so this method fails in IE6 and below. Personally, I can live with both of these.

Was it good for you?

The final solutions seems obvious and elegant, but it's possible that this breaks horribly in certain other browsers or in combination with other CSS – that's why I'd really love to get feedback on whether or not this is viable. Drop me a line on patrick.lauke@opera.com.