box-sizing-polyfill icon indicating copy to clipboard operation
box-sizing-polyfill copied to clipboard

Syntax error when trying to load with Modernizr

Open jayhoytt opened this issue 12 years ago • 5 comments

The star hack is simple, but we are using Modernizr to handle polyfills as a matter of policy. Fortunately, HTML5 Please suggests using Modernizr to load this polyfill as needed. Unfortunately, doing so throws a syntax error in JS on IE7.

The Modernizr intelligence is quite basic:


Modernizr.addTest("boxsizing",function(){
    return Modernizr.testAllProps("boxSizing") && (document.documentMode === undefined || document.documentMode > 7);
});
Modernizr.load([
    {
        test: Modernizr.boxsizing,
        nope: '/path/jto/boxsizing.htc'
    }
]);

The syntax error thrown by the above suggests the problem could be with the XML, but removing the XML (and renaming the file as a .js) produces a different syntax error (related to the element object).

Is this a bug? Or can anyone point to a successful implementation of this polyfill using Modernizr?

TIA

jayhoytt avatar Sep 29 '12 20:09 jayhoytt

As suggested on HTML5 Please, add the file as a behavior in your CSS using the .no-box-sizing class, like this:

.no-box-sizing * {
    behavior: url(/path/to/boxsizing.htc);
}

joejoinerr avatar Sep 29 '12 21:09 joejoinerr

Joe, thank you for your response. As I noted in the OT, we avoid in-declaration hacks (even elegant ones) in CSS. Instead, we use Modernizr.

Am I misreading the following from http://html5please.com/#box-sizing ?

For IE6/7 you can optionally use the box-sizing polyfill to provide this feature in IE 6/7 (you could scope the adjustments using IE conditionals or Modernizr's no-box-sizing).

To me, that note clearly suggests that Modernizr may to load the polyfill.

jayhoytt avatar Sep 29 '12 21:09 jayhoytt

What they are saying is that you can add the polyfill with either IE classes on the html element (e.g. .ie-7), or with .no-box-sizing, not with Modernizr.load. I don't think the load script plays nicely with .htc files anyway. Besides, behavior is not a valid CSS property and will not be read by browsers other than IE, therefore achieving the same outcome as Modernizr.Load.

joejoinerr avatar Sep 29 '12 21:09 joejoinerr

Ah, I was indeed misreading it. Thank you for your help, Joe. I leave this topic smarter than when I entered.

jayhoytt avatar Sep 30 '12 23:09 jayhoytt

No worries!

joejoinerr avatar Oct 01 '12 17:10 joejoinerr