I'm running into a race condition when using Modernizr to load a CSS file. On my local and staging environments, it loads the CSS file below another stylesheet in the head. This is what I want it to do, so the rules defined in the asynchronously loaded file override the styles in the file that's not asynchronously loaded. But, on production, the asynchronously loaded file get's placed above the other stylesheet which makes the overrides in the asynchronously loaded file not work.
The question is, is there a way to tell Modernizr where to load the async file? I've looked through the docs for Modernizr and the yepnope library that Modernizr uses to load files, but I'm not seeing anything.
Side notes:
I realize I can add more specificity or use the !important on the rules in the asynchronously loaded file, but want to avoid doing that.
Also, I know there are other ways to accomplish this, for instance using jQuery to add the stylesheet after the last in the head, but I want to first see if this can be accomplished using Modernizr.
Example:
Local & Staging (what I want)
<link rel='stylesheet' href='main.css' type='text/css'>
<!-- Loaded asynchronously with Modernizr -->
<link rel='stylesheet' href='overrides.css' type='text/css'>
Production (not what I want)
<!-- Loaded asynchronously with Modernizr -->
<link rel='stylesheet' href='overrides.css' type='text/css'>
<link rel='stylesheet' href='main.css' type='text/css'>
After looking at Modernizr and the yepnope.js code, currently the yepnope.js library (what Modernizr uses to load code) appends the scripts after the parent of the first script tag in the document. So right now, there's not the ability to give the scripts a weight using either the Modernizr or yepnope.js library.
For now, I've settled on using jQuery to add the stylesheet after all others:
$( "head" ).append( "<link rel='stylesheet' href='overrides.css' type='text/css'>" );