Use CSS3 Features with Fallbacks for Older Browsers

Yes, it is possible to have your cake and eat it too. A good strategy is to use the latest CSS3 features in browsers that natively support them, but fallback to existing techniques like jQuery plug-ins or polyfills for older browsers. 

Modernizr is a great free JavaScript library that detects what HTML5 and CSS3 features a user agent supports. Opacity controls how transparent an element is. CSS3 now has an "opacity" property you can set from 0 (fully transparent) to 1 (fully opaque). Modernizr supports conditional loading, so if it detects the user agent doesn't support the new opacity property, it can download the jQuery core library, which offers cross-browser support for opacity. This provides the best performance for current devices, while ensuring all users have the same experience with the site.

Robert Boedigheimer works for Schwans Shared Services LLC and leads Robert Boedigheimer Consulting LLC. He's been designing and developing Web sites for the past 18 years and is a columnist for aspalliance.com, a Pluralsight author, an ASP.NET MVP, and a third-degree black belt in Tae Kwon Do. He has spoken at industry conferences including Visual Studio Live! and TechEd, plus numerous national and international events.

Posted by Robert Boedigheimer on 04/16/2015