根据我的理解，当在位于样式表正下方的脚本标签中使用 defer 时，浏览器会在执行脚本并触发 DOMContentLoaded 之前等待样式表加载 (CSSOM)。（更多相关内容）
这在 Firefox 中有效，但在 Chrome 中无效，因此我做了一个测试用例，其中在延迟的脚本标记之前加载了一个巨大的 css 文件。
带有样式表和延迟脚本的 HTML 文件。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js" defer></script>
</head>
<body>
<div class="result">Loading...</div>
</body>
</html>
CSS 文件包含引导程序和设置字体系列的测试类。
/* ...bootstrap v4 css... */
.test {
font-family: 'It works!';
}
JS 文件包含 jQuery 和一个简单的测试脚本。
// ...jQuery....
$(function () {
$('<meta class="test">').appendTo(document.head);
var extractedStyles = $('.test').css('font-family');
$('.result').text(extractedStyles);
});
在 Firefox 中，CSS 可以在执行时解析，我看到“它有效！” > 参见火狐浏览器
在 Chrome 中，CSS 无法在执行时解析，我看到“Times New Roman” > 请参阅 Chrome …
我用来:root创建一些 CSS 变量。是否可以使用 JavaScript 而不是 CSS 创建它们？下面是一个简单的例子：
<div id="container"></div>
:root {
--first-color: #000;
--second-color: #666666;
}
#container {
background-color: var(--second-color);
width: 90px;
height: 90px;
}
在Code.org的App Lab编辑器中,我们最近开始在Chrome 64中看到此错误:
Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet'
此函数中引发错误,旨在检测浏览器是否正在使用CSS媒体查询styleSheets[i].cssRules.
/**
* IE9 throws an exception when trying to access the media field of a stylesheet
*/
export function browserSupportsCssMedia() {
var styleSheets = document.styleSheets;
for (var i = 0; i < styleSheets.length; i++) {
var rules = styleSheets[i].cssRules || styleSheets[i].rules;
try {
if (rules.length > 0) {
// see if we can access media
rules[0].media;
}
} catch (e) {
return false;
} …