Hidden CSS stuff: the outline property

Posted by # January 23rd 03:14 PM

Anyone worth calling herself a web developer has probably used some kind of an image replacement technique during her career. You know, replacing a page header text with an image, still keeping the HTML structure semantic and accessible.

One of the most common image replacement technique is called the Revised Phark technique, named after Mike «Phark» Rundle. The idea of the technique is that using the text-indent CSS property the heading text is placed so far away from the visible area that it is never shown:

#replace {
  text-indent: -5000px;
  background: url(/background.png) 0 0 no-repeat;
}

The good thing about this technique is that it doesn’t require any extraneous elements to get the effect, thus making it very straight-forward and easy to grasp. On the other hand, it doesn’t work for the odd people that keep CSS on but images off. I can’t think of a reason to do that (except for mobile browsers but they can be treated with a separate stylesheet), so I wouldn’t consider it a big issue.

However, there is an annoying issue if you use use the Phark technique with an anchor element, something you very often do with the main page header. When you click on the link, it will have a dotted narrow border that will go on to the edge of the screen:

Outline issue with the Phark method

A few days ago I was reading Andy Clarke’s excellent Transcending CSS and on page 279 it mentioned the outline CSS property of which I’d never heard. I wasn’t very impressed about its usefulness, but somehow it got me thinking. What if that’s the blot on the Phark landscape? And lo and behold, it was!

Just by adding

  outline: 0;

to the css rule used for the image replacement fixed it. No more those “What the hell is there on the left where I can’t get?” moments on my pages.

design Jump to comment form

Comments

Leave a response

  1. William H. Harle Jr. 01.23.07 / 16PM
    Another equally easy way in which you can accomplish this without completely losing the outline around the part that is actualy the link is to apply the css style overflow:hidden; to the a. this reduces the outline to online your link, and looks excellent.
  2. shawn 01.23.07 / 20PM
    thanks guys -- i'll implement this as soon as possible. appreciate the heads up. best, shawn
  3. Jarkko 01.26.07 / 09AM
    William, Cool, you're right, that's another great way to do it. However, I don't really like how the outline looks in many cases, so I often prefer to just make it go away completely :-)
  4. Wolf 04.20.07 / 12PM

    Cool, I didn’t know about this. I prefer the overflow:hidden technique though, you have to give the user a visual pointer where they exactly clicked.

  5. France 04.20.07 / 17PM

    I’d been wondering why that outline was everywhere; figured it was a Firefox bug. Turns out it actually makes sense that text-indent sends it all the way over there.

    However, using outline:0 to lose the focus can be considered to the detriment of accessibility – especially when tabbing through the content. The good news is this can be solved by applying to the a:focus a style that provides some affordance to it – as is does for a:hover.