Modernizr: Use HTML 5 and CSS 3 with Progressive Enhancement

Recently, I needed to create a dropdown menu using CSS. It was a pretty tricky menu since it contained convex and concave rounded corners and drop shadows. I wanted to do with a few images as possible and in a flexible way that display correctly regardless of font size, family or language. I used the CSS “border-imge” feature which worked great in modern browsers like Firefox and Chrome but IE 9 doesn’t support “border-image”. To accommodate IE users, I used Modernizr to detect whether a browser supported “border-image” or not and if not, display a different, simpler drop-down menu without fancy rounded corners. I think I’m going to have to add Modernizr to my toolset.

http://www.modernizr.com/

One caveat though is Modernizr depends on Javascript so if it’s disabled, Modernizr won’t be able to help you modernize your website.