如何告诉 Modernizr 加载（yepnope）在头部底部添加 CSS？答案

【问题标题】：How to tell Modernizr load (yepnope) to add CSS at bottom of head?如何告诉 Modernizr 加载（yepnope）在头部底部添加 CSS？
【发布时间】：2015-04-23 12:26:14
【问题描述】：

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

问题是，有没有办法告诉 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'>

【问题讨论】：

标签： javascript css modernizr yepnope

【解决方案1】：

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

目前，我已经决定使用 jQuery 来添加样式表：

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

【讨论】：

【解决方案2】：

yepnope 应该是这样的

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

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

【讨论】：

我认为您的意思是使用injectCss，而不是injectJs。此外，这会异步加载我不想要的 main.css。我只想异步加载 overrides.css。
就像我说的，我想尝试用 Modernizr 来做这件事。这也可以用 jQuery 在一行代码中完成，而不是您发布的链接：( "head" ).append( "<link rel='stylesheet' href='overrides.css' type='text/css'>" );
如果您碰巧决定使用 jquery 版本，请记得先加载它（jquery）...

【解决方案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>

【讨论】：