使用Autoprefixer 自動(dòng)添加前綴是目前最推薦的做法，它可根據(jù)目標(biāo)瀏覽器配置自動(dòng)添加必要前綴，減少冗餘代碼並支持主流構(gòu)建工具；2. 手動(dòng)添加前綴適用於調(diào)試或?qū)嶒?yàn)性開(kāi)發(fā)，常見(jiàn)前綴包括-webkit-、-moz-、-ms-、-o-，但重複代碼多維護(hù)成本高不建議長(zhǎng)期使用；3. 常見(jiàn)需加前綴的屬性包括Flexbox/Grid 佈局、動(dòng)畫過(guò)渡、漸變背景、濾鏡變換、用戶選擇控制等，可通過(guò)Can I Use 查詢兼容性或直接依賴工具處理。

在寫CSS 的時(shí)候，vendor prefixes（廠商前綴）是個(gè)繞不開(kāi)的問(wèn)題。它們是為了讓瀏覽器廠商可以在標(biāo)準(zhǔn)還沒(méi)最終確定之前，提供對(duì)新特性的支持。如果你希望網(wǎng)站在各種瀏覽器中都能正常顯示效果，處理好vendor prefixes 是必要的。

下面是一些實(shí)用的方法和建議，幫助你更好地應(yīng)對(duì)這個(gè)問(wèn)題。

1. 使用Autoprefixer 自動(dòng)添加前綴

這是目前最推薦的做法。 Autoprefixer 能根據(jù)你的目標(biāo)瀏覽器配置，自動(dòng)為CSS 屬性加上合適的vendor prefixes。

• 它基於Can I Use的數(shù)據(jù)來(lái)判斷哪些屬性需要加前綴
• 不會(huì)添加不必要的前綴，減少代碼體積
• 支持主流構(gòu)建工具如PostCSS、Webpack、Gulp 等

舉個(gè)例子，你寫的是：

 .example {
  display: grid;
}

Autoprefixer 會(huì)根據(jù)你的目標(biāo)瀏覽器，自動(dòng)轉(zhuǎn)換成類似這樣的代碼：

 .example {
  display: -ms-grid;
  display: grid;
}

只需要配置好browserslist （比如在package.json中指定目標(biāo)瀏覽器範(fàn)圍），剩下的交給工具就好。

2. 手動(dòng)添加前綴只適用於特殊情況

雖然現(xiàn)在大多數(shù)情況下推薦使用工具，但有時(shí)候你可能需要手動(dòng)添加vendor prefixes，比如調(diào)試兼容性問(wèn)題或者做實(shí)驗(yàn)性開(kāi)發(fā)。

常見(jiàn)的vendor 前綴有：

• -webkit- （Chrome、Safari）
• -moz- （Firefox）
• -ms- （舊版IE/Edge）
• -o- （舊版Opera）

比如寫一個(gè)帶過(guò)渡的按鈕：

 .button {
  -webkit-transition: background-color 0.3s ease;
  -moz-transition: background-color 0.3s ease;
  -ms-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

不過(guò)這種寫法重複多，維護(hù)成本高，不建議長(zhǎng)期使用。

3. 關(guān)注哪些屬性需要加前綴

不是所有CSS 屬性都需要vendor prefixes。一般來(lái)說(shuō)，以下幾類屬性比較常見(jiàn)：

• Flexbox 和Grid 佈局（早期版本）
• 動(dòng)畫和過(guò)渡（animation、transition）
• 漸變背景（linear-gradient）
• 濾鏡和變換（filter、transform）
• 用戶選擇控制（user-select）

如果你不確定某個(gè)屬性是否需要加前綴，可以去Can I Use查一下兼容性情況，或者直接用工具幫你搞定。

基本上就這些。 Autoprefixer 幾乎解決了大部分問(wèn)題，只要配置得當(dāng)，你就不用再操心vendor prefixes 的具體寫法了。手動(dòng)添加雖然偶爾有用，但只是臨時(shí)手段。用好工具，才能把注意力集中在更重要的樣式設(shè)計(jì)上。

以上是如何處理CSS中的供應(yīng)商前綴？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！