Abusing JavaScript Frameworks
Tools like jQuery and MooTools make traversing and manipulating the DOM incredibly easy. So easy that you can get carried away with it sometimes. I have fallen down this trap more than once in my career as a web developer.
Here’s an excerpt from an article I stumbled across entitled Add Icons to External Links with Mootools and CSS.
window.addEvent('domready',function() { $$('a').each(function(link) { if(link.hostname != window.location.host) { link.addClass('external'); } }); });
Pretty basic stuff – iterating through all the anchors on the page and adding a class if the current link goes to an external site.
Whether this is apparent to the author I don’t know, but the same effect can be achieved using only CSS.
a[href^='http://'] { /* styling */ }
Note: the solution I pointed out here isn’t anything new. CSS attribute selectors have been around since CSS2.1, and so are are supported in all major browsers bar one(no prizes for those who get this right).
Whilst this example is low impact, I’ve come to the conclusion that the underlying principle is one which creeps up on a lot designers and developers who get the JS fever.
JavaScript libraries are an easy fall back for front-end problems which can’t be solved quickly.
My personal opinion to problems I can’t solve is that the use of JavaScript libraries should be a last resort.
Sometimes people are too lazy to tackle front-end problems head on. In my experience it’s worth the effort researching a possible solution, as it makes you think about the problem and define it more clearly. Most of the time you find yourself in one of the following situations, none of which are bad.
- You’ve thought about it a bit and realise it’s very similar to a problem you’ve faced in the past.
- You find an alternative, in which case you’ve learnt something new.
- There isn’t an alternative, in which case you’ve picked up some new knowledge along the way and realised that your solution was optimal. Pat yourself on the back.
So what do you think?
Enjoyed this article? Be sure to subscribe to my RSS feed.
“a[href^='http://'] { /* styling */ }”
I’m weary that IE6 doesn’t like this, and like it or not, I have to support it (I know that our company can’t afford NOT to support IE6). So I rely on jQuery as a halfway house:
$(“a[href^='http://']“).addClass(“external”);
and style it that way. It doesn’t pollute my mark-up, is succinct (I let jQuery worry about crossbrowser stuff), and manageable.
But yeah, I agree with the sentiment – do things right, and be pragmatic.
Hey Simon,
Do you put this piece of jQuery in a conditional statement for IE6 in addition to the CSS I outlined above, or is it a one solution that fits all?
What vexes me is the split second delay between the page loading and the jQuery kicking in. Particularly in this example when there maybe a lot of anchors on the page, I see this delay happening quite frequently.
I realise this maybe over the top, but would it not be easier to manually add a specific class to any templated external link and use a regular expression to take care of the user generated content?