Internal Server Error

what the voices in my head tell me to write

Tuesday, February 19, 2008

When to use programmatic constructs to get around browser failings.

Often when I am developing a page there are things I could add to styling of the page to increase its accessibility or graphic design. Simple things such as highlighting the first paragraph of a section by changing its color or font weight. These can add immensely to the visual impression of a page with little additional work.

In theory that is. CSS provides a simple pseudo-class for the above example :first-child. IE6 doesnt implement it. Now I am left with two realistic alternatives. Either don't include that styling element and reduce the functionality of the design or work out a way to programmatically replicate that functionality in a way that IE6 can understand.

In the :first-child example its might be possible to achieve this if for instance the text for each paragraph is being individually pulled out of a database and looped through in a templating system to create the mark up. All that is necessary is to check if it is the first iteration of the loop and add a class attribute to the <p> tag which will hook into CSS to add the styling.

This is not always possible though. Perhaps the entire text for the page is stored en masse in your CMS system and its inserted into the mark up monolithically. You now cannot add in that class to find the first paragraph using your templating language.

Ok then, now what. Javascript to the rescue. You can run a bit of javascript as the page loads which selects the <div> tag representing the section, loop through its children, test to see if each child element in the DOM is a <p> tag and if its the first child. Thats messy, complex to write and error prone.

So, more javascript to the rescue. If you use a Javascript library such as jQuery which uses CSS selectors to attach actions or functions to elements in the DOM it becomes easy.

$('document').ready(function(){
 $('div.section p:first-child').addClass('emphasis');
});

does all the hard work for you.

Of course jQuery code runs perfectly well in IE6 so now you can use CSS selectors which never implemented them in the first place. There is the overhead of loading jQuery (or the library of your choice) but that is offset by caching and the like.

jQuery and its cousins do not just enable developers to create more interactive and engaging user interfaces they also enable designers to create more attractive and therefore engaging designs that will work in a wider range of browsers than ever before.

Labels: IA