{"id":162,"date":"2006-01-20T12:05:10","date_gmt":"2006-01-20T10:05:10","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2006\/01\/20\/outline-property-for-image-replaced-link\/"},"modified":"2008-04-25T03:29:15","modified_gmt":"2008-04-25T01:29:15","slug":"outline-property-for-image-replaced-link","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2006\/01\/20\/outline-property-for-image-replaced-link\/","title":{"rendered":"Outline property for image-replaced links"},"content":{"rendered":"

In the previous article about the annoying outline<\/a>, I introduced you the JavaScript based solution. After a few days, Nathan Smith<\/a> came with the much more elegant outline: none;<\/code> trick<\/a>. The question remains, how should we apply it in a way not to confuse a user browsing with a keyboard?<\/p>\n

Why does all this happen?<\/h2>\n

If we shift text somewhere far to the left side, with the Phark image-replacement<\/a> – the text-indent: -9999px;<\/code> trick, a content box is also stretched. Ouch!<\/p>\n

Negative indentation will not remove the text node from a document flow, like for example what position: absolute;<\/code> would do. A link must be set to display: block;<\/code> so we can click on the area, surrounding the link text. This means that it should occupy the whole available parent element area.<\/p>\n

What do we want to do here, exactly?<\/h2>\n
    \n
  1. Remove text form a link and replace it with a background-image<\/li>\n
  2. Remove the outline border when an image-replaced link is clicked<\/li>\n
  3. Keep the outline border when an image-replaced link is focused<\/li>\n
  4. Control dimensions of the outline border<\/li>\n<\/ol>\n

    The replacement<\/h3>\n

    First, the well known image-replacement trick:<\/p>\n

    a { background: url(\"cool_image.gif\"); text-indent: -9999px; }\r\na:visited { background: url(\"cool_image_visited.gif\"); }\r\na:hover,\r\na:focus { background: url(\"cool_image_hover.gif\"); }<\/pre>\n
    Remove the outline<\/h3>\n
    We shouldn\u2019t remove the outline completely for the a<\/code> element, because we are then falling into a trap to confuse a keyboard users. What we should do, is to apply the rule only if we are sure a site is navigated with a mouse. The only way we can detect<\/em> mouse with CSS  is pseudo-class :hover<\/code>. If something is going to be clicked, it must be hovered first, right? Right. We add the a:hover { outline: none; }<\/code>:<\/p>\n
    a { background: url(\"cool_image.gif\"); text-indent: -9999px; }\r\na:visited { background: url(\"cool_image_visited.gif\"); }\r\na:hover,\r\na:focus { background: url(\"cool_image_hover.gif\"); }\r\na:hover { outline: none; }<\/strong><\/pre>\n
    Control the outline area<\/h3>\n
    Now, if you hover and click, there\u2019s no outline border, but if you focus it with a keyboard, the outline remains, but is stretched all the way to the left. Fortunately, the overflow: hidden;<\/code> will do the trick. So, the full set of rules is like follows:<\/p>\n
    a { background: url(\"cool_image.gif\"); text-indent: -9999px; overflow: hidden;<\/strong> }\r\na:visited { background: url(\"cool_image_visited.gif\"); }\r\na:hover,\r\na:focus { background: url(\"cool_image_hover.gif\"); }\r\na:hover { outline: none; }<\/pre>\n
    Thinking about the different scenarios is the only way to do the CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"
    In the previous article about the annoying outline, I introduced you the JavaScript based solution. After a few days, Nathan Smith came with the much more elegant outline: none; trick. The question remains, how should we apply it in a way not to confuse a user browsing with a keyboard?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/162"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=162"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/162\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=162"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}