📌  相关文章
📜  什么是 HTML5 Modernizr？(1)

📅  最后修改于: 2023-12-03 14:49:09             🧑  作者: Mango

什么是 HTML5 Modernizr？

HTML5 Modernizr 是一个 JavaScript 库，可以检测浏览器是否支持 HTML5 和 CSS3 的新特性，并根据检测结果为页面添加对应的类名，从而让页面适配不同的浏览器。

如何使用 HTML5 Modernizr？

  1. 下载 Modernizr 库

    可以访问官网： https://modernizr.com/ 下载最新版本的 Modernizr 库，或者使用 CDN 的方式引入 Modernizr 库。

    <script src="https://cdn.jsdelivr.net/npm/modernizr@3.11.2/dist/modernizr.min.js"></script>

  2. 在网页中使用 Modernizr

    在页面的 head 标签中引入 Modernizr 库后，在页面的 body 标签中添加 class 属性，Modernizr 会根据浏览器支持情况自动添加适合的类名。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Modernizr</title>
  <script src="https://cdn.jsdelivr.net/npm/modernizr@3.11.2/dist/modernizr.min.js"></script>
</head>
<body class="js no-touch svg no-ie no-oldie no-modernizr">
  <h1>Hello, world!</h1>
</body>
</html>

    此时，检查网页源代码，可以看到 body 标签中添加了多个类名，这些类名用于检测浏览器是否支持某些特性。

Modernizr 的常用 API

  1. Modernizr.mq

    判断浏览器是否支持 CSS3 媒体查询 

    if (Modernizr.mq('(min-width: 768px)')) {
  // 在宽度大于等于 768px 时执行的代码
} else {
  // 在宽度小于 768px 时执行的代码
}

  2. Modernizr.prefixed

    返回浏览器支持的 CSS3 属性前缀 

    var transformProperty = Modernizr.prefixed('transform'); // 返回带有前缀的属性名
element.style[transformProperty] = 'rotate(45deg)'; // 设置 transform 样式

  3. Modernizr.addTest

    扩展 Modernizr 的检测功能 

    Modernizr.addTest('webp', function() {
  var image = new Image();
  image.onload = image.onerror = function() {
    Modernizr.addTest('webp', function() { // 标识特性支持情况
      return image.width == 1 && image.height == 1;
    });
  };
  image.src = 'data:image/webp;base64,UklGRiwAAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
});
if(Modernizr.webp) {
  // 当浏览器支持 webp 格式时执行的代码
} else {
  // 当浏览器不支持 webp 格式时执行的代码
}
总结

HTML5 Modernizr 是一个方便易用的 JavaScript 库，可以快速检测浏览器是否支持 HTML5 和 CSS3 的新特性，并根据检测结果为页面添加适合的类名，帮助开发者优化页面的兼容性和适配性。