CODEWITHSUNDEEP
javascriptcssmodernizr
user3464303
user3464303

Reputation: 85

How can Modernizr load a (Modernizr)class conditionally with css?

I was just checking how css expressions with modernizr classes work.. and as I see on Google dev. tools with below:

//normal css
.box{
    width:100px;
    height:100px;
    border-radius:20px;
    background:blue;

//as modernizr detects no support..
.no-borderradius .box{
     background:url(radiusyImage.png);
}

'radiusyImage' does not add extra http request.. I know that is possible(load the source only it is necessary) with js:

if (!Modernizr.borderradius) {
    //load img or a pollyfill..
}

but how is that possible with css? How does it work actually?

Upvotes: 0

Views: 151

Answers (1)

ffflabs
ffflabs

Reputation: 17481

Current browsers don't request images they won't use in the html See this question.

Since Modernizr will only add the no-borderradius class only if the browser doesn't support that attribute, any modern browser won't have a DOM element matching .no-borderradius .box therefore, the image will not load.

The only drawback here is to have a few more lines of styles in your CSS, but its impact is unnoticeable.

Upvotes: 1

Related Questions