CSS At 規則

前言

CSS 的語法中有一個特殊的存在——At 規則，這個規則就喜歡和別人長得不一樣，所以拉出來單獨一篇介紹一下。

什麼是 At 規則

At 規則是用來告訴 CSS 應該怎麼工作的語法，以 at 符號（@）開頭。

常見的 At 規則

At 規則有將近 20 個，但是大多都用不太到，除非是打算玩轉 CSS，否則我覺得了解一些常用的就可以了。

import

@import "other.css";
@import url("other.css");

就像上面程式那樣，@import 用在將樣式表嵌入到樣式表中。需要在被嵌入的樣式表頂部定義，且要早於在除了 @charset 和 @layer 外聲明，否則會被忽略。

@import url;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) supports(supports-condition);
@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;
@import url supports(supports-condition);
@import url supports(supports-condition) list-of-media-queries;
@import url list-of-media-queries;

這個是 MDN 給的語法，看起來好像很複雜，我一開始看到的時候也是一臉的問號，但是其實很簡單的，接下來先來拆解、解釋一下，將每一種語法以空格做拆分，可以發現每一種語法都有大於等於二的東西在裡面。

第一個東西不用說，就是告訴 CSS 這是什麼 At 規則。第二個就是要嵌入的樣式表路徑，而路徑有兩種寫法，這兩種都是官方允許的：

1. "路徑"
2. url("路徑")

至於後面那些東西，其實就是條件，沒有就代表直接嵌入，所有情況都適用，有的話就代表只有在符合這些條件之後才適用。不過其實我自己只有用到最基本的，其它的還沒有使用過。

keyframes

/* 寫法一 */
@keyframes slidein {
    from {
        transform: translateX(0%);
    }
 
    to {
        transform: translateX(100%);
    }
}
 
/* 寫法二 */
@keyframes slidein {
    0% {
        transform: translateX(0%);
    }
 
    100% {
        transform: translateX(100%);
    }
}

@keyframes 是要玩 CSS 動畫一定要會的 At 規則，它通過定義動畫序列中關鍵幀（Keyframes）或航點（Waypoints）的樣式來控制 CSS 動畫。

如上範例程式所示，要為動畫設定一個名字，並將想要的動畫用大括號包起來。它可以有下面的寫法（常見的）：

• 使用 from 和 to

  轉換為百分比就是從 0% 到 100%。

• 使用百分比

  動畫序列中應出現指定關鍵幀的時間百分比。

在使用百分比時，如果不小心定義了重複的關鍵幀怎麼辦？例如說：

@keyframes uselessAnimation {
    0% {
        top: 0;
        left: 0;
    }
 
    50% {
        top: 50px;
        left: 50px;
    }
 
    50% {
        top: 30px;
    }
 
    100% {
        top: 100px;
        left: 100px;
    }
}

這個範例程式，50% 的關鍵幀被定義了兩次，CSS 會用聯集處理，如果遇到了重複的屬性，會用後面那個覆蓋前面的那個，保留最新的。也就是說，這個程式會變成這樣：

@keyframes uselessAnimation {
    0% {
        top: 0;
        left: 0;
    }
 
    50% {
        top: 30px;
        left: 50px;
    }
 
    100% {
        top: 100px;
        left: 100px;
    }
}

media

p {
    color: #1f1f1f; /* 黑色 */
}
 
/* Mobile */
@media (max-width: 480px) {
  p {
    color: #155896; /* 藍色 */
  }
}
 
/* Tablet */
@media (min-width: 481px) and (max-width: 760px) {
  p {
    color: #317553; /* 綠色 */
  }
}
 
/* Large tablet */
@media (min-width: 761px) and (max-width: 1440px) {
  p {
    color: #a1414c; /* 紅色 */
  }
}
 
/* Desktop */
@media (min-width: 1441px) {
  p {
    color: #483D8B; /* 紫色 */
  }
}

@media 用在根據一個或多個媒體查詢的結果應用到樣式表。在網站開發，有一項技術叫做響應式設計¹，@media 就是其中一種實現方法。

它的語法是這樣的：

@media 媒體類型 and (條件) {
    /* 樣式規則 */
}

• 媒體類型（Media Types）

  媒體類型分為三種：

  類型	說明
  all（預設）	適用於所有設備。
  print	適用於在列印預覽模式下在螢幕上查看的分頁材料和文件。
  screen	主要用於螢幕。

  如果沒有使用邏輯運算符 not 或 only，且媒體類型是 all，媒體類型可省略不寫。

• 媒體功能（Media Features）

  媒體功能描述使用者代理、輸出設備或環境的特定特徵。媒體要素表達式測試其存在或值，並且完全是可選的。每個媒體要素表達式必須用括弧括起來。

  這個太多了，我就列幾個常用的，如果想要了解還有哪些，可以看看這篇。

  類型	說明
  width	可視區域的寬度（包含滾動條的寬度）。
  height	可視區域的高度。
  orientation	可視區域的方向。值可以是 portrait（高度大於等於寬度）或 landscape（寬度大於高度）。
  prefers-color-scheme	檢測使用者是喜歡淺色還是深色的配色方案。值可以是 dark 或 light。

• 邏輯運算符（Logical Operators）

  用於編寫複雜的媒體查詢。

  項目	說明
  and	用於將多個媒體功能組合到單個媒體查詢中，要求每個連結功能返回 true。它還用於將媒體功能與媒體類型連結。
  not	如果存在於逗號分隔的查詢清單中，則它只會否定應用它的特定查詢。如果使用 not 運算符，則還必須指定媒體類型。
  only	僅當整個查詢匹配時才應用樣式。它可用於防止較舊的瀏覽器應用選定的樣式。
  ,	逗號用於將多個媒體查詢合併到一個規則中。逗號分隔清單中的每個查詢都與其他查詢分開處理，所以如果清單中的任何查詢條件是 true ，則整個媒體語句將返回 true 。換句話說，清單的行為類似於 or。
  or	等同於 , 運算子。

這邊有一個範例，可以看一下。

charset

@charset "utf-8";

@charset 指定樣式表中使用的字元編碼，它其實是個被棄用但是所有瀏覽器都完全支援的遺留規則，在一些情況還是很好用的。

對於某些 CSS 屬性這個規則很有用，例如說有一個屬性叫 content，它的值就有可能是中文或是特殊字元，在某些時候可能會有問題，加了這個規則就沒問題了。

這個規則的值必須是 IANA編碼表中有的。

結語

這篇就介紹這四個規則就好了，下一篇講一下 CSS 中特異性（就是優先級）的概念，畢竟認識 CSS 已經有提到了，就稍微講一下。

參考資料

1. At-rules - CSS: Cascading Style Sheets | MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule