2023年6月21日发(作者：)
CSS浏览器兼容性的4个解决⽅案为什么会有浏览器兼容性问题还不是因为浏览器⼚商太多了！Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，360安全浏览器，qq浏览器，世界之窗，TT，搜狗，opera，maxthon（傲游）……关键是不同⼚商，甚⾄同⼀⼚商不同版本，对同⼀段CSS的解析效果也不⼀致，这就导致了页⾯显⽰效果不统⼀，也就带来了兼容性问题。多么希望Chrome能够⼀统江湖啊~~⽬前各浏览器市场份额浏览器这么多，我们也不可能每⼀个都要去兼容，对于⽤户量⼀般的产品，把主流浏览器的适配做好，就已经很不错啦。根据世界市场权威调查机构NetMarketShare公布的2018年10⽉各浏览器市场占有率，可以看出Chrome的占有率达到了66.43%，这绝对是⼀个振奋⼈⼼的好消息。⽽根据百度流量研究院提供的2018年11⽉⾄2019年1⽉的数据可以看出，IE系仍然占有很⼤⽐重，任重⽽道远啊~CSS浏览器兼容性问题的解决思路和⽅案今天，不想去关注太多细节问题， ⽐如那个css样式需要我们去兼容，⽽是想讨论⼀下⼤的解决思路，主要包括4个⽅⾯，浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和⾃动化插件。1. 浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同，所以最简单有效的⽅式就是对其进⾏初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显⽰效果不⼀样。*{ margin: 0; padding: 0;}关于浏览器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样式初始化，相信能解决不少常规的兼容性问题，接下来再看看浏览器的私有属性。2. 浏览器私有属性我们经常会在某个CSS的属性前添加⼀些前缀，⽐如-webkit- ，-moz- ，-ms-，这些就是浏览器的私有属性。为什么会出现私有属性呢？这是因为制定HTML和CSS标准的组织W3C动作是很慢的。通常，有W3C组织成员提出⼀个新属性，⽐如说圆⾓border-radius，⼤家都觉得好，但W3C制定标准，要⾛很复杂的程序，审查等。⽽浏览器商市场推⼴时间紧，如果⼀个属性已经够成熟了，就会在浏览器中加⼊⽀持。但是为避免⽇后W3C公布标准时有所变更，会加⼊⼀个私有前缀，⽐如-webkit-border-radius，通过这种⽅式来提前⽀持新属性。等到⽇后W3C公布了标准，border-radius的标准写法确⽴之后，再让新版的浏览器⽀持border-radius这种写法。常⽤的前缀有：-moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome、safari私有属性-o代表opera私有属性对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前⾯-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属性写这么⼀堆兼容性代码，⽆疑是对⽣命最⼤的浪费，后⾯我们会讲⼀下通过⾃动化插件来处理这块。3. CSS hack有时我们需要针对不同的浏览器或不同版本写特定的CSS样式，这种针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSShack!CSS hack的写法⼤致归纳为3种：条件hack、属性级hack、选择符级hack。条件hack条件hack主要针对IE浏览器进⾏⼀些特殊的设置语法：取值keywordsif后⾯跟的条件共包含6种选择⽅式：是否、⼤于、⼤于或等于、⼩于、⼩于或等于、⾮指定版本是否：指定是否IE或IE某个版本。关键字：空⼤于：选择⼤于指定版本的IE版本。关键字：gt（greater than）⼤于或等于：选择⼤于或等于指定版本的IE版本。关键字：gte（greater than or equal）⼩于：选择⼩于指定版本的IE版本。关键字：lt（less than）⼩于或等于：选择⼩于或等于指定版本的IE版本。关键字：lte（less than or equal）⾮指定版本：选择除指定版本外的所有IE版本。关键字：!versionIE浏览器版本，如6、7、8IE10及以上版本已将条件注释特性移除，使⽤时需注意。举例属性级hack属性hack就是在CSS样式属性名前加上⼀些只有特定浏览器才能识别的hack前缀。语法：selector{
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);}⽬前webpack、gulp、grunt都有相应的插件，如果还没有使⽤，那就赶紧应⽤到我们的项⽬中吧，别再让CSS兼容性浪费你的时间！
2023年6月21日发(作者：)
CSS浏览器兼容性的4个解决⽅案为什么会有浏览器兼容性问题还不是因为浏览器⼚商太多了！Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，360安全浏览器，qq浏览器，世界之窗，TT，搜狗，opera，maxthon（傲游）……关键是不同⼚商，甚⾄同⼀⼚商不同版本，对同⼀段CSS的解析效果也不⼀致，这就导致了页⾯显⽰效果不统⼀，也就带来了兼容性问题。多么希望Chrome能够⼀统江湖啊~~⽬前各浏览器市场份额浏览器这么多，我们也不可能每⼀个都要去兼容，对于⽤户量⼀般的产品，把主流浏览器的适配做好，就已经很不错啦。根据世界市场权威调查机构NetMarketShare公布的2018年10⽉各浏览器市场占有率，可以看出Chrome的占有率达到了66.43%，这绝对是⼀个振奋⼈⼼的好消息。⽽根据百度流量研究院提供的2018年11⽉⾄2019年1⽉的数据可以看出，IE系仍然占有很⼤⽐重，任重⽽道远啊~CSS浏览器兼容性问题的解决思路和⽅案今天，不想去关注太多细节问题， ⽐如那个css样式需要我们去兼容，⽽是想讨论⼀下⼤的解决思路，主要包括4个⽅⾯，浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和⾃动化插件。1. 浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同，所以最简单有效的⽅式就是对其进⾏初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显⽰效果不⼀样。*{ margin: 0; padding: 0;}关于浏览器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样式初始化，相信能解决不少常规的兼容性问题，接下来再看看浏览器的私有属性。2. 浏览器私有属性我们经常会在某个CSS的属性前添加⼀些前缀，⽐如-webkit- ，-moz- ，-ms-，这些就是浏览器的私有属性。为什么会出现私有属性呢？这是因为制定HTML和CSS标准的组织W3C动作是很慢的。通常，有W3C组织成员提出⼀个新属性，⽐如说圆⾓border-radius，⼤家都觉得好，但W3C制定标准，要⾛很复杂的程序，审查等。⽽浏览器商市场推⼴时间紧，如果⼀个属性已经够成熟了，就会在浏览器中加⼊⽀持。但是为避免⽇后W3C公布标准时有所变更，会加⼊⼀个私有前缀，⽐如-webkit-border-radius，通过这种⽅式来提前⽀持新属性。等到⽇后W3C公布了标准，border-radius的标准写法确⽴之后，再让新版的浏览器⽀持border-radius这种写法。常⽤的前缀有：-moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome、safari私有属性-o代表opera私有属性对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前⾯-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属性写这么⼀堆兼容性代码，⽆疑是对⽣命最⼤的浪费，后⾯我们会讲⼀下通过⾃动化插件来处理这块。3. CSS hack有时我们需要针对不同的浏览器或不同版本写特定的CSS样式，这种针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSShack!CSS hack的写法⼤致归纳为3种：条件hack、属性级hack、选择符级hack。条件hack条件hack主要针对IE浏览器进⾏⼀些特殊的设置语法：取值keywordsif后⾯跟的条件共包含6种选择⽅式：是否、⼤于、⼤于或等于、⼩于、⼩于或等于、⾮指定版本是否：指定是否IE或IE某个版本。关键字：空⼤于：选择⼤于指定版本的IE版本。关键字：gt（greater than）⼤于或等于：选择⼤于或等于指定版本的IE版本。关键字：gte（greater than or equal）⼩于：选择⼩于指定版本的IE版本。关键字：lt（less than）⼩于或等于：选择⼩于或等于指定版本的IE版本。关键字：lte（less than or equal）⾮指定版本：选择除指定版本外的所有IE版本。关键字：!versionIE浏览器版本，如6、7、8IE10及以上版本已将条件注释特性移除，使⽤时需注意。举例属性级hack属性hack就是在CSS样式属性名前加上⼀些只有特定浏览器才能识别的hack前缀。语法：selector{
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);}⽬前webpack、gulp、grunt都有相应的插件，如果还没有使⽤，那就赶紧应⽤到我们的项⽬中吧，别再让CSS兼容性浪费你的时间！
发布评论