CSS3 受到廣泛的應用，其中變量也是一個很有用的功能。但是，就像許多其他 CSS3 功能一樣，變量在不同的瀏覽器上可能會有兼容性問題。

IE11 及更早版本的瀏覽器不支持 CSS3 變量，而安卓和蘋果移動設備上的一些瀏覽器也可能存在兼容性問題。為了確保您的網站在所有設備上都能正確使用 CSS3 變量，您可以采取以下措施：

:root {
--primary-color: #8a2be2;
}
/* 定義顏色變量 */
h1 {
color: var(--primary-color);
}
/* 使用顏色變量 */
h2 {
color: #8a2be2;
}
/*備用樣式*/

這段代碼首先定義了一個名為“primary-color”的變量，然后將其應用于 h1 元素。如果瀏覽器支持 CSS3 變量，那么 h1 元素應該顯示為指定的顏色。否則，備用樣式將被應用，使 h1 元素顯示為備選顏色。

請注意“:root”選擇器。這表示變量是全局的，并可以在整個文檔中使用。定義變量的位置很重要，因為變量必須在使用它的樣式規則之前定義。否則，變量將無法識別。

在一些較老的瀏覽器中，預處理器比如 Sass 可以提供類似變量的功能，但它們并不是真正的 CSS3 變量。優點是它們可以舍棄使用備用樣式的需要，因為預處理器會自動編譯 CSS。

CSS3 變量正在逐漸成為 Web 開發者的主流工具之一，因為它可以使代碼更易讀、易維護并且減少了混淆的樣式代碼。隨著 CSS3 標準不斷發展更新，變量也將變得更強大并且更易使用。