Modernizr的简单使用

最新推荐文章于 2024-06-25 09:45:21 发布

webchang

最新推荐文章于 2024-06-25 09:45:21 发布

阅读量1k

点赞数 3

分类专栏： css 文章标签： Modernizr CSS3 flex布局浏览器兼容性 JavaScript库

本文链接：https://blog.csdn.net/weixin_43974265/article/details/115716326

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、介绍

对于CSS3和HTML5的新特性，某些浏览器可能不支持。Modernizr 是一个 JavaScript 库，用于检测用户浏览器的对 HTML5 与 CSS3 特性的支持度。

Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

二、使用

比如我们现在想要针对flex特性进行处理，可以首先在 Can I use这个网站上查找浏览器对该特性的支持度。发现IE6-9是不支持的。
在这里插入图片描述
写一下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>20.css兼容性</title>
  <style>
    header,
    footer {
      height: 50px;
    }

    header {
      background-color: red;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    footer {
      background-color: #007fff;
    }
  </style>
</head>
<body>
<header>header</header>
<footer>footer</footer>
</body>
</html>

Chrome中正常的显示页面：
在这里插入图片描述
在IE浏览器器下，IE10及以上可以正常显示，但是IE9及以下flex布局就不起作用了，如图所示：

现在要解决这个问题！

进入 Modernizr 官网
在这里插入图片描述

我们现在是在针对性的对某个新特性进行处理，让它支持老版本浏览器。

在搜索框中输入 flex，然后点击+号，再build一下，下载一个js文件，如下图所示。

在这里插入图片描述
然后在页面中引入这个js文件。我们重新查看页面：

在支持flex布局的浏览器中，html标签上多了一个class：flexbox。
在这里插入图片描述
在不支持flex的浏览器中，html中也会多一个class：no-flexbox

在 html 元素加入方便调整 CSS 的 class 名是Modernizr自动帮我们做的，然后我们就可以利用这一点进行一些兼容性的处理。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>20.css兼容性</title>
  <style>
    header,
    footer {
      height: 50px;
    }

    header {
      background-color: red;

    }

	 /* 注意这里 */
    .flexbox header {
      display: flex;
      justify-content: center;
      align-items: center;
    }

	/* 还有这里 */
    .no-flexbox header {
      text-align: center;
      line-height: 50px;
    }

    footer {
      background-color: #007fff;
    }
  </style>
</head>
<body>
<header>header</header>
<footer>footer</footer>

<!--引入JS文件-->
<script src="./js/modernizr-custom.js"></script>
</body>
</html>