What’s the go with the target attribute?

If you want to open a link in a new browser window/tab, the common approach is to use the target=”_blank” attribute in your anchor tag. However, the target attribute is deprecated by W3C standards and your HTML won’t validate if you use it.

The common alternative is to use JavaScript but I don’t really like that — what happens if the user doesn’t have JavaScript enabled? Also, apparently JavaScript versions are more susceptible to pop up blockers (although I can’t confirm if this is really the case).

Smashing Magazine argue that links shouldn’t open in new windows, because it leads to bad user expectation as users expect links to open in the same window. They do say there are certain exceptions. I don’t entirely agree with this. I may not expect a window to open in a new window, but I don’t know if that necessarily leads to a bad user experience, you just go, oh it opened in a new window, right lets go there now…

One way to make the target attribute validate is to the XHTML transitional DocType:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Again though this isn’t ideal because of the other subtleties of using a transitional DocType instead of a strict one. So, that’s why I ask, what is the go with the target attribute? Is there an alternate, HTML only solution? Is everyone comfortable using the unobtrusive javascript way? Do I just need to harden up and do that?

BTW, I do realise its ironic that this post links to external sources using the deprecated target=”_blank” attribute. But that’s just the easiest way to do it in WordPress.

May 4, 2010 | In Web Development | 2 Comments

Web Mockups with Pencil

Discovered Pencil today, a nifty free/open source mockup tool. Initially I wasn’t going to try it because it is advertised as a Firefox extension, and I didn’t want yet another firefox extension installed. But then I found you could download a standalone version. So far, it works pretty good, my only complaint is that I there isn’t a grid view OR at least I don’t know how to turn it on.

May 3, 2010 | In Software, Web Development | 1 Comment

CSS Shorthand Property Order

You can use a shorthand notation for setting certain CSS properties, for example:

div.example {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
}

Is the same as:

div.example {
    margin: 10px 20px 30px 40px;
}

Nothing revolutionary there.

However, I always have trouble remembering the order, so I came up with my own Gen-Y acronym (mnemonic) - trbl for trouble remembering. Get it?

That is, top right bottom left. Might be helpful next time you are writing some CSS and can’t remember the order…

Update: as a number of people have correctly pointed out, a better, more traditional way of remembering this would be to think of a clock – going clockwise from 12 (top) -> 3 (right) -> 6 (bottom) -> 9 (left).

May 2, 2010 | In Web Development | 5 Comments

Dummy HTML Content

Very handy if you need some dummy HTML content: http://html-ipsum.com/

May 1, 2010 | In Web Development | No Comments

Web Development with NotePad++

I’ve started using NotePad++ as my primary editor for web development – HTML, CSS, JavaScript and PHP. Notepad++ gives you everything you need, but you do have to turn on a few settings.

Autocompletion.

This will prompt for you to complete repeated or known text for the relevant language you are working with:

  • Settings > Preferences > Backup/Auto-Completion
  • Tick enable auto-completion on each input, and leave it as function completion. You can start from the 2nd character or more if you find it annoying. Press the <enter> or <tab> keys to automatically populate the full word.

TextFX Settings

TextFX can perform automatic closing of (X)HTML and XML tags through the following setting:

  • TextFX > TextFX Settings > Autoclose XHTML/XML <Tag>
April 30, 2010 | In Software, Web Development | 1 Comment
Page 6 of 171234567891011121314151617
. Thanks for visiting.