1. Graded browser support with Conditional Comments

    The benefit of javascript libraries like prototype, and jquery are threefold:

    1. Richer functions - The ability to use frequent functions you wish browsers would already have (getElementsByClass anyone?).
    2. Cross-browser support - You don’t have to worry about how events bubble and viewports measure differently across browsers.
    3. Backwards compatibility - An extension of supporting the breadth of browsers out there (Safari, IE and Firefox) libraries also try to support the depth of a particular browser’s previous versions (IE 6, 5.5, 5.0).

    Backwards compatibility is always a tricky thing to deal with. How can a library manage new functions that won’t work in older browsers? The latest version of jquery has caused some functions to return errors in IE 5.5, and this has started me thinking about how best to manage this in future projects.

    Yahoo were one of the first organisations to float the concept of graded browser support and it’s a concept we try and encourage our clients to understand. GBS utilises a number of approaches to filter out presentation (CSS) or behaviour (JS) rules that an older browser might not be able to deal with. A rough grouping of browsers could be the following:

    1. Browsers we care about - Well behaved browsers such as Safari, Firefox, Opera and IE 7, that are popular and/or easily supported.
    2. Browsers we wish we didn’t have to care about, but have to - Badly behaved browsers such as IE 5.5/5.0, that still have a large enough user base that we need to consider their browsing experience.
    3. Browsers we simply don’t care about - Old and crappy browsers that pretty much no-one uses anymore.

    Dealing with the first and last groupings are easy. Tier 1 gets it all, whilst Tier 3 gets the content and little else. Tier 2 is the grey area where we spent most of our time, and lose most of our hair. Just how much presentation and behaviour do we provide? How hard should we work to provide it? Where do we draw the line? How do we draw that line? On the assumption that the grey area is essentially IE 5.5/5.0 (which most of the time it is), I can offer the following conditional comment. <!––[if IE]><![if gte IE 6]><![endif]––>
    This is seen by all browsers except IEs 6 and below <!––[if IE]><![endif]><![endif]––>     Now, this initially looks like any regular conditional comment. But upon closer inspection, you will note the comment tags inside the conditional comment. This actually causes IE (and only IE) browsers less that version 6 to ignore what is inside the conditional comment. If used in the head of an HTML document, this allows you to include CSS and JS that will be ignored by those browsers we don’t want to care about, but have to. Enjoy Updated Yup, that should be an less than (lte) not a greater than (gte)… shucks…