Modernizr的简单使用

一、介绍

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

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

二、使用

比如我们现在想要针对flex特性进行处理,可以首先在 Can I use这个网站上查找浏览器对该特性的支持度。发现IE6-9是不支持的。
Modernizr的简单使用_第1张图片
写一下代码:


<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>headerheader>
<footer>footerfooter>
body>
html>

Chrome中正常的显示页面:
Modernizr的简单使用_第2张图片
在IE浏览器器下,IE10及以上可以正常显示,但是IE9及以下flex布局就不起作用了,如图所示:
Modernizr的简单使用_第3张图片


现在要解决这个问题!

进入 Modernizr 官网
Modernizr的简单使用_第4张图片
Modernizr的简单使用_第5张图片

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

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

Modernizr的简单使用_第6张图片
然后在页面中引入这个js文件。我们重新查看页面:

在支持flex布局的浏览器中,html标签上多了一个class:flexbox
Modernizr的简单使用_第7张图片
在不支持flex的浏览器中,html中也会多一个class:no-flexbox
Modernizr的简单使用_第8张图片

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


<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>headerheader>
<footer>footerfooter>


<script src="./js/modernizr-custom.js">script>
body>
html>

这样,在支持flex的浏览器中就用flex;在不支持flex的浏览器中就不用flex,用其他的代替。

资料:

Can I use

Modernizr 官网

Modernizr.js简介

你可能感兴趣的:(css,modernizr,css3,html5,兼容性,前端)