Strict XHTML target=”_blank” replacement
Occasionally, just occasionally, web standards really annoy me. Not because of what they stand for, but because of the stupidity of the people who came up with them. Case in point, if you want a link to to launch in a new window/tab, all you have to do in HTML is type…
target="_blank"
in your <a> tag. But I’ve just discovered that this doesn’t validate in Strict XHTML 1.0, the W3C recommended doctype. There is of course a CSS3 replacement, but that renders the whole technique completely useless until all browsers have fully adopted CSS3. So the choice is, don’t do it at all or lose your XHTML validation to a number a errors. Or of course use CSS3, which means that only a fraction of your userbase is getting the experience you want them to have (doesn’t that defeat the point of accessibility standards?) Either way, it’s annoying as hell.
But here’s a solution, instead of using target inside your <a>, use the following:
onclick="window.open(this.href,'_blank');return false;"
It’s crude and it relies on javascript being enabled, but it does work and it does validate. The link will still open if it’s not enabled, but just not in a new window – so it’s a reasonable, if long-winded, compromise.
If you’d prefer to use CSS3, target-new is the droid you’re looking for.
Justin Wanstall says:
August 2nd, 2010 at 9:16 am
I really quick and easy way to apply this to all external links is with a bit of jquery.
Just add this to your HTML and include the jquery framework in the head.
$(document).ready( function() {
$(‘a[href^=http]‘).click( function() {
window.open(this.href);
return false;
});
});
Whenever a link has “http://” in the href jquery will open it in a new window – no need to code javascript into individual links