什麼是 CSS 前綴字？

CSS 前綴字是附加在 CSS 屬性名稱前的特定字串，用來標示該屬性是某個瀏覽器廠商的實驗性實現。當某個 CSS 屬性尚未成為 W3C 標準，或者瀏覽器對該屬性的實現有所不同時，會使用這些前綴字。

常見的 CSS 前綴字包括：

-webkit-：用於 Chrome、Safari、Edge（基於 WebKit 或 Blink 引擎的瀏覽器）。
-moz-：用於 Firefox（Mozilla）。
-ms-：用於 Internet Explorer 和 Edge（舊版）。
-o-：用於 Opera（舊版，現多使用 -webkit-）。

例如，border-radius 在早期需要前綴字時，可能會這樣寫：

.element {
  -webkit-border-radius: 10px; /* Chrome、Safari */
  -moz-border-radius: 10px;    /* Firefox */
  border-radius: 10px;         /* 標準屬性 */
}

現在許多 CSS 屬性已經標準化，無需前綴字，但某些新功能（例如 CSS Grid 或某些動畫效果）仍可能需要。

為什麼需要 CSS 前綴字？

瀏覽器相容性：不同瀏覽器可能以不同方式實現新功能，前綴字確保你的 CSS 在各種瀏覽器中正確顯示。
實驗性功能：前綴字允許瀏覽器測試新功能，同時避免與標準屬性衝突。
過渡到標準：當屬性成為標準後，前綴字版本通常會被棄用，改用標準屬性。

常見需要前綴字的 CSS 屬性

以下是一些可能需要前綴字的常見 CSS 屬性（截至 2025 年，許多屬性已標準化，但仍列出以供參考）：

轉換（Transforms）：
- -webkit-transform
- -moz-transform
- -ms-transform
- transform
動畫（Animations）：
- -webkit-animation
- -moz-animation
- animation
漸變（Gradients）：
- -webkit-linear-gradient
- -moz-linear-gradient
- linear-gradient
Flexbox：
- -webkit-flex
- -ms-flex
- flex
其他：
- -webkit-box-shadow / box-shadow
- -webkit-user-select / user-select

在 JavaScript 中處理 CSS 前綴字

既然你是前端工程師，且 JavaScript 能力較弱，我會提供一個簡單且完整的範例，展示如何在 JavaScript 中動態處理 CSS 前綴字，確保你的樣式在不同瀏覽器中生效。

範例：動態設定 CSS Transform 屬性

假設你想用 JavaScript 為一個元素設定旋轉效果（transform: rotate(45deg)），但需要考慮前綴字以支援舊版瀏覽器。以下是完整的程式碼和步驟：

HTML 結構：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>CSS 前綴字範例</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button onclick="rotateBox()">旋轉方塊</button>
    <script src="script.js"></script>
</body>
</html>

JavaScript 程式碼（script.js）：以下程式碼會檢查瀏覽器支援的 CSS 屬性，並動態應用 transform 旋轉效果：

// 取得 DOM 元素
const box = document.querySelector('.box');

// 檢查瀏覽器支援的 transform 屬性
function getSupportedTransform() {
    const prefixes = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'];
    const div = document.createElement('div');

    // 遍歷前綴字，檢查哪個屬性被支援
    for (let i = 0; i < prefixes.length; i++) {
        if (div.style[prefixes[i]] !== undefined) {
            return prefixes[i];
        }
    }
    return null; // 如果都不支援，返回 null
}

// 旋轉方塊的函數
function rotateBox() {
    const supportedTransform = getSupportedTransform();
    if (supportedTransform) {
        // 設定旋轉效果
        box.style[supportedTransform] = 'rotate(45deg)';
    } else {
        alert('你的瀏覽器不支援 transform 屬性！');
    }
}

步驟解說：
- 取得元素：使用 document.querySelector 取得 .box 元素。
- 檢查支援的屬性：getSupportedTransform 函數創建一個臨時 <div> 元素，檢查瀏覽器是否支援 transform 或帶前綴的屬性（例如 webkitTransform）。
- 動態設定樣式：根據支援的屬性名稱，動態設定 style 屬性，應用旋轉效果。
- 錯誤處理：如果瀏覽器完全不支援 transform，顯示提示訊息。
執行結果：
- 點擊「旋轉方塊」按鈕後，.box 元素會旋轉 45 度。
- 程式碼會自動適應不同瀏覽器，無論是否需要前綴字。

如何減少手動處理前綴字的麻煩？

手動為每個 CSS 屬性添加前綴字很麻煩，以下是幾個實用的方法：

使用 Autoprefixer：
- Autoprefixer 是一個自動為 CSS 添加前綴字的工具，適用於現代前端工作流。
- 安裝與使用：
  1. 安裝 Node.js 和 npm。
  2. 在專案中安裝 Autoprefixer：
    npm install --save-dev autoprefixer
  3. 搭配 PostCSS 使用，在 postcss.config.js 中設定：
    module.exports = { plugins: [ require('autoprefixer') ] };
  4. 編譯 CSS 時，Autoprefixer 會根據瀏覽器支援情況自動添加前綴字。
使用 CSS 框架：
- 像 Tailwind CSS 或 Bootstrap 這類框架已經內建相容性處理，無需自行管理前綴字。
檢查瀏覽器支援：
- 使用 Can I Use 網站，檢查哪些 CSS 屬性需要前綴字，以及它們在不同瀏覽器的支援情況。

注意事項

標準化趨勢：隨著 CSS 標準化進展（截至 2025 年），許多屬性已無需前綴字，但仍需關注新功能或舊版瀏覽器（例如 IE）。
JavaScript 動態樣式：當用 JavaScript 設定 CSS 時，記得將屬性名稱轉為駝峰式（例如 border-radius 變成 borderRadius）。
測試相容性：在開發時，使用 BrowserStack 或 Chrome DevTools 的設備模擬器測試不同瀏覽器。

總結表格

前綴字	瀏覽器	範例屬性
-webkit-	Chrome、Safari、Edge	-webkit-transform
-moz-	Firefox	-moz-border-radius
-ms-	Internet Explorer	-ms-flex
-o-	Opera（舊版）	-o-animation

為什麼需要 CSS 前綴字？​

常見需要前綴字的 CSS 屬性​

在 JavaScript 中處理 CSS 前綴字​

範例：動態設定 CSS Transform 屬性​

如何減少手動處理前綴字的麻煩？​

注意事項​

總結表格​