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.
image replacement with text indent
image replacement with extra <span> positioned off-left
a { outline: none;}This suppresses outline for all users, including those navigating via keyboard. This is often found in sites using Eric Meyer's reset.css
:focusimage replacement with text indent
image replacement with extra <span> positioned off-left
a { outline: none; }
a:focus { outline: thin dotted; }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 double .outline (native and thin dotted) in Opera
:focus, suppressed on :activeimage replacement with text indent
image replacement with extra <span> positioned off-left
a { outline: none; }
a:focus { outline: thin dotted; }
a:active { outline: none; }This works fine in all browsers, except that it's verbose and still results in non-native outline look in Google Chrome, Safari and Opera , and the double .outline in Opera as above
:active onlyimage replacement with text indent
image replacement with extra <span> positioned off-left
a:active { outline: none; }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 double . Perfect!outline
:hover and :activeimage replacement with text indent
image replacement with extra <span> positioned off-left
a:hover, a:active { outline: none; }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.
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.