bg-leaves
bg-leaves
Trail postsMiscellaneous → Multiple values for the rel attribute
Multiple values for the rel attribute

Posted by thomas April 15, 2009  Comments ( 3 ) ↓

For some reason the w3c removed support for target attributes in xhtml. To get around this, I'm using a little jQuery script that I found somewhere (can't remember where) for external links that still validate as XHTML1.1
$("a[rel~="external"]").click(function(){$(this).attr({"target":"_blank"});});
When I added the creative commons license to this site, I set the value of rel to license, thinking that I could only use one value. Later I realised that I've been using multiple classes for css and that it probably works with rel as well. Perhaps this is old news but having more than one value of rel is valid syntax.

In order to achieve this and have rel="external license", you use the above, highlighted syntax which in the above context means that any anchor element whose "rel" attribute value is either a single value equal to "external" or a space-separated list of values, one of which is equal to "external" is matched.

Works like a charm and replaces the need for target="_blank" in the (x)html code. Of course, JavaScript must be activated. Depending on the reason for opening the link in a new window, this might be what breaks this "fix". Since my links don't have to be opened in a new window (or tab), this qualifies as unobtrusive JavaScript.

It's meant to be a service

Some might say that users should be able to decide for themselves whether a link should open a new window or not but in my own experience, if links open in the current window and I spend some time exploring the other website, it takes a lot of clicks on the back-button to get back to the original site. In Firefox (and other browsers, I'm sure), it's possible to configure the browser to open up a new tab instead of spawning a new instance of the browser which makes it a little more useful and less "invasive".

Other arguments for not using target on links include that all browser offer this functionality by right-clicking on links and choosing how the link should be handled, i.e., open in new window, open in new tab, bookmark etc. In my opinion, the flow of surfing is lost if I have to right-click every link and picking the appropriate menu option just for opening the link in a new tab.

Update:

Did some more reading and as I understand, the target module was never really deprecated and is now included in the core set of modules for XHTML1.1 Second Edition. Perhaps it was removed on a whim for the first edition or put back in the second, due to criticism from developers?
Naturally, I had to test this and sure enough, the validator does not complain about target="_blank". Further, the CSS3 Hyperlink Presentation Module definition seems to make this functionality available in an updated form, where target-new: tab is one of the properties available.

Jump to the start of this post ↑

Comments ( 3 )

Jump to comment form ↓

  1. Joss:Gravatar
    Good article, the tilde (~) is often under-used in this case..

    Unfortunately your code as written will probably break because of the use of double quotes: ("a[rel~="external"]") although correct me if I'm wrong on that.

    Just a thought, but you might have more luck with this code (hope it comes out OK) since it avoids the target attr entirely:

    $('a[rel~=external]').click(function() {
    window.open($(this).attr('href'));
    return false;
    });

    Much love
    Posted @ June 15, 2010, 9:35 # LINK
  2. thomas:Gravatar
    Hi Joss, thanks for your comment and for pointing out a problem!
    I hadn't noticed that the links below don't work as expected. Somehow, the tilde-character had disappeared in the minified script. I edited the file and now it's working!

    Thank you also for providing an alternative, I suspect your version might be a better alternative in a cross-browser perspective. Haven't taken the time to test this though.

    Hope you'll se this reply, REALLY gotta find gotta find the time to implement "notify me of replies by email"-functionality.

    Best regards

    Thomas
    Posted @ June 17, 2010, 17:01 # LINK

Jump to the start of this post ↑

Add your Comment

[# = Required Field]  Get a Gravatar

 

 

[x]