CSS transitions has great cross·browser support. Most modern browsers can code just fine, and jQuery makes fallbacks and pollyfills easy to add
While you may be forgiven for thinking that CSS transitions are a new technology, they were introduced way back in 2007 by Safari, originally called CSS animations. Since then most modern browsers carry support. We are going to use Modernizr to feature check the user's browser:
- if(! Modernizr.csstransitions){
- Some fall back code here
- }
- else{
- Some code if transitions are supported.
- }
We can use the above to add some code if CSS transitions are not supported, or we could use it to load an external JS, dependent on the result, by using modernizr.load.
What about Internet Explorer?
The best thing about browsers that don't support transitions is that the CSS hover effect will just change instantly. You lose the animation effect, but there's no loss of site functionality. it's your call as to whether you want to take the time to add fallbacks for non-supportive browsers. If the idea of writing CSS transitions, then adding fallbacks for less supportive browsers appeals to you, try jQuery-Animate-Enhanced (http://playground.benbarnett.net/jquery-animate-enhanced/). This plug-in lets you write jQuery animate() as usual, but will switch to using CSS transitions if the browser supports it.
it's a great way to get the benefits of CSS transitions on sites where the client demands perfect cross-browser experiences.
Posts
