What are the ways to deal with css compatibility?

css compatibility processing methods include: 1. Initialize the style; 2. Add browser private attributes, such as [-moz] represents firefox browser private attributes; 3. Use automated plug-ins, such as automatic management of browsing Plug-in for prefixing Autoprefixer.

Processing method:

1. Style initialization

(Learning video recommendation: css video tutorial)

The default css style of each browser is different, so the simplest and most effective way is to initialize it

* { 
  margin: 0; 
  padding: 0; 
}

If you don’t know what to initialize, we recommend an initialization CSS style Library normalize.css, select and display several style settings, as follows:

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

2. Add browser private properties

-moz- represents firefox browser private properties

-ms- represents IE browser private properties

-webkit- represents chrome and safari private properties

-o- represents opera private properties

Pay attention to the order of private properties , put the standard writing method at the end, and the compatibility writing method at the front

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);

3. Use automation plug-in

Autoprefixer is a plug-in that automatically manages browser prefixes. Add Autoprefixer to resource construction After using tools (such as Grunt), you can completely forget about CSS prefixes and just write CSS normally according to the latest W3C specifications.

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

Configuring postcss-loader and postcss-preset-env in webpack can also be done Dealing with compatibility issues

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" 
  ] 
}

Related recommendations:CSS tutorial

The above is the detailed content of What are the ways to deal with css compatibility?. For more information, please follow other related articles on the PHP Chinese website!