0

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?

user3464303
  • 85
  • 8
  • I'm unsure what you are asking. Are you wondering why that background image in your CSS isn't being downloaded? – Mister Epic Jun 18 '14 at 13:19

1 Answers1

1

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.

Community
  • 1
  • 1
ffflabs
  • 17,166
  • 5
  • 51
  • 77
  • @'Since Modernizr will only add the no-borderradius class only if the browser doesn't support that attribute' explains to me! thnx! – user3464303 Jun 18 '14 at 14:19
  • Modernizr adds classes to the dom to reflect support status for html5 and css3 features. If your browser doesn't support border radius, all your dom elements will have an additional no-borderradius css class. Otherwise, they won't. – ffflabs Jun 18 '14 at 14:43