Overwrite CSS with custom CSS loading using Modernizer (YepNope)

I don’t know how to check this, but are there any benefits from loading in the CSS stylesheet via a query using Modernizer.load, since they simply do not rewrite the rule with the CSS class name in the same stylesheet.

For example, if the device has touch support, then I have a different layout for loading, is it faster to do this ...

{
  test: Modernizr.touch,
  yep : 'css/touch.css',
  nope: 'css/base.css'
}

Or rewrite the styles in the same stylesheet ...

.container { width: 50% }

.touch .container { width: 100% }

It seems that the difference boils down to the speed of an additional request with the weight of one large CSS file?

+5
source share
2 answers

You need to understand that you have 3 details.

  • server call.

  • browser time to calculate the whole style of your parent style

  • file weight.

.

css , 1 . , 1 .

, .touch , .

, , , ( )

0

, .

CSS-, , , , Modernizr, .

, .

, Modernizr , Modernizr , Modernizr script.

, , .

, . .

, Modernizr - , , , , .

0

All Articles