Relax Breath of Solution.Community tech blog of Sameera Thilakasiri - Consultant UI, UX, RWD Specialist/ Interactive Designer

Just I wanted.. Do you?…

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:

  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:"only all"),
        nope: 'testnope.js'// this is to check if media queries are supported at all

        test:"only screen and (min-width: 960px) and (max-width:1440px)"),
        yep: 'test3.js'

        test:"only screen and (min-width: 768px) and (max-width: 959px)"),
        yep: 'test2.js'

        test:"only screen and (min-width:480px) and (max-width:767px)"),
        yep: 'test1.js'

        test:"only screen and (max-width:479px)"),//smallest screen
        yep: 'test0.js'

Modernizr touch detect and change the css file

    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:

Sameera Thilakasiri 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.


Leave a Reply

You must be logged in to post a comment.