CSS Autoprefixer 線上前綴自動補全工具
這款免費的 CSS Autoprefixer 線上工具能自動為 CSS 屬性加上所需的 vendor prefix（如 -webkit-、-moz-、-ms- 及 -o-），確保網頁在各個瀏覽器中呈現一致。只需將 CSS 程式碼貼入上方文字框，系統便會在瀏覽器本地端即時解析並補全前綴，無需安裝任何套件或設定複雜的建置流程。
如何線上替 CSS 自動補全前綴
使用此線上工具補全前綴非常簡單，只需跟著以下步驟操作：
- 將未處理的原始 CSS 樣式程式碼貼入或輸入到上方的輸入框中。
- 停止打字後，系統會自動處理並即時顯示補全前綴後的 CSS 輸出，無需按下任何執行按鈕。
- 點擊輸出框上方的複製按鈕，即可將處理好的 CSS 貼至專案中使用。
若輸入的 CSS 語法有誤，畫面會顯示提示訊息並保留上一次有效的輸出結果，修復語法後即可恢復自動更新。
什麼是 CSS vendor prefix
CSS vendor prefix 是瀏覽器廠商在標準語法尚未完全定案時，為實驗性屬性加上的一段標籤，常見的包括 -webkit-（Chrome、Safari、新版 Edge）、-moz-（Firefox）、-ms-（舊版 IE 與 Edge）以及 -o-（舊版 Opera）。
隨著 CSS 規範成熟，新版瀏覽器大多已支援標準語法，但在特定屬性（如 user-select 或 backdrop-filter）上，舊版或現行部分瀏覽器仍需要寫入這些標籤才能正常渲染。
使用線上 CSS Autoprefixer 的優勢
手動整理 vendor prefix 清單不僅繁瑣，還容易遺漏或寫入早已被淘汰的過時語法。本工具整合 PostCSS 與 Autoprefixer 引擎，能依據實際的瀏覽器支援度數據，精確加入必要的 vendor prefix。
所有運算均在你的裝置本地執行，程式碼不會上傳至任何伺服器，既安全又快速。
自訂目標瀏覽器
預設情況下，本工具採用 Autoprefixer 的標準查詢字串（> 0.5%, last 2 versions）。如果你的專案有特定的相容性需求，可以在「目標瀏覽器」欄位輸入自訂的 browserslist 查詢語法（填在「Browserslist 查詢（選填）」），例如：
last 2 versions：支援所有主流瀏覽器的最近兩個版本。> 1%：支援全球使用率超過 1% 的瀏覽器。Safari >= 9：支援 Safari 9 以上的所有版本。
當目標瀏覽器範圍越舊，產生的語法數量越多；若僅針對現代瀏覽器，產出的結果則會相對減少或完全無需添加特殊標籤。
常見問題
這款 CSS Autoprefixer 工具的運作原理是什麼？
本工具在瀏覽器內部直接執行與 Webpack 及 Vite 相同的 PostCSS 和 Autoprefixer 引擎。它會比對你輸入的 CSS 屬性與當前瀏覽器相容性資料，精確補全所需語法，不會殘留無用的程式碼。
為什麼現在還需要 CSS vendor prefix？
雖然大部分現代 CSS 語法已不需要額外標籤，但少數屬性如 user-select 或 backdrop-filter 在部分瀏覽器上仍需要特殊標籤才能正常運作。使用 Autoprefixer 可以確保語法相容性，同時避免手動寫入無效程式碼。
本工具與官方 Autoprefixer 示範頁有何不同？
兩者採用的 Autoprefixer 解析引擎完全相同，輸出結果一致。本工具提供更簡潔且適合行動裝置的介面、打字即時預覽以及一鍵複製功能，且完全免安裝。
什麼是 browserslist 查詢語法？
browserslist 查詢語法是一短字串（例如 "> 1%, last 2 versions"），用於指定專案需要支援哪些瀏覽器版本。Autoprefixer 會讀取此設定來決定需要補全哪些 CSS 語法。
我輸入的 CSS 程式碼會被上傳到伺服器嗎？
不會。本工具完全在你的瀏覽器本地端運作，任何程式碼或資料都不會上傳至外部伺服器。
需要按下按鈕才會產生輸出嗎？
不需要。當你在輸入框貼入或編輯 CSS 後，系統會在停止打字的瞬間自動更新輸出結果，無需點擊任何執行按鈕。
