Matcha Design Blog
How to Simulate HTML5 and CSS3 Support
Jason Brown - Tuesday, December 6, 2011
Eventually we'll see the day when we can purely use HTML5 and CSS3 and have no fear that anyone who actively browses the web will have such an ancient client that they can't see what we've intended. Unfortunately that day isn't today, so we still need to have options for HTML4 and CSS2 clients, as well as those with partial support.
In my opinion, the best place to start is modernizr - a free JavaScript library that simplifies and automates feature detection, without relying on outdated practices like browser sniffing. For many features, modernizr adds classes to the <html> tag, making selective CSS incredibly easy. Custom JavaScript can easily use modernizr to determine what features are available and, where necessary, supplement the existing features of the browser. For example, creating a JavaScript-based date picker for browsers which don't support <input type="date"> or providing a combination of cookies and ajax to replicate the functionality of localStorage.
There are quite a few tools to help with providing functionality to behind-the-times browsers. One great one is Webshims Lib. It simulates support of many HTML5 features in browsers that don't support them natively. The great thing about Webshims is that you can include it and then code as if every browser fully supports HTML5, and it will fill in the blanks in almost every situation. This allows for much more rapid development than custom-coding fallback solutions every time.
For ensuring cross-browser consistency (as much as possible) in viewing these elements that may or may not be natively supported, HTML5 Reset is a great start. You'll probably need to customize it to your specific needs, but it's an excellent starting point that prevents you from forgetting simple things like ensuring that all browsers render <section> as a block element, and consistent spacing for <p>, <ul>, etc.
As for CSS, my current practice is (with the help of modernizr) to use images or solid-color fallbacks for browsers that don't support border-image, linear-gradient, radial-gradient, multiple backgrounds, box-shadow, etc. If you know of a better way, please share it in the comments below. Curious about what a given browser supports? Visit http://haz.io/ - it uses modernizr to conveniently display your current browser's HTML5 and CSS3 capabilities.
About Matcha Design
Matcha Design is a full-service creative agency specializing in web design, print, identity, branding, interface design, video production, still photography and motion design. Using our passion for excellence, multi-cultural background, and award winning practices, we consistently provide high-quality, custom, innovative solutions to meet the diverse marketing needs of our clients. For more information, visit www.MatchaDesign.com.
Copyright 2013
Matcha Design, LLC. All Rights Reserved.
PRIVACY POLICY TERMS OF USE