modernizr css3、h5兼容方案

最新推荐文章于 2024-04-18 09:47:44 发布

前端漫谈

最新推荐文章于 2024-04-18 09:47:44 发布

阅读量787

点赞数

分类专栏：前端框架文章标签： html5 css3

本文链接：https://blog.csdn.net/hcz804933522/article/details/51932950

版权

Modernizr是一个JavaScript库，用于检测浏览器对CSS3和HTML5特性的支持情况。通过添加特定的class到HTML元素，它帮助开发者实现对不支持新特性的浏览器的兼容处理。用户可以在官网定制所需的功能，以减小文件大小。Modernizr.load()函数结合YepNope.js可以条件性地加载资源，提供 fallback 解决方案，如在WebGL不支持时加载替代库。

摘要由CSDN通过智能技术生成

.modernizr原理，就是判断是否支持某个css3、html5特性，支持做支持的事。不支持，做不支持的。
如何获取modernizr
ps：官网对modernizr进行了拆分，支持开发根据项目需要的特性，进行配置modernizr，这样可以加速modernizr加载速度。

1.官网：https://modernizr.com/download
2.安装modernizr命令行工具：
npm install -g modernizr（全局安装）
推荐在项目路径下安装，当然利用grunt开发的话，完全可以配置到package.json中，利用npm install 进行局部安装。
如果都安装完成了，仅仅需要安装grunt-modernizr，完全可以利用npm install grunt-modernizr –save-only=dev 进行安装。
package.json举例：

{
  "name": "hellworld",
  "version": "1.0.0",
  "description": "hello world",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "author",
  "license": "ISC",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-cssmin":"*