首頁  >  文章  >  web前端  >  css相容性有哪些處理方式

css相容性有哪些處理方式

王林
王林原創
2020-11-12 14:35:254067瀏覽

css相容性處理方式有:1、對樣式初始化;2、新增瀏覽器私有屬性,如【-moz】代表firefox瀏覽器私有屬性;3、使用自動化插件,如自動管理瀏覽器前綴的插件Autoprefixer。

css相容性有哪些處理方式

處理方法:

一、樣式初始化

(學習影片推薦:css影片教學

每個瀏覽器的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相容性有哪些處理方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn