box-sizing-polyfill
box-sizing-polyfill copied to clipboard
Syntax error when trying to load with Modernizr
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
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);
}
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.
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
.
Ah, I was indeed misreading it. Thank you for your help, Joe. I leave this topic smarter than when I entered.
No worries!