Modernizr.load is a resource loader (CSS and JavaScript)
Posted on October 22, 2012 | No Comments
Modernizr.load is a resource loader (CSS and JavaScript) that was made to specifically to work side-by-side with Modernizr. It’s optional in your build, but if you are loading polyfills(polyfills is downloadable code which provides facilities that are not built-in to a web browser.), There’s a good chance it can save you some bandwidth and boost performance a bit.
Modernizr.load syntax is generally very easy to understand, so we’ll start with a basic example:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
In this example, we decided that we should load a different script depending on whether geolocation is supported in the host browser or not. By doing this, you save users from having to download code that their browser does not need.
Modernizr at Responsive web design
Depending on the devise request the relevant files
Modernizr.load([ {
test: Modernizr.mq("only all"),
nope: 'testnope.js'// this is to check if media queries are supported at all
},
{
test: Modernizr.mq("only screen and (min-width: 960px) and (max-width:1440px)"),
yep: 'test3.js'
},
{
test: Modernizr.mq("only screen and (min-width: 768px) and (max-width: 959px)"),
yep: 'test2.js'
},
{
test: Modernizr.mq("only screen and (min-width:480px) and (max-width:767px)"),
yep: 'test1.js'
},
{
test: Modernizr.mq("only screen and (max-width:479px)"),//smallest screen
yep: 'test0.js'
}
]);
Modernizr touch detect and change the css file
Modernizr.load([{
test: Modernizr.touch,
yep: ["css/touch-controls.css", "js/touch-events.js"],
nope: ["css/no-touch-controls.css", "js/no-touch-events.js"]
}]);
Incoming search terms:
Tags: Modernizr | Modernizr.load | Modernizr.mq | Modernizr.touch
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.