Switching from Transitional to Strict

I’ve been using XHTML Transitional for while and been happily validating my code on the w3c website until I heard a podcast from Dustin Diaz. Dustin said he prefered HTML strict to XHTML Transitional.
Looking into the reason I used Transitional - because it’s a bit more forgiving - I realised that I should try and make the move to xhtml strict. Looking at my code I was pretty confident that switching to Strict would be fairly painless.

Overall I have to say it wasn’t too much of a headache but the 2 attributes I had to abandon were:
target=
border=
While finding alternatives for some depreciated tags like STRIKE is easy as replacing it with another (in this case DEL) others were more tricky.I used the target=”_blank” to open links to external sites in a new window. As STRICT won’t even negotiate the only solution I was able to find was to use Javascript. Although I have nothing against Javascript I hate using it for such a simple thing, especially when it is not needed for any other tasks on the site.

Fortunately the script is short and will still allow users to click the link if they have javascript disabled.
This script has been borrowed from a post on xoops.org but the poster isn’t sure who the orignal author is

While most sites will suggest putting this in the head of the page I recommend creating a seperate js file. This file then can be linked to from any page on any site to load the script. It can be seen in the head of the About Us page on my current project mypetsite.co.uk

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

You will also need to modify the body tag:

 < body onload="externalLinks();" > 

Finally indicate which links you want to be opened in a new window/tab. Replace any target=_blank with:

rel="external"

Not a simple change and I could hardly call it better for the user but it validates in XHTML STRICT.

A voyage into Javascript wasn’t required for replacing the border=”0″. I used this on some images that some browsers give an ugly blue border when the image used as a link. This is a simple matter of css.

As I dont use a border on any of my images I inserted:

img {
border-style=”hidden”;
border=”0″;
}

It is very unlikely that both css commands are needed but I like to make sure I kill that horrible border dead. For more specific border blasting create a class called noborder or similar and then assign it to the offending images.

On the positive side it wasn’t too difficult to make the switch over and it feels good to be using a more semantic code.