In years before, the web designers need to match the designs in all the available browsrs on the time. And there is no much options are available to make easy workarounds to use the css. Especially internet explorer has it’s own appearence and css property. But there was one way detecting which browser and version the user had by looking at the navigator.userAgent property in JavaScript.
Now days morover all people start to using the css layout in html buildings. As well the growth of the css, html now we have CSS3 and HTML5 in the use. Wider range of people usining this technolgy now. The clients are in the need of web sites to look exactly the same in every browser.
Ther is a question now arise that, how we can manage all this new css3 properties and html5 elements with the no.of different browsers?, This is where the Modernizr come in to work!.
Modernizr is an open-source JavaScript library. This is used to find the capabilites of the browsers. It helps the Designers to use the html5 and css3 technology easy. This allows designers to take full advantage of everything in HTML5 and CSS3 that is support browsers.
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.
Once we use the Modernizr with our web pages, it will start act to find teh browser support against css3 and html5. In case the html tags are used in the un supported browsers like ie6 so on, it will make those elements available on that browser. It will lead us to use the proper html5 semantics to design our web pages. Actually the Modernizr will deduct and decide whether it need to implement Javascript-based fallback or degrade the web page to what that browser not suppot the elements. You can download the Modernizr from www.modernizr.com.
After you linked to modernizr you have to apply a class name called as “no-js” to your body tag(s). Once you implemented in to your web page, the modernizr will start to work for you. While it start to work it will replace the “no-js” with “js”. It means that, the browser is now javascript enabled and it is replaced the class name. Apart from this, it will deduct all the feature it detects, and prefixing them with “no-js” if the browser doesn’t support.
example :
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don’t */
}
Modernizr Deduct Support for :
- @font-face
- Canvas
- Canvas Text
- HTML5 Audio
- HTML5 Video
- rgba()
- hsla()
- border-image:
- border-radius:
- box-shadow:
- opacity:
- Multiple backgrounds
- CSS Animations
- CSS Columns
- CSS Gradients
- CSS Reflections
- CSS 2D Transforms
- CSS 3D Transforms
- CSS Transitions
- Geolocation API
- localStorage
- sessionStorage
- SVG
- SMIL
- SVG Clipping
- Drag and Drop
- hashchange
- X-window Messaging
- History Management
- applicationCache
- Web Sockets
- Web Workers
- Web SQL Database
- IndexedDB
- Input Types†
- Input Attributes‡