Simian Design

May 12, 2003

Link Styling based upon Link Type

Reinventing Hypertext Links, by "Chris Hester":http://www.designdetector.com/ has some interesting ideas. Chris' idea is to style links based upon the type of link that they are. His three types of links are as follows: 1. Link to a page within site or email address 2. Link to an image or file 3. Link to a separate website Now his initial suggestion is to hard-code styles into the links based upon the type of link they were. I think that this is a bad idea, as the first time you don't do it, it breaks the system. (plus all the extra work involved in that) I'd go either the advanced CSS3(Cascading Style Sheets version 3) selector approach, or through the DOM(Document Object Model). I'm feeling fairly lazy right now, so I'll quickly outline one potential solution. Link to page within site. I'd keep the default linking style to this one in the CSS(Cascading Style Sheet) and use selectors to differ the other two types. Link to an image or file a[href~="gif jpg jpeg pdf zip doc txt png"] { } ( "CSS3 Selectors":http://www.w3.org/TR/css3-selectors/#type-selectors is a good help when dealing with these selectors ) Link to a separate website I'm going to take this from "Kryogenix":http://www.kryogenix.org/days/173.html as he has covered this one fairly well. a[href^="http:"] { } Now, the real question with this whole exercise is this: Is This Neccessary? I don't know. The standard user response to seeing links is to click on them, not to think about where they go. Nor is it to try and figure out what your legend is. Hell, if they even have to try and figure out what your legend is, you've done a bad job. And for that reason alone, I think I will not implement this. But I still reserve the right to change my mind at any point in time.

Post Info

Tagged As CSS, Coding, HTML, Interaction Design, Usability

Comments are Open (0)

Posted at 01:13 PM