CSS @property 自訂屬性值

CSS 的 @property 可以讓使用者「自訂屬性值」的 At 規則，使用方式跟「CSS 變數」非常類似，定義屬性值之後，就能在任何地方使用這個屬性值，這篇教學會介紹 CSS 的 @property 自訂屬性，最後還會利用 @property 製作漸層色動畫。

快速導覽：

• 宣告自訂屬性值
• 使用自訂屬性值
• 全域、區域自訂屬性值
• HTML 行內自訂屬性值
• 搭配 CSS media Queries
• 使用 JavaScript 操控
• 使用 @property 製作漸層色動畫

@property 自訂屬性值

CSS 自訂屬性值需要使用 @property 規則進行定義，包含定義名稱、句法、繼承和屬性值，撰寫語法如下：

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

語法中包含了下列幾個屬性：

• --property-name 屬性名稱

  • 使用「兩個破折號 --」開頭，後方連接「名稱」。
  • 使用「英文字母大小寫、數字、破折號和底線符號」，且開頭需為英文。
  • 名稱區分大小寫，例如 --apple 和 --Apple 會被視為兩個不同的屬性。

• syntax 句法：只能接受什麼數值 ( 詳細參考 MDN syntax )：

  句法名稱	說明	-	句法名稱	說明
  <angle>	角度	-	<angle>	角度
  <color>	顏色	-	<custom-ident>	自訂標誌
  <image>	圖片	-	<integer>	整數
  <length>	長度	-	<length-percentage>	長度百分比
  <number>	數字	-	<percentage>	百分比
  <resolution>	解析度	-	<string>	字串
  <time>	時間	-	<transform-function>	轉換函式
  <transform-list>	轉換清單	-	<url>	網址

• inherits 繼承：數值為 true 或 false ( 小寫 )，如果子元素也有使用同樣的自訂屬性，則會取代子元素的自訂屬性。

• initial-value 預設值。

下方的範例將會訂一個名為 --oxxo 的屬性值，這個屬性值是顏色性質，有繼承特性，預設值為紅色。

@property --oxxo {
  syntax: "<color>";
  inherits: true;
  initial-value: red;
}

使用自訂屬性值

自訂屬性之後，只在需要在特定的樣式屬性裡裡，使用「var()」函式讀取自訂的屬性值，就會自動將自訂屬性值帶入到樣式屬性中，作法和變數幾乎一模一樣。下方範例使用兩組自訂屬性，分別是 --apple 和 --banana，由於 --banana 設定為不會繼承，當父元素的自訂屬性變更屬性值時，子元素仍然會保持原本的屬性值。

線上展示：https://codepen.io/oxxo/pen/OPLNYvz

<!-- HTML 程式碼 -->
<h3 class="a">hello <span>apple ( 子元素維持父元素顏色 )<span></h3>
<h3 class="b">hello <span>banana ( 子元素一直保持藍色 )<span></h3>

<!-- CSS 程式碼 -->
<style>
  /* 自訂屬性值 --apple */
  @property --apple {
    syntax: "<color>";
    inherits: true;
    initial-value: blue;
  }
  /* 自訂屬性值 --banana */
  @property --banana {
    syntax: "<color>";
    inherits: false;
    initial-value: blue;
  }
  .a {color: var(--apple);}       /* 父元素使用自訂屬性值 */
  .b {color: var(--banana);}      /* 父元素使用自訂屬性值 */
  .a span {color: var(--apple);}  /* 子元素使用自訂屬性值 */
  .b span {color: var(--banana);} /* 子元素使用自訂屬性值 */
  h3 {
    --apple: red;      /* 修改父元素屬性值 */
    --banana: red;     /* 修改父元素屬性值 */
  }
  h3:hover {
    --apple: green;    /* 修改父元素屬性值 */
    --banana: green;   /* 修改父元素屬性值 */
  }
</style>

全域、區域自訂屬性值

「全域自訂屬性值」表示「所有元素都能使用的自訂屬性值」，如果要宣告全域自訂屬性值，通常會將自訂屬性值寫在 :root 裡，或寫在 html 或 body 元素裡，而「區域自訂屬性值」表示「某個元素裡才能使用的自訂屬性值」，由於定義在指定元素內，不屬於這個元素的子元素 ( 兄弟元素或父元素 ) 就無法使用。

下方範例會使用 :root 使用全域自訂屬性，在 h2 和 h3 裡使用區域自訂屬性。

線上展示：https://codepen.io/oxxo/pen/QwLNRmV

<!-- HTML 程式碼 -->
<h2 class="a">hello <span>apple ( 子元素藍色 )<span></h2>
<h3 class="b">hello <span>banana ( 子元素綠色 )<span></h3>


<!-- CSS 程式碼 -->
<style>
  @property --apple {
    syntax: "<color>";
    inherits: true;
    initial-value: blue;
  }
  @property --banana {
    syntax: "<color>";
    inherits: true;
    initial-value: blue;
  }
  /* 全域、區域自訂屬性值 */
  :root {--apple: red;}
  h2 {--banana: blue;}
  h3 {--banana: green;}

  .a {color: var(--apple);}
  .b {color: var(--apple);}
  .a span {color: var(--banana);}
  .b span {color: var(--banana);}
</style>

HTML 行內 CSS 自訂屬性值

CSS 的自訂屬性值除了寫在 CSS 的檔案裡，也可以寫在 HTML 標籤行內，寫在行內的屬性值因為最靠近要套用的元素，所以基本上一定會覆蓋之前的自訂屬性值 ( 權重最大 )，下方的範例執行後，就會按照行內定義的自訂屬性值，將文字變成綠色。

線上展示：https://codepen.io/oxxo/pen/qEWZGYb

<!-- HTML 程式碼 -->
<h3 class="a">hello 
  <span style="--banana: blue;">apple ( 子元素藍色 )<span>
</h3>
<h3 class="b">hello 
  <span>banana ( 子元素綠色 )<span>
</h3>

<!-- CSS 程式碼 -->
<style>
  @property --apple {
    syntax: "<color>";
    inherits: true;
    initial-value: blue;
  }
  @property --banana {
    syntax: "<color>";
    inherits: true;
    initial-value: blue;
  }

  /* 雖然使用了自訂屬性值，但因為行內自訂屬性值最接近套用的元素，所以會以行內為主 */
  h3, h3 span {
    --apple: red;
    --banana: green;
  }
  .a {color: var(--apple);}
  .b {color: var(--apple);}
  .a span {color: var(--banana);}
  .b span {color: var(--banana);}
</style>

搭配 CSS media Queries

CSS 的自訂屬性值也可以搭配 media Queries，在不同 media 顯示尺寸之下，一次性的設定各種屬性值，避免不斷重複輸入，下方的範例執行後，當網頁寬度小於 400px，會呈現父元素紅色子元素綠色的樣貌，當寬度大於 400px 就會全部變成藍色。

線上展示：https://codepen.io/oxxo/pen/GgKZadv

<!-- HTML 程式碼 -->
<h3 class="a">hello <span>apple ( 瀏覽寬度大於 400 全藍 )<span></h3>
<h3 class="b">hello <span>banana ( 瀏覽寬度大於 400 全藍 )<span></h3>

<!-- CSS 程式碼 -->
<style>
  @property --apple {
    syntax: "<color>";
    inherits: true;
    initial-value: blue;
  }
  @property --banana {
    syntax: "<color>";
    inherits: true;
    initial-value: blue;
  }

  @media (max-width:400px){
    :root{
      --apple: red;
      --banana: green;
    }
  }
  .a {color: var(--apple);}
  .b {color: var(--apple);}
  .a span {color: var(--banana);}
  .b span {color: var(--banana);}
</style>

使用 JavaScript 操控

如果運用 JavaScript 將寫入元素行內屬性的方法，就能利用行內的 CSS 自訂屬性值控制樣式，寫入方法有下面幾種：

• window.CSS.registerProperty：替整個網頁註冊某個屬性。
• 元素.style.getPropertyValue：讀取某個屬性。
• 元素.style.setProperty：設定某個屬性。
• 元素.style.cssText：覆寫整個 style 屬性。
• 元素.setAttribute：覆寫整個 style 屬性。

舉例來說，假設已經在 :root 設定變數數值，仍然可以使用 JavaScript 在元素裡添加行內變數，下方的範例執行後，會透過 JavaScript 註冊一個名為 --oxxo 的自訂屬性值，這時就能在 CSS 中讀取並使用這個屬性值，接著透過 JavaScript 設定特定元素的屬性值，就能產生不同顏色的效果。

線上展示：https://codepen.io/oxxo/pen/ByBKexY

<!-- HTML 程式碼 -->  
<h3 class="a">hello <span>apple<span></h3>
<h3 class="b">hello <span>banana<span></h3>

<!-- CSS 程式碼 -->
<style>
  @property --apple {
    syntax: "<color>";
    inherits: true;
    initial-value: blue;
  }
  @property --banana {
    syntax: "<color>";
    inherits: true;
    initial-value: blue;
  }
  :root{
    --apple: red;
    --banana: green;
  }
  h3 {
    background: var(--oxxo);
  }
  .a {color: var(--apple);}
  .b {color: var(--apple);}
  .a span {color: var(--banana);}
  .b span {color: var(--banana);}
</style>

<!-- JS 程式碼 -->
<script>
  window.CSS.registerProperty({
    name: "--oxxo",
    syntax: "<color>",
    inherits: false,
    initialValue: "#ccc",
  });

  const apple = document.querySelector('.a');
  apple.style.setProperty('--apple','#900');
  apple.style.setProperty('--banana','yellow');

  const banana = document.querySelector('.b');
  banana.style.setProperty('--apple','black');
  banana.style.setProperty('--banana','white');
</script>

使用 @property 製作漸層色動畫

漸層色本身無法使用動畫效果，但透過 @property 的輔助，也可以實現漸層色動畫效果，下方範例會建立三個自訂屬性值 --c1、--c2 和 --p，透過這三個屬性值建立漸層色背景，當滑鼠移動到元素上方時改變屬性值，就能實現漸層色動畫效果。

• 注意，使用 transition 需要額外針對自訂屬性撰寫對應的屬性值。
• 參考：CSS 漸層色、轉場 transition

線上展示：https://codepen.io/oxxo/pen/ByBwNmx

<!-- HTML 程式碼 -->  
<h1>oxxo</h1>

<!-- CSS 程式碼 -->
<style>
  /* 顏色自訂屬性 */
  @property --c1 {
    syntax: "<color>";
    inherits: true;
    initial-value: red;
  }
  /* 顏色自訂屬性 */
  @property --c2 {
    syntax: "<color>";
    inherits: true;
    initial-value: yellow;
  }
  /* 長度百分比自訂屬性 */
  @property --p {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0%;
  }
  h1 {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    color: red;
    text-align: center;
    font-size: 50px;
    line-height: 200px;
    transition: all .5s, 
                --c1 .5s, 
                --c2 .5s, 
                --p .5s;  /* 轉場效果需要額外針對屬性撰寫 */
    background: linear-gradient(var(--c1) 0%, 
                                var(--c1) var(--p), 
                                var(--c2) var(--p), 
                                var(--c2) 100%);
  }
  h1:hover{
      color: blue;
      --c1: cyan;    /* 改變屬性值 */
      --c2: green;   /* 改變屬性值 */
      --p: 100%;     /* 改變屬性值 */
  }
</style>

小結

CSS 自訂屬性值和 CSS 變數在用法上大同小異，都可以讓 CSS 的文件更為彈性好管理，如果自己網頁中有許多重複的屬性值，不妨可透過 CSS 自訂屬性值改善程式碼架構，如此也更能提高網頁執行的效率。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～