2023年6月21日发(作者：)
css的各种浏览器兼容写法这⾥我们不会去关注太多细节问题， ⽐如哪个css样式需要我们去兼容等，主要从4个⽅⾯讨论⼀下⼤的解决思路，分别是：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和⾃动化插件。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样式初始化，已经解决了⼀⼤部分因为浏览器默认样式导致的常规兼容性问题。接下来再看看浏览器的私有属性。浏览器私有属性-webkit- ，-moz- ，-ms-等，这是我们经常在某个CSS属性前添加的⼀些前缀，这些就是浏览器的私有属性。说到私有属性的出现也是因为制定HTML和CSS标准的组织W3C动作很慢。通常，有W3C组织成员提出⼀个新属性，⽐如圆⾓border-radius，⼤家都觉得好，但W3C制定标准，要⾛很复杂的程序。⽽浏览器商市场推⼴时间紧，如果⼀个属性已经够成熟了，就会在浏览器中加⼊⽀持。为避免⽇后W3C公布标准时有所变化，所以加⼊⼀个私有前缀，⽐如-webkit-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属性写这么⼀堆兼容性代码，那⽆疑是对⽣命折磨，到后⾯就会讲如何通过⾃动化插件来处理。CSS hack除了以上的默认样式覆盖及私有属性添加，有时我们还需要针对不同的浏览器甚⾄不同版本编写特定的CSS样式，这⼀过程就叫做CSShack!CSS hack的写法⼤致可以归纳为以下⼏种：条件hack、属性级hack、选择符级hack。条件hack：主要针对IE浏览器进⾏⼀些特殊的设置取值关键词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及以上版本已将条件注释特性移除，使⽤时需注意。举个例⼦属性hack：在CSS样式属性名前加上⼀些只有特定浏览器才能识别的hack前缀。selector{
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);}
2023年6月21日发(作者：)
css的各种浏览器兼容写法这⾥我们不会去关注太多细节问题， ⽐如哪个css样式需要我们去兼容等，主要从4个⽅⾯讨论⼀下⼤的解决思路，分别是：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和⾃动化插件。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样式初始化，已经解决了⼀⼤部分因为浏览器默认样式导致的常规兼容性问题。接下来再看看浏览器的私有属性。浏览器私有属性-webkit- ，-moz- ，-ms-等，这是我们经常在某个CSS属性前添加的⼀些前缀，这些就是浏览器的私有属性。说到私有属性的出现也是因为制定HTML和CSS标准的组织W3C动作很慢。通常，有W3C组织成员提出⼀个新属性，⽐如圆⾓border-radius，⼤家都觉得好，但W3C制定标准，要⾛很复杂的程序。⽽浏览器商市场推⼴时间紧，如果⼀个属性已经够成熟了，就会在浏览器中加⼊⽀持。为避免⽇后W3C公布标准时有所变化，所以加⼊⼀个私有前缀，⽐如-webkit-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属性写这么⼀堆兼容性代码，那⽆疑是对⽣命折磨，到后⾯就会讲如何通过⾃动化插件来处理。CSS hack除了以上的默认样式覆盖及私有属性添加，有时我们还需要针对不同的浏览器甚⾄不同版本编写特定的CSS样式，这⼀过程就叫做CSShack!CSS hack的写法⼤致可以归纳为以下⼏种：条件hack、属性级hack、选择符级hack。条件hack：主要针对IE浏览器进⾏⼀些特殊的设置取值关键词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及以上版本已将条件注释特性移除，使⽤时需注意。举个例⼦属性hack：在CSS样式属性名前加上⼀些只有特定浏览器才能识别的hack前缀。selector{
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);}
发布评论