Online Tutorials

I'm always weary of online tutorial websites that teach you how to effectively write HTML/CSS. Although the bios of the authors often refer to the amount of time they've spent working in the web industry, neither does it refer to the type of exposure they've had to different projects, nor does it mention their intentions.

If I were to develop CSS with a strong focus on browser compatibility, it would be far different from developing it with a focus on browser performance (read: Steve Souders). The same goes for CSS intended for longterm use and CSS written to support accessibility. These things are all different.

Websites like Smashing Magazine offer great tips on how to approach the technical issues inherent with web development, but the tutorials should be seen as just that; references. There's no such thing as a one-solution-fits-all. If there was, it would probably be one that far exceeds any clients' budget.

Hacks

A coworker of mine recently sent me a link to a website that showcased what CSS is capable of doing in terms of mimicking Javascript rollovers and basic behaviours. Although the site did appear to work as stated, I opened up the source code to discover extraneous hidden HTML markup that littered the page. With this new information, I’d have to say that the CSS didn’t work as stated.

CSS is supposed to contain the presentation markup. Javascript holds the behavioural scripting. HTML holds the content. When CSS is used to replace Javascript by means of littering on the page content, this becomes a hack. Using HTML and CSS to create behavioural hacks to do what Javascript can easily do. It’s a cool concept to execute, a poor architecture for implementation.

Targeting

<A href="URL" target="_blank">

For those who are unaware, a more "proper" way of writing HTML is to exclude the target parameter from the <A> anchor tag. This has been commonly used on many sites to open links in new windows. From the different documentation that I've read on the internet, using HTML to open new windows is deprecated because it causes problems with braille readers and other devices meant to assist the impaired.

Accessibility aside, my own thoughts on this matter are that web users should be given the choice as to when they feel it's necessary to open a link in a new window or not; HTML shouldn't dictate this. However, when approaching this in a business perspective, there are also many legitimate reasons that justifies why links should open in a new window. One way to overcome the accessibility requirements is to:

1. Build the site where <A> anchors do not contain the target parameter
2. Instead, add a class to those anchors <A CLASS="external-link"/>
3. When the page loads, use javascript to:
   • crawl through the page
   • check all <A> anchors with the "external-link" class
   • inject the "target" parameter into the tag

There are different ways to approach this issue and depending on the business goals, this isn't the always best. The downside to this method, although minor, is that by crawling through the page, you are increasing the rendering time when the page loads. This is, of course, only an issue if the browser is on a slow device, the page contains a lot of objects or if the user is running on IE6.