Webkit 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.

Google Chrome - Why it is different?

Yesterday, Google launched its first beta version of open source web browser called Chrome. Some people consider this launch as Google’s attack on Microsoft’s IE and some regarded this launch as yet another browser to choose from. Google indirectly claims that market needed a fresh web browser. A browser that is written from scratch with a next generation thinking even though Chrome is built on WebKit an existing open source web browser engine. Google’s long term strategy behind this product is unknown but I believe it is the move Google should have made long time ago.

One of my old college used to say “Do not go under the spotlight if you cannot control the outcome on the stage”. Google’s business is solely based on internet and its growth. Google is under the spotlight on the stage of internet play from the beginning but it had zero control on the way people got to the internet and the way browsers interpreted the web pages. With Chrome, for which I predict it will have a substantial market penetration soon, Google will gain some control on the outcome.

Apart from the business strategy aspect, Chrome browser does have some neat technology advancements. Chrome has done every effort to make browser more stable, faster, clean, simple, efficient and safe. Few things that are specifically noteworthy are:

  • User controlled multi process browser which creates independent browsing environment making it fast, stable, scalable and safe.

  • Platform independent JavaScript Virtual Machine called V8 which converts JS source into native machine code for faster processing.

  • Smart conservative garbage collection methods for fast JS interpretation speed.

  • Open source Gears for development community to create additional features.

  • And lastly search feature for your browser history, suggestions integration on address bar, incognito mode for private browsing, sandboxing of plug-in controls, pop-up blocker, phishing sites security warning etc

Google launched Chrome only for Windows which forced me to restart my Mac in boot camp mode with Windows Server 2003. I am eagerly waiting for a Mac version which Google has promised to launch shortly.

– Salim Hemdani