如何告诉 Modernizr load (yepnope) 在头部底部添加 CSS？

Question

在使用 Modernizr 加载 CSS 文件时，我运行陷入竞争状态。在我的本地和暂存环境中，它将 CSS 文件加载到头部的另一个样式表下方。这就是我想要它做的，所以异步加载文件中定义的规则会覆盖非异步加载文件中的样式。但是，在生产中，异步加载的文件被放置在另一个样式表之上，这使得异步加载文件中的覆盖不起作用。

问题是，有没有办法告诉 Modernizr 在哪里加载异步文件？我查看了 Modernizr 的文档和 Modernizr 用来加载文件的 yepnope 库，但我什么也没看到。

旁注：

我知道我可以在异步加载文件的规则上添加更多的特异性或使用 !important，但我想避免这样做。

此外，我知道还有其他方法可以完成此操作，例如使用 jQuery 在头部最后一个之后添加样式表，但我想先看看是否可以使用 Modernizr 来完成。

示例：

本地和分期（我想要的）

<link rel='stylesheet' href='main.css' type='text/css'>
<!-- Loaded asynchronously with Modernizr -->
<link rel='stylesheet' href='overrides.css' type='text/css'>

制作（不是我想要的）

<!-- Loaded asynchronously with Modernizr -->
<link rel='stylesheet' href='overrides.css' type='text/css'>
<link rel='stylesheet' href='main.css' type='text/css'>

Answer 1

与yepnope应该是

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

也许这可以帮助 http://www.phpied.com/preload-cssjavascript-without-execution/

Answer 2

查看 Modernizr 和 yepnope.js 代码后，目前 yepnope.js 库（Modernizr 用来加载代码的库）将脚本附加到文档中第一个脚本标签的父级之后。所以现在，无法使用 Modernizr 或 yepnope.js 库为脚本赋予权重。

现在，我决定使用 jQuery 在所有其他样式表之后添加样式表：

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

Answer 3

放在head标签外面。浏览器将完成剩下的工作：

操作方法：

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

浏览器将显示:

   <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>

如何告诉 Modernizr load (yepnope) 在头部底部添加 CSS？

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

javascript

css

modernizr

yepnope