div|whisperer

One of the biggest complaints that I hear from designers who have moved from Transitional (sometimes even no doctype at all) to XHTML Strict or 1.1 is that the TARGET tag they’ve relied on for so long doesn’t validate anymore. And lets face it if you’re going through the effort of using standards compliant web site code, seeing that green validation cue is the equivalent of a nerdgasm.

Both the HTML 4.0 Strict and XHTML 1.0 Strict recommendations from the W3C have both eliminated TARGET completely. The justification is that it should be the user, not the web site, who decides whether or not a link opens in a new window, a new tab or the same window. I personally tend to agree. Forcing a new window to open essentially “breaks” the back button.

Luckily for TARGET diehards there is another way if you’re not enlightened enough to free yourself from the new-window shackles. The DOM 2.0 standard, which was published well after the HTML 4.0 Strict and XHTML 1.0 Strict recommendations, still includes the target attribute.

In short, it may no longer be good standardista behavior to use the TARGET tag within the link element but it’s still kosher to use it within JavaScript - although frowned upon by purists like me. I will heap shame upon you.

Here’s how to do it anyway:

Change your existing link code that uses the target attribute like this:

<a href="http://divwhisperer.com" target="_blank">Div Whisperer</a>

Change the link to use the REL attribute instead:

<a href="http://divwhisperer.com" rel="newwin">Div Whisperer</a>

Next, create an external JavaScript file with this code in it:

function newwinLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "newwin")
anchor.target = "_blank";
}
}
window.onload = newwinLinks;

Include the external JavaScript file on every page within the HEAD tag. That’s it. I’m sure there is probably a better way of doing this with JavaScript - it’s definitely not my strong suit. Feel free to add a comment here if you’ve got a suggestion.