189 8069 5689

css兼容性处理方式是什么

了解css兼容性处理方式是什么？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

公司主营业务：做网站、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出惠安免费做网站回馈大家。

css兼容性处理方式有：1、对样式进行初始化；2、添加浏览器私有属性，如【-moz】代表firefox浏览器私有属性；3、使用自动化插件，如自动管理浏览器前缀的插件Autoprefixer。

处理方法：

一、样式初始化

每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化

* { 
  margin: 0; 
  padding: 0; 
}

如果不知道该初始化什么，推荐一个初始化CSS样式库normalize.css，选取展示其中几个样式设置，如下：

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. */
}

二、添加浏览器私有属性

-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);

三、使用自动化插件

Autoprefixer是一款自动管理浏览器前缀的插件，把Autoprefixer添加到资源构建工具（例如Grunt）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可

//我们编写的代码 
div { 
 transform: rotate(30deg); 
} 
  
// 自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置 
div { 
 -ms-transform: rotate(30deg); 
 -webkit-transform: rotate(30deg); 
 -o-transform: rotate(30deg); 
 -moz-transform: rotate(30deg); 
 transform: rotate(30deg); 
}

webpack 中配置 postcss-loader 和 postcss-preset-env 也可以处理兼容问题

module: {
  rules: [{
    test: /\.css$/,
    use: [
      // 这个 loader 取代 style-loader。作用：提取 js 中的 css 成单独文件 
      MiniCssExtractPlugin.loader,
      // 将 css 文件整合到 js 文件中 
      'css-loader',
      //修改 loader 配置
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: () => [
            // postcss 的插件 
            require('postcss-preset-env')()
          ]
        }
      }
    ]
  }]
}

// package.json
"browserslist": { 
  //开发环境配置
  "development": [ 
    "last 1 chrome version", 
    "last 1 firefox version", 
    "last 1 safari version" 
  ],
  //生产环境配置
  "production": [ 
    ">0.2%", 
    "not dead", 
    "not op_mini all" 
  ] 
}

感谢各位的阅读！看完上述内容，你们对css兼容性处理方式是什么大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联行业资讯频道。


新闻名称：css兼容性处理方式是什么
网站路径：http://cdxtjz.cn/article/gceeds.html

其他资讯