Code for Tomorrow’s Web Today Using Modernizr
Web developers have been watching the developement of the HTML 5 and CSS 3 specifications for some time. Between the two specs, many of today’s complex web design headaches — like creating rounded corners or animating page elements — can be solved with a single line of code.
Want your text to have a drop shadow? No problem. How about boxes with rounded corners using a single line of code? Also easy to do. But this is still all fantasy. The problem holding us back is the same one web developers have had since the birth of the web — inconsistent browser support means your pixel perfect designs won’t work in every web browser.
Of course, many of the styles in CSS3 degrade gracefully — that is, browsers that don’t support rounded corners will simply render the box as a rectangle. In some cases that’s fine. Firefox, Safari, Opera and Chrome users will see one design and Internet Explorer users will see another.
However, there are some cases where that’s not good enough — for example in detecting HTML 5 support like the new <:canvas> capabilities — and that’s where the wonderful new tool Modernizr comes in handy.
Modernizr is a compact (6kb compressed) JavaScript library that can detect which CSS 3 properties the current browser supports.
Modernizr is a very slick and lightweight way to start using some of the very cool emerging standards of HTML 5 and CSS 3, while maintaining support for older browsers.
If the browser in question supports the feature you’re targeting, then Modernizr adds a class to the body tag so that you can specifically target just the current browser. For example you could have two CSS rules in your stylesheet like this:
body.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
body.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
In this case, Modernizer would check to see if the current browser supports multiple backgrounds (another nice new CSS 3 feature) and then apply the class multiplebgs so you can write specific rules for that browser.
Currently, Modernizer can detect the following elements:
- Canvas
- rgba()
- hsla()
- border-image:
- border-radius:
- box-shadow:
- Multiple backgrounds
- opacity:
- CSS Animations
- CSS Columns
- CSS Gradients
- CSS Reflections
- CSS Transforms
- CSS Transitions
However, Faruk Ate��, the creator of Modernizr, cautions that Canvas and CSS columns support is still experimental and may not work correctly in every browser.
In addition to the CSS 3 elements, Modernizr will allow you to use elements from the HTML 5 spec and style them, even in Internet Explorer.
For more details on how to use Modernizr on your site, check out the detailed tutorial.
One day HTML 5 and CSS 3 will be taken for granted and work in every browser, but until then solutions like Modernizer offer a way for developers to start working with new features today.
See Also:
- XHTML 2 Dies a Lonely Death, Makes Room For HTML 5
- W3C Drops Audio and Video Codec Requirements From HTML 5
- Google Throws Its Weight Behind HTML 5
- How HTML 5 Is Already Changing the Web
- HTML 5 Won���t Be Ready Until 2022. Yes, 2022.
- What HTML 5 is and What it is Not
- HTML 5 Support by Browser: Opera Continues to Lead the Pack
- Why JavaScript Will Save Offline Storage in HTML 5
