css相容性處理方式有:1、對樣式初始化;2、新增瀏覽器私有屬性,如【-moz】代表firefox瀏覽器私有屬性;3、使用自動化插件,如自動管理瀏覽器前綴的插件Autoprefixer。
處理方法:
一、樣式初始化
(學習影片推薦: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中文網其他相關文章!