How to Simulate HTML5 and CSS3 Support

Tuesday, December 6th, 2011

How to Simulate HTML5 and CSS3 Support

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

About Matcha Design

Matcha Design is a full-service creative B2B agency with decades of experience executing its client’s visions. The award-winning company specializes in web design, logo design, branding, marketing campaign, print, UX/UI, video production, commercial photography, advertising, and more. Matcha Design upholds the highest personal standards for excellence and can see things from a unique perspective due to its multicultural background.  The company consistently delivers custom, high-quality, innovative solutions to its clients using technical savvy and endless creativity. For more information, visit MatchaDesign.com.

Related Tags

You Might Also Like