当我们开发前端项目时，经常会用到Modernizr这个JavaScript库来检测浏览器的特性支持情况。但是，有一些人对于Modernizr的使用方式存在疑惑：应该将Modernizr的脚本放在HTML文档头部还是其他位置？本文将详细解释这个问题，并给出相应的建议和示例代码。
Modernizr的作用
在深入探讨这个问题之前，我们需要先了解一下Modernizr的作用是什么。简单来说，Modernizr可以检测当前浏览器是否支持某些HTML5和CSS3的新特性。如果浏览器不支持，它会给html元素添加相应的class，以便我们根据不同的特性支持情况编写不同的样式和脚本。
举个例子，假设我们想要使用CSS3的flexbox布局来排列一组元素。但是我们知道，并非所有的浏览器都支持这个特性。此时，我们可以使用Modernizr来检测当前浏览器是否支持flexbox，如果不支持，则为html元素添加一个no-flexbox的class,然后在CSS中编写针对不支持flexbox的样式：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ------------
------- ----------------------------
----- ---------------- -----------------
-------
------
---- ------------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
------
-------
--------- -------------------- ---- -------
---------- -
-------- -----
---------- -----
-
----- -
------ ----
------- ------
------- --- ----- -----
----------- -----------
-
----------- ---------- -
-------- ------
------ -----
-
----------- ----- -
-------- -----------
------ ----
------- ------
------- --- ----- -----
----------- -----------
-Modernizr的位置
现在我们回到本文的主题：该文件被放置在Modernizr头吗？
根据HTML规范，所有的script标签都应该被放在HTML文档的head或body中。但是，由于Modernizr需要检测浏览器的特性支持情况，所以它必须尽早地加载和执行，以便我们能够在后续的样式和脚本中使用它添加的class。
因此，建议将Modernizr的脚本放在HTML文档的head部分，并且放在所有其他脚本和样式之前。这样可以确保Modernizr尽早执行，而我们的样式和脚本可以利用它添加的class编写出更好的兼容性代码。
示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- ------------
------- ----------------------------
----- ---------------- -----------------
------- -----------------------
-------
------
---------- -----------
-------
-------总结
在本文中，我们探讨了Modernizr的作用和应该放置的位置。尽管HTML规范要求所有的script标签都应该被放在HTML文档的head或body中，但是由于Modernizr需要尽早执行，所以我们建议将其
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13379