Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Syntax error when trying to load with Modernizr #18

Open
jayhoytt opened this issue Sep 29, 2012 · 5 comments
Open

Syntax error when trying to load with Modernizr #18

jayhoytt opened this issue Sep 29, 2012 · 5 comments

Comments

@jayhoytt
Copy link

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

@joejoinerr
Copy link

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);
}

@jayhoytt
Copy link
Author

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.

@joejoinerr
Copy link

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.

@jayhoytt
Copy link
Author

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

@joejoinerr
Copy link

No worries!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants