隨著前端開發的不斷發展，CSS 的功能日益強大，其中 @規則扮演著舉足輕重的角色。它們不僅擴展了 CSS 的功能邊界，還為開發者提供了更加靈活和高效的樣式定義方式，讓我們來一同探索這些強大而實用的 @ 規則吧！

@font-face

@font-face 用于使用自定義字體。它的基本用法包括定義一個字體家族并為這個家族指定一個或多個字體源文件。字體家族是為字體取的名字，而字體源文件則是字體的實際文件，可以通過 URL 指定。字體文件可以有多種格式，如 TrueType (.ttf)、OpenType (.otf)、Embedded OpenType (.eot)、SVG (.svg) 和 WOFF (.woff) 等。

例如，可以這樣使用 @font-face：

@font-face {  
  font-family: "MyCustomFont";  
  src: url("MyCustomFont.woff2") format("woff2"),  
       url("MyCustomFont.woff") format("woff");  
}

這里定義了一個名為 "MyCustomFont" 的字體家族，并指定了兩個字體源文件，一個是 WOFF 2 格式，另一個是 WOFF 格式。瀏覽器會首先嘗試加載 WOFF 2 格式的字體，如果不支持，則會嘗試加載 WOFF 格式的字體。

注意，雖然 @font-face 提供了很大的靈活性，但字體文件的體積可能非常大，而且需要額外的 HTTP 連接，這可能會降低網站頁面的加載速度。因此，在使用 @font-face 時，需要權衡其優點和可能帶來的性能問題。

@keyframes

@keyframes 是 CSS3 動畫中的一個關鍵特性，它允許定義動畫過程中一系列關鍵幀的狀態。通過這些關鍵幀，可以創建復雜的動畫效果，指定動畫在不同時間點的樣式。

@keyframes 規則由兩部分組成：名稱和一組 CSS 樣式規則。名稱是定義動畫的名稱，而 CSS 樣式規則描述了動畫在每個關鍵幀時的樣式。

下面是一個簡單的例子，創建一個從紅色漸變到藍色的動畫：

@keyframes color-change {  
  0% {  
    background-color: red;  
  }  
  50% {  
    background-color: yellow;  
  }  
  100% {  
    background-color: blue;  
  }  
}

其中，color-change 是動畫的名稱。0%、50% 和 100% 是關鍵幀，分別表示動畫的開始、中間和結束狀態。在每個關鍵幀中，定義了背景顏色。

要應用這個動畫到一個元素上，需要使用 animation 屬性，如下所示：

div {  
  width: 100px;  
  height: 100px;  
  animation-name: color-change;  
  animation-duration: 4s;  
  animation-iteration-count: infinite;  
}

這里將 color-change 動畫應用到了一個 div 元素上。animation-duration 屬性定義了動畫的持續時間，animation-iteration-count 屬性定義了動畫的迭代次數（infinite 表示無限次）。

這樣，div 元素的背景顏色就會從紅色漸變到藍色，然后再從藍色漸變回紅色，如此循環往復。

@page

@page 是 CSS3 中的一個規則，用于指定打印文檔時的頁面樣式。與屏幕顯示的樣式不同，@page 規則允許控制打印頁面的布局和外觀，例如頁面大小、邊距、頁眉、頁腳等。

可以使用 @page 規則為整個文檔或特定頁面設置樣式。例如，可以指定頁面大小、頁邊距的大小和方向，甚至可以添加背景圖像或顏色。這對于創建適合打印的文檔非常有用，因為打印輸出通常需要不同的樣式和布局來適應紙張的大小和方向。

下面是一個簡單的例子，用于設置頁面的大小和邊距：

@page {  
  size: A4; /* 設置頁面大小為 A4 */  
  margin: 2cm; /* 設置頁邊距為 2 厘米 */  
}

還可以使用 @page 偽類選擇器來為文檔中的不同頁面指定不同的樣式。例如，為第一頁設置特殊的樣式：

@page :first {  
  @top-left {  
    content: "前端充電寶"; /* 在第一頁的左上角添加標題 */  
  }  
  @bottom-right {  
    content: "頁碼 " counter(page); /* 在第一頁的右下角顯示頁碼 */  
  }  
}

注意，@page 規則僅適用于打印樣式表，并且不會影響屏幕顯示。這意味著當創建一個樣式表時，可能需要包含兩個不同的部分：一個用于屏幕顯示（使用媒體查詢 @media screen），另一個用于打印（使用媒體查詢 @media print）。

/* 屏幕顯示樣式 */  
@media screen {  
  /* ... */  
}  
  
/* 打印樣式 */  
@media print {  
  @page {  
    size: A4;  
    margin: 2cm;  
  }  
  /* ... */  
}

這樣，當打印文檔時，瀏覽器會應用打印樣式表，并使用 @page 規則來格式化頁面。

@media

@media 用于根據設備的媒體類型和特性應用不同的樣式規則，也就是我們常說的媒體查詢。它的基本語法如下：

@media mediatype and|not|only (media feature) { 
  /* ... */
}

其中mediatype是媒體類型，如screen、print等；media feature則定義了媒體的一些特性，如max-width、min-width等。

使用@media，可以針對不同的屏幕尺寸、設備類型等條件來應用不同的樣式，以實現響應式布局或適配不同設備的顯示效果。例如，可以設置當屏幕寬度小于600px時應用一套樣式，而當屏幕寬度大于900px時應用另一套樣式。

應用場景：

• 響應式布局：隨著移動設備的普及，越來越多的網站需要能夠在不同大小的屏幕上都有良好的顯示效果。使用@media，可以根據屏幕的大小來調整布局、字體大小、圖片大小等，以實現響應式布局。
• 適配不同設備：不同的設備可能有不同的顯示特性，如電視、投影儀等可能有較高的分辨率，而手機、平板等則可能屏幕較小。使用@media，可以針對這些設備的特性來應用不同的樣式，以確保網站在這些設備上都能正常顯示。
• 打印樣式：在打印網頁時，可能希望使用與屏幕顯示不同的樣式，如去掉背景圖片、減小字體大小等。通過@media print，可以定義只在打印時應用的樣式規則。

下面來看一個使用 @media 的例子：

/* 默認樣式，適用于所有設備 */  
body {  
  background-color: lightgray;  
  font-size: 16px;  
}  
  
/* 當屏幕寬度小于 600px 時應用的樣式 */  
@media screen and (max-width: 599px) {  
  body {  
    background-color: pink;  
    font-size: 14px;  
  }  
}  
  
/* 當屏幕寬度在 600px 到 900px 之間時應用的樣式 */  
@media screen and (min-width: 600px) and (max-width: 900px) {  
  body {  
    background-color: lightblue;  
    font-size: 18px;  
  }  
}  
  
/* 當屏幕寬度大于 900px 時應用的樣式 */  
@media screen and (min-width: 901px) {  
  body {  
    background-color: lightgreen;  
    font-size: 20px;  
  }  
}

在這個例子中，定義了幾個不同的 @media 查詢，每個查詢針對不同的屏幕尺寸應用不同的樣式。當瀏覽器加載這個 CSS 文件時，它會根據當前設備的屏幕尺寸來確定應用哪個樣式規則。

@layer

@layer 聲明了一個級聯層，同一層內的規則將級聯在一起，這給予了開發者對層疊機制的更多控制。

@layer default, theme, state;

@layer default {
  button {
    background: rebeccapurple;
    color: white;
  }    
}

@layer state {
  :disabled {
    background: dimgray;
  }    
}

@layer theme {
  button.danger {
    background: maroon;
  }

  button.info {
    background: darkslateblue;
  }

  #call-to-action {
    background: mediumvioletred;
  }
}

上面例子中定義了多個級聯層，當一個聲明中具有多個級聯層時，后定義的級聯層具有更高的優先級。因此上面例子中，state 層具有更高的優先級，即使 theme 樣式中具有更高的特定性（權重）并且在代碼中出現得更晚。

還可以嵌套圖層：

@layer reset, framework, components, utilities;

@layer components {
  @layer default, theme, state;

  @layer state {
    /* components.state 層 */
    :disabled { background: dimgray; }    
  }
}

@layer components.state {
  /* components.state 層 */
  :focus-visible { outline: thin dashed hotpink; }
}

層按照每個層名稱首次出現在代碼庫中的順序堆疊，后面的層名稱優先于前面的層。這意味著可以允許它們隱式堆疊：

@layer low { /* 最低層 */ }
@layer medium { /* 中間層 */ }
@layer high { /* 最高層 */ }

或者可以像上面例子一樣，按順序引入層名稱來明確定義層順序：

@layer low, medium, high;

@scope

@scope 規則允許明確地定義樣式的作用范圍，分為兩個部分。首先，通過選擇特定的根元素來定義范圍的邊界。

@scope (.block) { /* 這里的樣式僅適用于 .block 及其子元素 */  
  /* 樣式 */  
}

在這個范圍內，可以定義僅適用于該范圍的子選擇器，確保樣式不會泄漏到范圍外部：

@scope (.block) {  
  .element { /* 這里的樣式僅適用于 .block 內的 .element 元素 */  
    /* 樣式 */  
  }  
}

這與 CSS 嵌套的概念相似，但 @scope 提供了更明確的范圍定義。在嵌套中，每個嵌套選擇器前都可以有一個隱式的 &，代表父選擇器。但在 @scope 中，不需要使用 &，因為范圍已經通過 .block 明確定義了。 舉個例子，下面的嵌套 CSS 代碼：

.block {  
  &.active { /* 這里的 & 代表 .block，所以選擇的是 .block.active */  
    color: red;  
  }  
    
  .element { /* 選擇的是 .block .element */  
    background-color: yellow;  
  }  
}

使用 @scope 可以更簡潔地寫成：

@scope (.block) {  
  &.active {  
    color: red;  
  }  
    
  .element {  
    background-color: yellow;  
  }  
}

@scope 提供了一種更明確、更簡潔的方式來定義和限制 CSS 規則的作用范圍，從而減少了全局樣式沖突的可能性，并提高了代碼的可維護性。

@container

@container 允許開發者根據容器（而非視口或屏幕）的尺寸變化來設置內部元素的樣式。這種機制被稱為“容器查詢”，它使得開發者能夠更精細地控制頁面布局，特別是當頁面內部元素的尺寸變化時。

基本用法：

• 首先，需要定義一個容器元素，例如<div>，并為其指定一個唯一的名稱或標識符。
• 然后，使用@container規則來定義當容器尺寸變化時應該如何調整內部元素的樣式。

假設有一個名為.container的<div>元素，它內部有一個<p>元素。當.container的寬度小于800px時，改變<p>元素的字體顏色。可以這樣實現：

.container {  
  container-name: myContainer; /* 為容器指定名稱 */  
}  
  
@container myContainer (max-width: 800px) {  
  p {  
    color: gray; /* 當容器寬度小于800px時，<p>元素的字體顏色變為灰色 */  
  }  
}

@starting-style

@starting-style 用于在元素首次應用樣式或顯示類型從 "none" 更改為其他類型時啟動 CSS 過渡效果。這個規則使得開發者能夠創建更平滑的動畫效果，尤其是在元素從隱藏變為可見時。

@starting-style 的基本語法如下：

@starting-style {  
  /* 初始樣式 */  
}  
  
/* 常規樣式 */

當元素首次應用樣式時，它將從 @starting-style 定義的初始樣式開始過渡，到達在常規樣式定義中指定的樣式。

假設有一個 div 元素，希望在頁面加載時它從透明變為不透明，同時背景顏色從綠色過渡到橙色。可以這樣使用 @starting-style：

div {  
  transition: opacity 0.5s, background-color 0.5s;  
  opacity: 1;  
  background-color: lime;  
}  
  
@starting-style {  
  div {  
    opacity: 0;  
    background-color: green;  
  }  
}

在這個例子中，當 div 元素首次渲染時，它會從 opacity 為 0 和背景顏色為綠色的狀態開始，然后過渡到 opacity 為 1 和背景顏色為橙色的狀態。

@property

@property是CSS Houdini API的一部分。這個規則允許開發者顯式地定義CSS自定義屬性，并進行屬性類型檢查、設定默認值以及定義該自定義屬性是否可以被繼承。通過 @property，可以直接在樣式表中注冊自定義屬性，無需運行任何JavaScript代碼；同時，它也配備了相應的JavaScript語法來注冊自定義屬性。

@property自定義屬性可以看作是 CSS 變量聲明變量的升級版本，它提供了更加規范和嚴謹的方式來定義和使用自定義屬性。在CSS中使用自定義屬性，可以使樣式更加靈活和可維護，同時也能夠減少重復的代碼。

在定義一個@property時，需要指定自定義屬性的名稱、語法結構、初始值以及是否允許繼承等參數。例如，可以使用以下語法來定義一個名為--my-color的自定義屬性：

@property --my-color {  
  syntax: '<color>';  
  inherits: false;  
  initial-value: red;  
}

這里，--my-color是一個自定義屬性名稱，syntax指定了該屬性的語法結構為顏色值，inherits指定了該屬性不被繼承，initial-value指定了該屬性的初始值為紅色。定義了這個自定義屬性之后，就可以在CSS中使用它了：

.element {  
  --my-color: blue;  
  background-color: var(--my-color);  
}

在這個例子中，.my-element的背景顏色被設置為藍色，這是通過自定義屬性--my-color來實現的。同時，也可以使用JavaScript來動態地改變這個自定義屬性的值，從而改變元素的樣式。

@charset

@charset 用于定義樣式表中使用的字符編碼。這個規則必須寫在樣式表的最開頭，并且前面不可有別的字符，包括注釋。在@charset之后，需要指定字符編碼的名稱，例如：

@charset 'UTF-8';

這個規則的主要為了在 CSS 文件中明確指定字符編碼，以確保樣式表能夠正確解析和顯示。當CSS文檔沒有聲明字符編碼時，將使用HTML文檔聲明的字符編碼。如果兩者都沒有聲明，那么默認會使用“UTF-8”編碼。

@import

@import 用于從其他樣式表中導入樣式規則。這意味著可以將一個大的樣式表拆分成多個較小的文件，并使用@import規則將它們組合在一起。這有助于更好地組織和管理樣式表，特別是當項目變得龐大且復雜時。

@import規則的基本語法：

@import url('path/to/styles.css');

其中'path/to/styles.css'是要導入的外部樣式表的路徑。

還可以使用媒體查詢與@import結合，以便在不同條件下導入不同的樣式表。例如：

@import url('mobile.css') screen and (max-width: 768px);。

然而，需要注意的是，雖然@import提供了拆分和組織樣式表的便利，但過度使用它可能會導致性能問題。因為每個@import都會觸發一個新的HTTP請求，這可能會增加頁面加載時間。因此，在實際項目中，建議謹慎使用@import，并考慮使用其他技術（如CSS預處理器）來更好地管理和組織樣式表。

另外，關于@import的使用還有一些限制和注意事項：

• @import規則必須位于樣式表的頂部，位于所有其他規則之前（除了@charset規則之外）。
• @import不是一個嵌套語句，這意味著不能在條件組的規則或媒體查詢內部使用@import。

@namespace

@namespace 用于定義XML命名空間。它可以把通配、元素和屬性選擇器限制在指定命名空間里的元素。這在處理包含多個命名空間的文檔時非常有用，例如HTML5中的內聯 SVG、MathML 或者混合多個詞匯表的 XML。

@namespace規則也可以用來定義默認命名空間。當定義過默認命名空間后，所有的通配選擇器和類型選擇器（但不包括屬性選擇器）都只應用在這個命名空間的元素中。此外，@namespace規則還可以用于定義命名空間前綴，當一個通配、類型、屬性選擇器前面有命名空間前綴修飾時，這個選擇器將只匹配那些命名空間與元素名或屬性匹配的元素。

下面來在 CSS 中使用 @namespace 來為 SVG 元素定義樣式：

<!DOCTYPE html>  
<html>  
  <head>  
    <style>  
      /* 定義 SVG 命名空間 */  
      @namespace svg url(http://www.w3.org/2000/svg);  

      /* 為 SVG 命名空間中的元素定義樣式 */  
      svg|circle {  
        fill: blue;  
        stroke: pink;  
        stroke-width: 5;  
      }  
    </style>  
  </head>  
  <body>  

    <svg width="100" height="100">  
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />  
    </svg>  

  </body>  
</html>

在這個例子中，首先使用 @namespace 聲明了 SVG 的命名空間 URL。然后，使用命名空間前綴 svg| 來指定想要選擇的是 SVG 命名空間中的 circle 元素。這樣，fill、stroke 和 stroke-width 的樣式就只會應用到 SVG 命名空間中的 circle 元素，而不是 HTML 中的其他元素。

注意，在實際開發中，由于 HTML5 允許 SVG 直接嵌入而不需要顯式地聲明命名空間，因此在大多數情況下可能不需要使用 @namespace。

@supports

@supports 是 CSS3 引入的一個特性查詢規則，用于檢查瀏覽器是否支持某個 CSS 屬性或屬性值，然后根據檢查結果應用不同的樣式規則。如果瀏覽器支持指定的屬性或屬性值，那么就會應用相應的樣式；如果不支持，則不會應用。

@supports 的基本語法如下：

@supports (property: value) {  
  /* 如果瀏覽器支持 property: value，則應用這些樣式 */  
}

下面是一個使用 @supports 的例子，檢查瀏覽器是否支持 display: grid 屬性，并據此應用不同的布局樣式：

.container {  
  display: block; /* 默認布局 */  
}  
  
@supports (display: grid) {  
  .container {  
    display: grid;  
    grid-template-columns: 1fr 1fr; /* 如果支持 grid，則應用網格布局 */  
  }  
}

這里，如果瀏覽器支持 display: grid，.container 類將使用網格布局；否則，它將使用默認的塊級布局。

@supports 的主要應用場景是漸進增強和優雅降級。通過 @supports，可以編寫更靈活的 CSS，確保在不支持某些新特性的舊瀏覽器中仍然有可接受的樣式表現，而在支持這些特性的新瀏覽器中則能享受更先進的布局和功能。

@supports 還支持使用邏輯操作符 and、or 和 not 來組合多個條件，這使得特性查詢更加靈活。

@supports (display: flex) or (display: -webkit-flex) {  
  /* 如果瀏覽器支持 flex 或 -webkit-flex，則應用這些樣式 */  
}

在這個例子中，@supports 查詢會檢查瀏覽器是否支持標準的 display: flex 或者 WebKit 前綴的 display: -webkit-flex，如果滿足其中一個條件，就會應用內部的樣式規則。

@counter-style

@counter-style 允許定義如何將計數器的整數值轉化為字符串表示，從而自定義計數器的樣式。這個規則非常靈活，可以指定計數系統的類型、使用的符號、前綴、后綴等。

@counter-style 的基本語法如下：

@counter-style <counter-style-name> {  
  system: <countersystem>;  
  symbols: <countersymbols>;  
  /* 其他描述符，如 prefix, suffix, range, pad, speak-as, fallback 等 */  
}

其中 <counter-style-name> 是自定義計數器樣式的名稱，<countersystem> 指定了計數系統（如循環、數值、字母等），<countersymbols> 定義了一組用于表示計數器值的符號。

假設想要創建一個名為 "thumbs" 的計數器樣式，該樣式使用 Unicode 字符 "??" 和 "??" 作為計數符號，并且每兩個計數值循環一次。可以這樣定義：

@counter-style thumbs {  
  system: cyclic;  
  symbols: "??" "??";  
  suffix: " ";  
}  
  
/* 使用自定義的計數器樣式 */  
ol.thumbs-list {  
  list-style: thumbs;  
}

這里創建了一個名為 "thumbs" 的計數器樣式，它使用循環計數系統（system: cyclic），并且定義了兩個符號（"??" 和 "??"）。然后，將這個樣式應用到了一個有序列表（ol.thumbs-list）上，這樣列表項就會使用我們定義的 "thumbs" 樣式來顯示計數器。

@font-palette-values

@font-palette-values 用于定義指定字體的配色方案。這個規則允許開發者不僅可以選擇字體內置的各種配色方案，還可以自定義配色方案。通過 @font-palette-values 規則，開發者可以為特定的字體指定一組顏色，并在 CSS 中使用這些顏色來為網頁元素提供一致的配色。

基本語法如下：

@font-palette-values <font-family> {  
  <palette-name> {  
    <color-stop> <percentage>;  
    <color-stop> <percentage>;  
    /* ... */  
  }  
  /* 可以定義多個配色方案 */  
}

其中 <font-family> 是指定的字體家族名稱，<palette-name> 是自定義的配色方案名稱，<color-stop> 是顏色值，<percentage> 是該顏色在配色方案中的位置（百分比）。

例如，假設有一個名為 "MyCustomFont" 的字體，并想為它定義一個名為 "MyPalette" 的配色方案：

@font-palette-values MyCustomFont {  
  MyPalette {  
    red 0%;  
    orange 50%;  
    yellow 100%;  
  }  
}

這里定義了一個從紅色漸變到橙色，再到黃色的配色方案。然后，在 CSS 中，可以使用這個配色方案來為網頁元素設置顏色：

h1 {  
  font-family: MyCustomFont;  
  font-palette: MyPalette;  
}

注意，@font-palette-values 的支持和可用性可能取決于瀏覽器和字體文件本身，并非所有字體都支持自定義配色方案。

@font-feature-values

@font-feature-values 用于定義字體特性的替代值。這個規則允許開發者為特定的字體家族定義命名的特性值，然后在 font-variant-alternates 屬性中使用這些命名值來應用字體特性，從而簡化 CSS 的編寫。

這個規則的基本語法如下：

@font-feature-values <font-family-name> {  
  <feature-name> {  
    <feature-value-name>: <feature-value-index>;  
    /* ... */  
  }  
  /* 可以定義多個特性及其值 */  
}

其中 <font-family-name> 是想要應用特性值的字體家族名稱，<feature-name> 是字體特性（如 swash、styleset 等），<feature-value-name> 是為特性定義的名稱，而 <feature-value-index> 是該特性值在字體中的索引。

舉個例子，假設有一個名為 "FancyFont" 的字體，它支持 "swash" 特性，該特性有三個不同的樣式。可以使用 @font-feature-values 來定義這些樣式的命名值：

@font-feature-values FancyFont {  
  swash {  
    fancy-style: 1;  
    more-fancy-style: 2;  
    wild-style: 3;  
  }  
}

然后，在 CSS 中，可以使用這些命名值來應用 "swash" 特性的不同樣式：

p {  
  font-family: FancyFont;  
  font-variant-alternates: swash(fancy-style);  
}  
  
h1 {  
  font-family: FancyFont;  
  font-variant-alternates: swash(more-fancy-style);  
}

這樣，<p> 元素將使用 "fancy-style" 的 swash 特性，而 <h1> 元素將使用 "more-fancy-style" 的 swash 特性。