前端处理兼容性的方法

前端处理兼容性的方法

  1. BROWSERHACKS是一个网站,它也是一个资料合集,里面就介绍了如何去识别不同浏览器与不同浏览器版本的各种黑科技
  2. html5shiv.js
    his script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer. http://paulirish.com/2011/the-history…
    shim就是帮助你补充老旧浏览器的不足,让代码更顺手
    传统ie5,ie6,ie7,ie8不支持html5标签,相应的样式也不支持,通过ie表达式让 老IE 识别并支持 HTML5 元素
    <!--[if lt IE 9]>
    	<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
    <![endif]-->
    
  3. Respond
    A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
    ie6-8不支持媒体查询,通过ie表达式实现响应式设计
  4. modernizr
    Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.
    一个js库,浏览器检测程序,检测浏览器对HTML5, CSS3 and JavaScript等功能的支持情况,如果浏览器支持某个属性或者特性就会向html元素添加相应的类,如果不支持就会添加NO开头的类,对不太清楚的属性可以采取这种主动检测的方式来解决兼容性问题,主动提供完善的支持和不支持的方案(防御性编程)
    例:
    .svg .log{
    background-image:url(logo.svg)
    }
    .no-svg .log{
    background-image:url(logo.png)
    }
    
  5. Can I use
    “Can I use” provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
    前端开发的时候时常需要检查浏览器的兼容性,在这里推荐(Can I Use)这个是一个针对前端开发人员定制的一个查询CSS、Js在个中流行浏览器钟的特性和兼容性的网站,可以很好的保证网页的浏览器兼容性。有了这个工具可以快速的了解到代码在各个浏览器钟的效果。
发布了42 篇原创文章 · 获赞 4 · 访问量 4620

猜你喜欢

转载自blog.csdn.net/lucasxt/article/details/90178549