Let’s look at a practical example of how to use Modernizr to build cutting-edge websites. This is easy with Modernizr, since you’ll know what the browser is capable of. Modernizr was created based on the principle of progressive enhancement, so it supports-encourages, even-building your website layer by layer, starting with a JavaScript-free foundation and adding layers of enhancement one by one. Additionally, Modernizr makes the new HTML5 elements available for styling in Internet Explorer, so that you can start using their improved semantics right away. With this knowledge, you can take advantage of these native implementations in browsers that support these features, and decide whether to create a JavaScript-based fallback or simply gracefully degrade the page in browsers that don’t support them. When you embed the Modernizr script in your page, it detects whether the current browser supports CSS3 features like border-radius, border-image, box-shadow, rgba() and so forth, as well as HTML5 features like audio, video, localStorage, and the new element types and attributes. This allows designers to take full advantage of everything in HTML5 and CSS3 that is implemented in some browsers, without sacrificing control over the user experience in other browsers. Modernizr is an open-source JavaScript library that makes it easy for web designers to support different levels of experiences, based on the capabilities of the visitor’s browser. Modernizr: the feature-detection library for HTML5 and CSS3 #section2

To solve that problem (and others), you can use Modernizr.

Instead we ask the browser, “can you do this and that?” It’s a simple way to test browser capabilities, but doing all these tests manually all the time gets tiresome. So how do we deal with this new but familiar problem? Simple: We use feature detection, which means that we do not ask the browser “who are you?” and make unreliable assumptions from there on. We’ve also convinced more and more clients that websites don’t need to look exactly the same in every browser.

We’ve smartened up, however, and no longer employ CSS hacks nor use browser sniffing-an unreliable, poor practice. But now we have CSS3 and HTML5, and the situation is repeating itself-different browsers demonstrate varying levels of support for these new technologies. Today, CSS-based layouts are commonplace and every browser has pretty solid support for them. 3 days of design, code, and content for web & UX designers & devs.

Mozilla firefox css hack code