You learn new things every day

Wednesday, March 05, 2003

To anyone in the web dev community who has been around for more than a few years and knows their stuff, this is going to be old hat to you. However, I'm putting this up for the benefit of those who are relatively new to the game, and aren't completely clear on one of the more annoying differences between XHTML-1.0-Transitional and XHTML-1.0-Strict.

My site was made using XHTML, XML, ASP, and JavaScript. The Document Type Definition (DTD) of all pages on this site are XHTML-1.0-Transitional, as opposed to XHTML-1.0-Strict or XHTML-1.0-Frameset. I chose to use XHMTL-1.0-Transitional because it gives me greater flexibility with the overall design and arrangement of content on the site. It also allows some attributes I find to be helpful in designing a personal site, such as the ability to easily open pages in new windows.

Typically, this is done by adding the attribute target, and setting its value to something like "_blank". This is great. It's easy. Just place it in all of your anchor tags, and voila! All of your links open up in new windows.

Unfortunately, in the Strict DTD, the attribute target has been taken out and trashed. So, this causes a dilemma; what should you do if you need to open pages in new windows?

When I found this out, I asked myself, "Why in the world was target cut out of the strict DTD?" The answer isn't exactly very clear. Some say it's because target should only be used for linking between frames. Others say it's an accessibility issue; that linking into new windows makes things difficult for people using text-readers and programs like JAWS. I can see how the latter would be true, since I contract for a government agency which by law must have all web properties easily usable and accessible for people with disabilities (see Section508.gov for more info) and have to deal with issues like that on a daily basis. However, it doesn't really make sense for the former.

My quick and dirty solution for this problem is using the ignored but not forgotten method of opening a new browser window using the JavaScript window.open function. It's extremely basic, but I've noticed that people only use that function when they want to open a window in specific sizes and with specific properties. Truth of the matter is, you just don't have to use it for that. And if you want to use an XHTML-1.0-Strict DTD, then you really should. Here's the code:

<a href="http://www.w3c.org" onclick="window.open(this.href, 'windowname'); return false;">Clicky!</a>

That's it - quick and dirty. Just replace "www.w3c.org" with the url you want to send your users to, such as http://www.mexijew.com , and change "windowname" to whatever you want to label the new window (just remember not to use the same name twice on the same page, otherwise it won't work.), and you're done.

Alternatively, there's a great article at SitePoint about using a more advanced JavaScript along with the attribute rel. I personally think that their script is better, in that it allows you to create multiple links that open in new windows by simply adding the rel attribute instead of dropping in the code that I laid out above. But, like I said, my solution is quick and dirty.

• Permanent Link
• Comments [0]