css兼容

这样的工具有:html5shiv.js、respond.js、CSS Reset、Normalize.css、Modernizr、Post CSS等;另外,还可以考虑使用条件注释、CSS Hack、JS能力检测等对兼容做一些修补。

经常问到两个名词:
  • 逐渐增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  • 优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

列举5种以上浏览器兼容的写法

  • 条件注释


<script>alert(1);</script>

  • css hack

.box{
color: red; _color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /
ie/edge 6-8*/
}

webkit- ,针对safari,chrome浏览器的内核CSS写法
-moz-,针对firefox浏览器的内核CSS写法
-ms-,针对ie内核的CSS写法

  • 选择器前缀法

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等

以下工具/名词是做什么的(过)

  • 条件注释
    条件注释 是于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码

  • IE Hack
    针对IE浏览器编写不同的CSS,有CSS属性前缀法、选择器前缀法以及IE条件注释法

  • js 能力检测
    使用JS的语法检测浏览器支持的属性,浏览器拥有的能力而不是来区分是什么浏览器。这样如果浏览器拥有某种能力则提供一种方案,没有某种能力则提供另一种方案

  • html5shiv.js
    用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。

  • respond.js
    让不支持css3媒体查询的浏览器支持查询

  • css reset
    通过重新定义标签样式,“覆盖”浏览器的CSS默认属性

  • normalize.css
    Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案

  • Modernizr
    Modernizr是一个 JavaScript 库,用于检测用户浏览器的 HTML5 与 CSS3 特性

  • postCSS
    PostCSS是一个JS插件转换样式表的工具。可以将CSS解析成抽象语法树

一般在哪个网站查询属性兼容性?

brwoserhack
canIuse

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的...
    大女表哥阅读 4,804评论 0 9
  • 什么是 CSS hack CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什...
    怎么昵称阅读 3,110评论 0 1
  • 1.什么是 CSS hack 由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozi...
    zhaonu阅读 3,068评论 0 0
  • CSS Hack 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展示的页面效果不...
    zx9426阅读 3,114评论 0 0
  • 1. 什么是 CSS hack 由于不同厂商的浏览器,比如Internet Explorer,Safari,Moz...
    andreaxiang阅读 3,816评论 0 5

友情链接更多精彩内容