使用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'>

最佳答案

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

现在,我已经决定使用jQuery在所有其他样式之后添加样式表:

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

10-07 19:51
查看更多