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

jimojianghu發表於2023-02-03
CSS

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宣告，則只有第一個會生效。

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

  1. 檔案的編碼格式；
  2. http請求響應中的charset屬性值；
  3. @charset；
  4. link設定；
  5. 預設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)) {
}

其他

  • @namespace：是用來定義使用在 CSS 樣式表中的 XML 名稱空間的 @規則。定義的名稱空間可以把通配、元素和屬性選擇器限制在指定名稱空間裡的元素。
  • @page：主要用於列印檔案時修改某些CSS屬性，相容性不高。
  • counter-style：定義如何把一個計數器的值轉化為字串表示。

相關文章