Css Archive

Detecting CSS transitions support using JavaScript

Progressive enhancement is one of the cornerstones of good web design: You build a solid foundation that supports a broad range of different browsers, and then add features either as you detect support for them or in a way that doesn’t interfere with less capable browsers.

One of the awesome new features that’s in recent versions of Safari, Safari Mobile (iPhone browser), Chrome, the Android browser, and in Palm’s webOS is CSS transitions. Transitions work by smoothly interpolating between two states of a CSS property over time. For example, using the simple style rules below, you could have a link gradually change from yellow to red when the user moves the mouse over it:

a {color: yellow; -webkit-transition: color 1s linear;}
a:hover {color: red;}

In a more complicated example, you could use CSS transitions to slide an element off-screen when a replacement element is introduced, like the way that the “pages” slide off-screen when you click through an iPhone’s contacts.

This introduces a problem: What if you’re using JavaScript to add the new element, and you want to remove the old element after it’s off screen, and you need to support multiple browsers?

You need to be able to detect that the browser supports CSS transitions so that you know not to remove the element until it’s done animating, and so that you know that it’s OK to remove the element right away for browsers that don’t support CSS transitions. Here’s how you can detect support using JavaScript:

var cssTransitionsSupported = false;
(function() {
    var div = document.createElement('div');
    div.innerHTML = '<div style="-webkit-transition:color 1s linear;-moz-transition:color 1s linear;"></div>';
    cssTransitionsSupported = (div.firstChild.style.webkitTransition !== undefined) || (div.firstChild.style.MozTransition !== undefined);
    delete div;
})();

The variable cssTransitionsSupported will be set to true when transitions are supported, or to false when transitions are not supported.

You can then either use the webkitTransitionEnd (or mozTransitionEnd) events to detect when the transition is finished, or else immediately perform the action when transitions aren’t supported.

Taming IE6 and a "Drop IE6" rebuke

During the development of any project that involves HTML, there’s always a nagging question in the back of your mind:  “How broken will this site be in IE6?“  Here’s an article that will reduce the amount of worrying you do when fixing your site to work in IE6.  It covers the majority of issues you’ll encounter when working with IE6.

Definitive Guide to Taming the IE6 Beast

The article covers:

  • conditional comments

  • target IE6 CSS Hacks

  • Transparent PNG-fix

  • double margin on float

  • clearing floats

  • fixing the box model

  • min/max-width/height

  • overflow issues

  • magic-list-items appearing

It’s probably the last article on IE6 specific CSS techniques you’ll ever need to read.  Required reading for all PLD’s.

On the topic of IE6 and whether or not we should still be supporting it, here are some thoughts.

IE6 support seems to be waning, but we still have plenty of clients that are still running IE6 exclusively on their work machines, so until they upgrade to Windows Vista / 7 we’ll continue to have to support them.

In the past year there have been a few campaigns to get people to upgrade like hey-IT.com, www.bringdownie6.com, and www.end6.org.   Also, Google just announced that YouTube wouldn’t support IE6 anymore in the near future.

Sadly, the more I thought about just saying “no more IE6 support”, the more I realized that the people that were running IE6 at this point couldn’t upgrade.  They are usually either on older machines (Windows 2000 or earlier) or their IT won’t upgrade because of a legacy web-based application depends on it, like a CRM or ERP app.    These applications aren’t upgraded often, and they are definitely not upgraded during a recession.

Full IE6 support is vital for any site that caters to business users (IT issues / older computers), international users (older computers), or a large percentage of the public (lots of people don’t upgrade their computers/OS when all they do is browse the web with them).

Here’s a good chart that shows the trends for various browsers / versions from Oct-04 to May-09 based on data from NetApplications.com

It shows IE6 usage just below Firefox usage in May-09.

As much as I dislike “fixing” the sites I work on to work with IE6, I think we’re going to have to do it at an agency level for another year or so.