Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Modernizr是一个检测用户浏览器HTML5和CSS3能力的JavaScript库。
如何工作?
Modernizr runs quickly on page load to detect featuresit then creates a JavaScript object with the results, and adds classes to the htmlelement for you to key your CSS on. Modernizr supports dozens of tests, and optionally includesYepNope.js for conditional loading of external .jsand .css resources.
Modernizr在页面加载时快速运行来检测功能;之后它会创建一个保存检测结果的JavaScript对象,然后为你页面中的html标签上添加一系列class属性来接通你的CSS。Modernizr支持大量的测试和可选地包括YepNope.js来视情况加载外部的js和css资源。
怎样可以很好地保证网页的浏览器兼容性?
Modernizr是一个开源的JS库,它使得那些基于访客浏览器的不同(指对新标准支持性的差异)而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发,同时又不会牺牲其他不支持这些新技术的浏览器的控制。
当你在网页中嵌入Modernizr的脚本时,它会检测当前浏览器是否支持CSS3的特性,比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等,同时也会检测是否支持HTML5的
特性——比如audio、video、本地储存、和新的
<input>标签的类型和属性等。在获取到这些信息的基础上,你可以在那些支持这些功能的浏览器上使用它们,来决定是否创建一个基于JS的
fallback,或者对那些不支持的浏览器进行简单的优雅降级。另外,Modernizr还可以令IE支持对HTML5的元素应用CSS样式,这样开发者就可以立即使用这些更富有语义化的标签了。
跨浏览器开发使用的一些经验
1)一些关于跨浏览器/设备的工具
1. modernizr.js 特性检测器,有就使用原生,没有就加载polyfill
2. polyfill/shim 向后兼容的浏览器的js补丁,一般和modernizr一起用,jshint.js js语法检测器
3. Boilerplate 开发的最佳实践的初始模板,使用js单元测试,测试目标浏览器
4 阅读第三方库关于最低版本支持、Responsive Design (针对屏幕大小)、normalize.css 统一浏览器基本元素的风格
2) 策略:
策略:把浏览器分两类,一类是历史遗留浏览器,一类是现代浏览器,然后根据这个分类开发两个版本的网站,然后自己定义那些浏览器是历史遗留版本,凡是历史遗留版本浏览器,统统使用历史遗留版界面,然后通过通告栏(信息通知系统)明确告知本版本有些功能不能使用,尽快转移到现代浏览器上。然后现代浏览器的网站版本,功能全开,提供最好的用户体验。就是直接使用jReject.js这类插件,弹出有全黑蒙板的对话框,告诉用户这个网站什么版本的IE/浏览器不能用,请使用至少什么版本的IE,firefox和chrome.(这个是最后手段,以上方案都失效的情况下使用。)
跨浏览器兼容问题,过去有,现在有,以后会更麻烦,所以这个问题在你的项目开始前,就必须确定下来最低支持的版本是什么,然后设计一个对应兼容方案。
1.使用es6编译器把代码导出成es5代码
2.使用modernzr检查浏览器是否支持es6,支持用es6代码;不支持,用编译好的es5代码并且加载es6shim。
3.使用grunt把es6编译过程完全自动化
以上这个方案,应该可以使用es6代码去兼容所有的浏览器了。
以上就是关于js框架Modernizr是什么东西全部的内容,如果了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!