CSS-@規則(At-rules)常用語法使用總結

At-rules規則是目前CSS中一種常見的語法規則，它使用一個"@"符號加一個關鍵詞定義，後面跟上語法區塊，如果沒有則以分號結束即可。這種規則一般用於標識文檔、引入外部樣式、條件判斷等等，本文是對該規則的使用總結。常用規則 @import @import 主要用於從其他樣式表導入新的樣式規則， ...

At-rules規則是目前CSS中一種常見的語法規則，它使用一個"@"符號加一個關鍵詞定義，後面跟上語法區塊，如果沒有則以分號結束即可。
這種規則一般用於標識文檔、引入外部樣式、條件判斷等等，本文是對該規則的使用總結。

常用規則

@import

@import 主要用於從其他樣式表導入新的樣式規則，語法：@import url|string list-of-mediaqueries;。

url|string：需要引入的樣式資源路徑，相對路徑或絕對路徑都可以；
list-of-mediaqueries：逗號分隔的條件列表，判斷什麼條件下才引入該樣式資源，支持媒體查詢條件。

@import "./reset.css";
@import url("./reset.css")

當使用條件判斷時，可以使用媒體查詢條件。

/* 寬度小於1000px才會生效 */
@import "./reset.css" screen and (max-width: 1000px);

另外，當在html文件或樣式文件中使用該語法(不使用現代框架)，有兩點需要註意：

引入位置：必須位於樣式文件或<style>區塊的頭部，前面不可以出現其他css樣式，但可以在@charset 後面。
不能在條件嵌套語法中使用。

當使用vue等框架的時候，則可以在 @import 前出現css樣式，也能在條件嵌套語法中使用，是因為導入的樣式資源會被解析具體的樣式到頁面上。

@font-face

@font-face 用於載入自定義字體。屬於目前前端比較常用的語法，也有多開源的字體圖標庫可以使用。
既支持提供字體資源文件路徑進行載入，也支持用戶本地安裝的字體載入。

@font-face {
  font-family: "iconfont";
  src: url('https://at.alicdn.com/t/font_....ttf?t=1545807318834');
}
@font-face {
  font-family: "iconfont";
  src: url('./font_985780_km7mi63cihi.ttf?t=1545807318834');
}

如上，就是一個載入字體資源的示例，一個載入cdn上的地址，一個載入本地文件。

@font-face 定義了一個CSS區塊，有多個屬性取值：

font-family：指定字體名字，被用於font或font-family屬性；
src：載入字體資源；
1. url()：載入字體資源文件；
2. local()：載入本地電腦字體名稱，如 src: local("Arial");；
font-style：對src指定字體的描述；
font-variant
font-weight

@font-face {
  font-family: "sys-Arial";
  src: local("Arial");
  font-weight: normal;
}

如上，使用local載入當前電腦系統的字體名稱。

@charset

@charset 為樣式表文件指定所需要使用的字元編碼，只能在CSS文件中使用，語法：@charset "charset";。

charset：指定使用的字元集。

@charset "UTF-8";

特點：

在樣式表文件中使用，不能在html文件的<style>區塊或元素內樣式屬性中使用。
必須出現在樣式表文件的最前面。
使用有效的字元編碼和雙引號，並且中間只能間隔一個空格字元，且以分號結尾。
不能在條件嵌套語法中使用。
如果有多個@charset聲明，則只有第一個會生效。

瀏覽器解析樣式表文件使用字元編碼的順序：

文件的編碼格式；
http請求響應中的charset屬性值；
@charset；
link設置；
預設UTF-8；

@keyframes

@keyframes 通過定義動畫序列中的關鍵幀的樣式，用來控制CSS動畫的中間步驟。
語法定義：@keyframes animationname { keyframes-selector { css-styles; } }。

animationname：動畫名稱，作為動畫引用時的標識符；
keyframes-selector：關鍵幀的名稱選擇器，用於指定關鍵幀被用於動畫過程中的哪個節點，一般是時間節點，有兩種取值方式：
1. 百分比：0% - 100%，時間百分比的節點
2. from和to：from等同起始時間from，to等同結束時間
css-styles：指定當前關鍵幀的樣式屬性值。

@keyframes dropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes wave {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

如上，使用兩種方式定義的關鍵幀動畫樣式。

特性說明：

當沒有指定開始或結束狀態，則將元素的享有樣式作為開始或結束狀態；
當有多個同名稱的關鍵幀時，樣式屬性相同以最後一次為準，樣式屬性不同則會合併所有屬性共同起作用；
如果再關鍵幀樣式中使用不能用作動畫的屬性，會被忽略；
在關鍵幀中使用 !important 限定樣式會被忽略，不起作用。

為了獲得最佳動畫體驗，應該始終定義開始和結束狀態。

@media

@media 媒體查詢，是基於不同的媒體查詢結果定義不同的樣式。多用於針對不同屏幕尺寸進行差異化的樣式設置，做一些響應式頁面設計。另外，如果縮放瀏覽器的大小，也可以根據查詢寬高重新渲染頁面樣式等。

語法： @media mediatype and|not|only (media feature) { CSS-Style; }。

說明：

mediatype：媒體類型，描述設備類別，一般有 all、print、screen、speech，預設all：
- all：所有設備；
- print：列印預覽模式；
- screen：用於屏幕；
- speech：語音合成器；
媒體特性(media feature)：描述設備、環境的具體條件特征；必須使用括弧括起來，常用的有：
- 寬高類：width、max-width、min-width、height、max-height、min-height等；
- 其他：color、grid、orientation、resolution、scan等；
邏輯操作符：and、not、only、，：
- and：多個規則組合，每條都滿足才行；
- not：否定某個查詢規則；
- only：整個查詢匹配時才滿足；
- 逗號，：將多個查詢組合，一條滿足即可，類似 or;

@media screen (max-width: 1000px) { 
  div {
    background-color: red;
  }
}

/*或者嵌套*/
@media screen {
  @media (max-width: 1000px) {
    div {
      background-color: red;
    }
  }
}

如上示例，即是我們經常使用的方式。

@media 媒體查詢也能作為 @import 的條件使用，可見上面已有介紹。

link和style中使用

在引入樣式表的 <link> 語句中，也可以使用媒體查詢，根據不同的條件載入不同的樣式文件：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="./reset.css">

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="./reset.css">

在 <style> 樣式區塊也可以使用媒體查詢：

<style media="screen and (max-width: 1000px)">
  div {
    background-color: red;
  }
</style>

JS檢測媒體查詢

使用Window.matchMedia() 和MediaQueryList.addListener() 方法來測試和監控媒體狀態。
使用方式：

// 獲取媒體查詢MediaQueryList對象，有matches
const screenMediaQueryList = Window.matchMedia('(max-width: 1000px)')
console.log(1, screenMediaQueryList)
// matches: true  -- 當前媒體查詢規則已生效，為false則不生效
// media: "(max-width: 1000px)"

screenMediaQueryList.addEventListener('change', (res) => {
  console.log(2, res)
})

可以獲取當前是否已使用該媒體查詢規則，或者監聽媒體查詢狀態的變化事件。

非常用規則

以下是一些使用較少的@規則。

@supports

@supports 用於指定依賴於瀏覽器一個或多個特定CSS功能的支持申明。常用來判斷當前瀏覽器是否支持某個CSS特性功能，所以又被稱為特性查詢。
ie不支持。

如判斷自定義屬性，詳見自定義屬性知識介紹。

@supports ((--a: 0)) {
  /* 支持自定義屬性 */
}
@supports (not (--a: 0)) {
  /* 不支持自定義屬性 */
}

語法，由一組樣式聲明和一條支持條件構成，支持條件可以是多條，可以使用 and、or、not 等進行結合處理；還可以使用圓括弧調整優先順序。

/* 瀏覽器支持grid */
@supports (display: grid) {
  div {}
}

/* 不支持grid */
@supports not (display: grid) {
}

/* 不支持gri和flex */
@supports not ((display: grid) and (display: flex)) {
}