How to tell loading Modernizr (yepnope) to add CSS at the bottom of the head?

I am running a race condition while using Modernizr to load a CSS file. In my local and staging environment, it loads the CSS file under a different stylesheet in the head. This is what I want to do, so the rules defined in an asynchronously loaded file override styles in the file that are not loaded asynchronously. But in production, the asynchronously loaded file is placed above another style sheet, 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 at the docs for Modernizr and the yepnope library that Modernizr uses to upload files, but I can't see anything.

Side notes:

I understand that I can add more specificity or use it !important

in the rules in the asynchronously loaded file, but I don't want to.

Also, I know there are other ways to do this, like using jQuery to add a stylesheet after the last one in my head, but I want to see if this can be done using Modernizr first.

Example:

Local and staging (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'>

      

+3


source to share


3 answers


After looking at the code of Modernizr and yepnope.js, the yepnope.js library (which is what Modernizr uses to load the code) currently adds scripts after the parent of the first script tag in the document. So right now, there is no way to give scripts weight using the Modernizr library or yepnope.js.

Currently I decided to use jQuery to add my stylesheet after all the others:



$( "head" ).append( "<link rel='stylesheet' href='overrides.css' type='text/css'>" );

      

+1


source


with yepnope it should be something like

yepnope.injectJs("main.css", function () {
 <link rel='stylesheet' href='overrides.css' type='text/css'>
 });

      




maybe this can help http://www.phpied.com/preload-cssjavascript-without-execution/

0


source


Place it over the heading label. Browsers will do the rest:

How to do:

<html>
  <link rel='stylesheet' href='main.css' type='text/css'>
    <head>
      <!-- Modernizr loading css script -->
      <script src="Modernizr.js"></script>
    </head>
<body></body></html>

      

Browsers will show :

   <html>
      <head>
          <!-- Moved by browser -->
          <link rel='stylesheet' href='main.css' type='text/css'>
          <!-- Loaded asynchronously with Modernizr -->
          <link rel='stylesheet' href='overrides.css' type='text/css'>
          <!-- Modernizr not working now -->
          <script src="Modernizr.js"></script>
        </head>
    <body></body></html>

      

0


source







All Articles