16 個 CSS @ 規則，一網打盡！

隨著前端開發的不斷發展，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 則定義了媒體的一些特性，如 、 min-width 等。

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

套用場景 ：

1. 響應式布局 ：隨著行動裝置的普及，越來越多的網站需要能夠在不同大小的螢幕上都有良好的顯示效果。使用 @media ，可以根據螢幕的大小來調整布局、字型大小、圖片大小等，以實作響應式布局。

2. 適配不同裝置 ：不同的裝置可能有不同的顯示特性，如電視、投影機等可能有較高的分辨率，而手機、平板等則可能螢幕較小。使用 @media ，可以針對這些裝置的特性來套用不同的樣式，以確保網站在這些裝置上都能正常顯示。

3. 打印樣式 ：在打印網頁時，可能希望使用與螢幕顯示不同的樣式，如去掉背景圖片、減小字型大小等。透過 @media print ，可以定義只在打印時套用的樣式規則。

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

/* 預設樣式，適用於所有裝置 */
body{
background-color:lightgray;
font-size:16px;
}
/* 當螢幕寬度小於 600px 時套用的樣式 */
@media screen and(:599px){
body{
background-color:pink;
font-size:14px;
}
}
/* 當螢幕寬度在 600px 到 900px 之間時套用的樣式 */
@media screen and(min-width:600px)and(: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 允許開發者根據容器（而非視口或螢幕）的尺寸變化來設定內部元素的樣式。這種機制被稱為「容器查詢」，它使得開發者能夠更精細地控制頁面布局，特別是當頁面內部元素的尺寸變化時。

基本用法 ：

1. 首先，需要定義一個容器元素，例如 <div> ，並為其指定一個唯一的名稱或識別元。

2. 然後，使用 @container 規則來定義當容器尺寸變化時應該如何調整內部元素的樣式。

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

.container{
container-name: myContainer;/* 為容器指定名稱 */
}
@container myContainer (: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(:768px);。


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

另外，關於 @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:1fr1fr;/* 如果支持 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

@c ounter- 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{
red0%;
orange50%;
yellow100%;
}
}


這裏定義了一個從紅色漸變到橙色，再到黃色的配色方案。然後，在 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 特性。

往期推薦