前端是一个让人又爱又恨的职业,爱,是因为技术更新快,发展道路宽阔;恨的是需要学习、掌握的东西太多太多,永远学不完,正如俗话说:活到老,学到老;但更让人头疼的是,还要面临各种适配、兼容性问题。
网上对适配、兼容性问题都有相关解答,但一直以来都是头痛医头脚痛医脚,没有进行系统的梳理,整个思路和方向全是混乱的,所以最近整理了一份css浏览器兼容性的常见解决思路和方案,分享给大家,一起进步。
其实就是一句话,浏览器厂商太多。关键是不同厂商,甚至同一厂商不同版本,对同一段CSS的解析效果也不一致,这就导致了页面显示效果不统一,也就带来了兼容性问题。
浏览器种类这么多,不可能每一个都要去兼容,所以对于用户量一般的产品,把主流浏览器的适配做好,就已经很不错啦。
根据世界市场权威调查机构NetMarketShare公布的2018年10月各浏览器市场占有率,可以看出Chrome的占有率达到了66.43%。
但根据百度流量研究院提供的2018年11月至2019年1月的数据可以看出,IE系仍然占有很大比重,兼容处理工作还需继续。
这里我们不会去关注太多细节问题, 比如哪个css样式需要我们去兼容等,主要从4个方面讨论一下大的解决思路,分别是:浏览器CSS样式初始化、浏览器私有属性,CSS hack语法和自动化插件。
前端的小伙伴一定遇到过因为默认样式导致的错乱问题,而且每个浏览器的css默认样式不尽相同,所以最简单有效的方式就是对其进行初始化(覆盖默认样式)。相信很多朋友也都写过这样的代码,在所有CSS开始前,先把marin和padding都设为0。
*{ margin: 0; padding: 0; }
关于浏览器CSS样式初始化,经验不丰富的话,尤其对于刚入门的小白,可能也不知道该初始化什么,这里推荐一个库给大家,Normalize.css,github star数量接近4万,自行选取展示其中几个样式设置,如下:
html { line-height: 1.15; /* Correct the line height in all browsers */ -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in IOS. */ } body { margin: 0; } a { background-color: transparent; /* Remove the gray background on active links in IE 10. */ } img { border-style: none; /* Remove the border on images inside links in IE 10. */ }
通过CSS样式初始化,已经解决了一大部分因为浏览器默认样式导致的常规兼容性问题。接下来再看看浏览器的私有属性。
-webkit- ,-moz- ,-ms-等,这是我们经常在某个CSS属性前添加的一些前缀,这些就是浏览器的私有属性。
说到私有属性的出现也是因为制定HTML和CSS标准的组织W3C动作很慢。
通常,有W3C组织成员提出一个新属性,比如圆角border-radius,大家都觉得好,但W3C制定标准,要走很复杂的程序。而浏览器商市场推广时间紧,如果一个属性已经够成熟了,就会在浏览器中加入支持。为避免日后W3C公布标准时有所变化,所以加入一个私有前缀,比如-webkit-border-radius,常用的前缀有:
对于书写顺序一定要注意,兼容性写法放到前面,把标准写法放到最后
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-transform:rotate(-3deg); /*为Firefox*/ -ms-transform:rotate(-3deg); /*为IE*/ -o-transform:rotate(-3deg); /*为Opera*/ transform:rotate(-3deg);
大家想一下,如果每个CSS属性写这么一堆兼容性代码,那无疑是对生命折磨,到后面就会讲如何通过自动化插件来处理。
除了以上的默认样式覆盖及私有属性添加,有时我们还需要针对不同的浏览器甚至不同版本编写特定的CSS样式,这一过程就叫做CSS hack!
CSS hack的写法大致可以归纳为以下几种:条件hack、属性级hack、选择符级hack。
条件hack:主要针对IE浏览器进行一些特殊的设置
<!--[if <keywords>? IE <version>?]> 代码块,可以是html,css,js <![endif]-->
关键词
if后面跟的条件共包含6种选择方式:是否、大于、大于或等于、小于、小于或等于、非指定版本
是否:指定是否IE或IE某个版本。关键字:空
大于:选择大于指定版本的IE版本。关键字:gt(greater than)
大于或等于:选择大于或等于指定版本的IE版本。关键字:gte(greater than or equal)
小于:选择小于指定版本的IE版本。关键字:lt(less than)
小于或等于:选择小于或等于指定版本的IE版本。关键字:lte(less than or equal)
非指定版本:选择除指定版本外的所有IE版本。关键字:!
版本
IE浏览器版本,如6、7、8,但IE10及以上版本已将条件注释特性移除,使用时需注意。
<!--[if IE]> <p>你在非IE中将看不到我</p> <![endif]--> <!--[if IE]> <style> .test{color:red;} </style> <![endif]--> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
属性hack:在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀。
selector{<hack>?property:value<hack>?;}
_:选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适
*:选择IE7及以下。诸如:(+)与(#)之类的均可使用,不过业界对(*)的认知度更高
9:选择IE6+