您好,登錄后才能下訂單哦!
了解css兼容性處理方式是什么?這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
css兼容性處理方式有:1、對樣式進(jìn)行初始化;2、添加瀏覽器私有屬性,如【-moz】代表firefox瀏覽器私有屬性;3、使用自動化插件,如自動管理瀏覽器前綴的插件Autoprefixer。
處理方法:
一、樣式初始化
每個瀏覽器的css默認(rèn)樣式不盡相同,所以最簡單有效的方式就是對其進(jìn)行初始化
* { margin: 0; padding: 0; }
如果不知道該初始化什么,推薦一個初始化CSS樣式庫normalize.css,選取展示其中幾個樣式設(shè)置,如下:
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私有屬性
對于私有屬性的順序要注意,把標(biāo)準(zhǔn)寫法放到最后,兼容性寫法放到前面
-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添加到資源構(gòu)建工具(例如Grunt)后,可以完全忘記有關(guān)CSS前綴的東西,只需按照最新的W3C規(guī)范來正常書寫CSS即可
//我們編寫的代碼 div { transform: rotate(30deg); } // 自動補(bǔ)全的代碼,具體補(bǔ)全哪些由要兼容的瀏覽器版本決定,可以自行設(shè)置 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 成單獨(dú)文件 MiniCssExtractPlugin.loader, // 將 css 文件整合到 js 文件中 'css-loader', //修改 loader 配置 { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ // postcss 的插件 require('postcss-preset-env')() ] } } ] }] } // package.json "browserslist": { //開發(fā)環(huán)境配置 "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], //生產(chǎn)環(huán)境配置 "production": [ ">0.2%", "not dead", "not op_mini all" ] }
感謝各位的閱讀!看完上述內(nèi)容,你們對css兼容性處理方式是什么大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。