Identifying link targets with CSS

About
AIR Applications
- ImageSizer
- Screentweetr
Blog
Contact

Loading ...

Identifying link targets with CSS

Posted by James - 05/12/07 at 09:12:19 am

So, you have links that open in new windows, and links that open in parent windows. Inconsistant behaviour is the primary usability nightmare, and your standard web browser doesn’t give you any feedback on just what is going to happen once you click that link. Popups galore? or damn-I-was-reading-that syndrome? If only there was some visual clue we could give about those pesky link behaviours.

Well, this isn’t something I’ve seen anyone do yet, but technically it should be possible. What we should be able to do is transport the same techniques we use for detecting file types – ie. the CSS 2.1 attribute selectors – and link them to the target attribute. Thankfully, this should be a pretty short bit of code, as there’s only really four target options that anyone uses anyway. These would be ‘_blank’, ‘_self’, ‘_top’ or ‘_parent’. So, working on our existing knowledge of detecting link file-types, we simply add the code;
a[target='_blank']

… and we should now be able to automatically attach icons to those links that target a new browser window. (_parent, _self, and _top nearly always open links in exactly the same window) Links to other websites already have a standard icon – pretty much set by wikipedia – but it’s not often that target-based links are seen, so there’s not much of a standard. Or is there?

Sitepoint has a short article on the problem of link targets – ‘Beware of Opening Links in a New Window‘ and also has a pretty simple icon to use for new windows. Perfect! Just like internal links don’t have an icon, and external ones do, so only links that open a new browser window should need this icon. Save the icon to your webserver, add your new CSS, and you’re away.

Posted by James Ford

Full profile: http://www.psyked.co.uk/about

About the author: James is a Senior New Media Developer at MMT Digital, and has BA(Hons) in Design for Interactive Media from the University of Gloucestershire. He loves designing and producing all sorts of website and Flash-related things, as well as prattling on about technologies. Day-to-day he works with Flash, Dreamweaver, Director, Microsoft Office Sharepoint Server 2007 (MOSS) and in his spare time he mucks about in Flex and Wordpress. Follow James on Twitter.

December 5, 2007 | In General chit-chat | 2 Comments

2 Comments »

need help. i have a problem to link a file to open in the window. When i set the target to _parent or _self it opens a new window. Please note that a am using css template. I need urgent help.

Comment by HAARY — 10 March 2008 #
HAARY – does this happen on more than one computer – Only “_blank” should open a new window, maybe the browser settings are overriding the html behaviours?

Comment by Mike — 11 March 2008 #