最近，Chrome團隊發布了對一個新的CSS規范的實驗性支持，即樣式查詢。簡而言之，它讓我們查詢容器的樣式，而不是只查詢尺寸。在查詢容器尺寸不夠的情況下，這可能很有幫助。
CSS 容器查詢
介紹樣式查詢之前，我們先來回顧容器查詢。
CSS 容器查詢（Container Queries）是一項新的 CSS 功能，允許開發人員根據元素的大小來應用樣式。這意味著，開發人員可以為不同大小的設備或瀏覽器窗口應用不同的樣式，而無需使用媒體查詢或使用 JavaScript 來檢測設備大小。
我們來看看一個例子：
.o-grid__item {
container-type: inline-size;
}
.c-article {
/* The default style */
}
@container (min-width: 400px) {
.c-article {
/* The styles that will make the article horizontal**
** instead of a card style.. */
}
}首先，我們需要在定義 container-type?。然后，使用 @container開始查詢。一旦滿足了這個條件，CSS將應用于該容器內的組件。
樣式查詢
簡單地說，樣式查詢讓我們查詢一個容器的CSS屬性或CSS變量。
樣式查詢仍然是試驗性的，目前只在Chrome Canary中實現。要測試它們，請進入chrome://flags并激活 "Experimental Web Platform features"的切換。
例如，我們可以檢查容器是否有 display: flex，并在此基礎上為子元素設計樣式。
.page-header {
display: flex;
}
@container style(display: flex) {
.page-header__start {
flex: 1;
display: flex;
align-items: center;
border-right: 1px solid lightgrey;
}
}理想情況下，上述做法應該是可行的，但目前Chrome Canary中的樣式查詢原型僅局限于CSS變量。樣式查詢預計將在Chrome M111中出現。
現在，我們可以檢查變量--boxed: true是否被添加到容器中，如果是，我們可以在此基礎上改變子元素的樣式。
請看下圖:
請注意，容器查詢和樣式查詢的主要區別在于，前者是針對大小的查詢，后者是針對樣式的查詢。
.card-container {
--boxed: true;
}
@container style(--boxed: true) {
.card {
/* boxed styles */
}
}問題
在探討我們可以在哪里使用樣式查詢之前，我們先來回答大家常見的一個問題：樣式查詢能解決什么問題？容器查詢還不夠嗎？
這是一個好問題。在容器查詢中，我們可以根據一個組件的父級寬度來控制它的樣式，這非常有用。不過，在某些情況下，我們可能不需要查詢尺寸，而是想查詢一個容器的計算樣式。
為了讓你有更好的了解，請看下圖：
這是一篇來自CMS的文章正文。我們有一個默認的圖片樣式和另一個看起來有特色的樣式。
下面是對應的代碼：
<figure>
<img src="cheesecake.jpg" alt="" />
<figcaption>....</figcaption>
</figure>
figcaption {
font-size: 13px;
padding: 4px 8px;
background: lightgrey;
}當我們開始對特色的進行造型時，我們需要覆蓋上述內容，并有一個CSS類，我們可以用它進行造型。
.featured-figure {
display: flex;
flex-wrap: wrap;
}
.featured-figure figcaption {
font-size: 16px;
padding: 16px;
border-left: 3px solid;
margin-left: -6rem;
align-self: center;
}當我們開始為突出顯示的元素添加樣式時，我們需要覆蓋上述樣式并定義一個 CSS 類，以便可以對其進行樣式設置。
.featured-figure {
display: flex;
flex-wrap: wrap;
}
.featured-figure figcaption {
font-size: 16px;
padding: 16px;
border-left: 3px solid;
margin-left: -6rem;
align-self: center;
}很酷，這個方法行。我們能不能做得更好？是的！使用樣式查詢，我們可以在 figure 中添加 display: flex? 或一個 CSS 變量 --featured: true，然后基于這個進行樣式設置。
<figure>
<img src="cheesecake.jpg" alt="" />
<figcaption>....</figcaption>
</figure>
figure {
container-name: figure;
--featured: true;
}
/* Featured figure style. */
@container figure style(--featured: true) {
img {
/* Custom styling */
}
figcaption {
/* Custom styling */
}
}如果 --featured: true? 不存在，我們將默認使用基本 figure 設計。我們可以使用 not? 關鍵字來檢查 figure 是否沒有 display: flex。
/* Default figure style. */
@container figure not style(--featured: true) {
figcaption {
/* Custom styling */
}
}
要知道的幾個細節默認情況下，每個元素都是樣式容器
所以根本不需要定義一個樣式容器。默認情況下，它就在那里。
我們不能用類名來解決這個問題嗎？
是的，我們可以。使用樣式查詢的目的是使 CSS 更易讀并更容易修改。上述邏輯可以作為一個組件 CSS 寫出，而無需將所有這些樣式添加到條件類中。
事例：https://codepen.io/shadeed/pen/ZERZxzG/a583817975bae6b78308acb6939a9a54?editors=1100
減少 CSS 特定性問題
我喜歡使用樣式查詢的原因是，它將減少 CSS 特定性，因為我們將不太依賴 CSS 變化類或 HTML 數據屬性來對組件變化進行樣式設置。
在下面的 CSS 中，我們為 section 添加了基本樣式。沒有什么特別的。
.section {
background-color: lightgrey;
}
.section__title,
.section__desc {
color: #222;
}我們需要一種方法來為它設置不同的主題，因此我們使用了變化類。
.section--dark {
background-color: #222;
}
.section--dark .section__title,
.section--dark .section__desc {
color: #fff;
}使用樣式查詢，我們可以在 .section 組件周圍使用容器，然后在不在 CSS 中創建更多特定性的情況下為標題和描述打標簽。
@container style(--theme: dark) {
.section {
background-color: #222;
}
.section__title,
.section__desc {
color: #fff;
}
}這看起來干凈多了。
接下來，我們探索幾種樣式查詢可能有幫助的使用情況。
使用情況和示例
基于上下文的樣式設置
這是一種常見的使用情況，在同一包裝器中我們使用了相同的組件但用法不同。在右側，我們有一個文章組件，可能包含一個數字或不包含。
目前，我們可能會使用一個新的 CSS 類來解決樣式設置問題，或者可能在文章組件本身上使用變化類。
.most-popular {
counter-reset: list;
}
.most-popular article {
/* custom styling */
}或者我們可能在 HTML 中使用 data 屬性。
.most-popular[data-counter="true"] {
counter-reset: list;
}
.most-popular[data-counter="true"] .article {
/* custom styling */
}使用 CSS 樣式查詢，我們可以在父元素中添加一個 CSS 變量，并根據此對文章進行樣式設置。看看這個：
.most-popular {
--counter: true;
}
@container style(--counter: true) {
.articles-list {
counter-reset: list;
}
.article {
display: flex;
align-items: flex-start;
}
.article:before {
counter-increment: list;
content: counter(list);
}
}我們甚至不需要在文章組件上使用變化類。也不需要使用 CSS 嵌套。
示例：https://codepen.io/shadeed/pen/LYBYYWP/b53e0baa891dc48b0689e1f926f89b96?editors=1100
組件級的主題切換
我們構建的一些組件根據特定條件需要使用不同的主題。在下面的示例中，我們有一個包含不同統計組件的儀表板。
基于包裝器，我們需要切換組件的主題。
目前，我們可以使用特殊類根據它們的容器為自定義統計組件添加樣式。
.special-wrapper .stat {
background-color: #122c46;
}
.special-wrapper .stat__icon {
background-color: #2e547a;
}
.special-wrapper .stat__title {
background-color: #b3cde7;
}上面的做法一點也沒有錯，也不壞，但因為我們嵌套了CSS，所以增加了特殊性。讓我們探討一下如何用樣式查詢來實現上述內容。
首先，我們需要在特殊包裝器上定義一個切換按鈕。然后，我們可以檢查該開關是否處于激活狀態，并對狀態組件進行相應的設計。
.special-wrapper {
--theme: dark;
container-name: stats;
}
@container stats style(--theme: dark) {
.stat {
/* Add the dark styles. */
}
}
在這種情況下，樣式查詢的有用之處在于，將上述樣式放在 CSS 中的一個地方是有意義的。
/* stat.css */
.stat {
/* default styling */
}
@container stats style(--theme: dark) {
.stat {
/* custom styling */
}
}
頭像組
在這個例子中，我們有一組用戶的頭像。我們需要根據在父代上設置的一個CSS變量，以不同的方式來布置它們。我從Atlassian設計系統中挑選了這個例子。
<div class="avatars-wrapper">
<div class="avatars-list">
<div class="avatar"></div>
<!-- more avatars -->
</div>
</div>
在CSS中，我給容器添加了一個名字，并定義了--appearance: default變量。
.avatars-wrapper {
container-name: avatars;
}
.avatars-list {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}有了這個，我們就可以使用樣式查詢來改變基于--appearance變量的布局。
@container avatars style(--appearance: stack) {
.avatar {
box-shadow: 0 0 0 2px #fff;
}
.avatar + .avatar {
margin-inline-start: -0.5rem;
}
}
@container avatars style(--appearance: grid) {
.avatars-list {
gap: 0.5rem;
max-width: 200px;
}
}地址：https://codepen.io/shadeed/pen/KKeYLXG/464bd92260d290df58e1387c71d1d30f?editors=1100
條件裝飾樣式
在某些情況下，我們可能需要根據文本元素在 HTML 中的位置為其添加條件裝飾樣式。
標題和段落下方有一個旋轉的背景效果。這是通過偽元素實現的：
<div class="content">
<h2><!-- Title here --></h2>
<p><!-- Description --></p>
</div>
要對它們進行樣式設置，我們可以使用 CSS 變量并檢查它是否已切換，然后相應地添加樣式。在示例中，:after? 偽元素被添加到 .content 容器的每個子元素。
.content {
--decorated: true;
}
@container style(--decorated: true) {
:after {
content: "";
position: absolute;
inset: 0;
background-color: var(--dec-color, green);
opacity: 0.1;
z-index: -1;
transform: rotate(-1.5deg);
}
}
地址：https://codepen.io/shadeed/pen/abKxgyW/a0e0639a118fac1b781a5de18c598789
RTL 樣式：卡片組件
寫 RTL 樣式時，第一步是在<html>?元素中添加 dir=rtl?。一旦添加，每個元素的 direction CSS 屬性都會變為 direction: rtl。
隨著邏輯屬性的興起，我們不需要完全重寫 CSS。考慮以下示例：
.item {
margin-inline-start: 1rem;
}對于從左到右的布局，上述內容將計算為 margin-left?。對于從右到左的布局，它將是 margin-right。很酷，對吧？但是我們仍然沒有檢查漸變方向的邏輯 CSS。
樣式查詢可以用于解決這個問題。考慮以下示例：
我們有一個組件，由兩個元素組成，這兩個元素都應根據文檔改變方向：
- 漸變：對于 LTR 布局，它從左到右。
- 箭頭方向：指向右邊。
上述內容無法使用邏輯 CSS 控制。目前，我們這樣做：
html[dir="rtl"] .card {
background: linear-gradient(to left, ...);
}
html[dir="rtl"] .card__cta {
transform: scaleX(-1);
}使用樣式查詢，我們可以查詢容器并檢查direction?是否等于 rtl，并根據此對樣式進行更改。
.card {
--bg-angle: to right;
background: linear-gradient(var(--bg-angle), #5521c3, #5893eb);
}
@container card style(direction: rtl) {
.card {
--bg-angle: to left;
}
.card__cta {
transform: scaleX(-1);
}
}請注意，樣式查詢的當前原型不支持 style() 查詢中的 CSS 屬性。因此，我在示例中使用了 CSS 變量。
新聞模塊
這是我在 bbc.com 上發現的真實問題。最初，我們有以下新聞組件。
根據其容器，樣式應略有改變。考慮以下圖：
注意組件現在有兩個修改：
這是 BBC.com 上 CSS 的樣式：
.media--padded {
background: #fff;
}
.media--padded .media__content {
padding: 0.75rem 0.75rem 3rem 0.75rem;
}我們如何通過樣式查詢來解決這個問題呢？很簡單，我們需要一種方法來告訴組件，如果你住在這個容器內，卡片的樣式應該被填充。
.special-container {
--card--padded: true;
}
@container style (--card-padded: true) {
.media {
background: #fff;
}
.media__content {
padding: 0.75rem 0.75rem 3rem 0.75rem;
}
}總結
CSS 樣式查詢是 CSS 的強大補充。我迫不及待地想看看社區中的其他人會用它們做什么。哦，我也忍不住想在 iShadeed 實驗室中為樣式查詢創建一個新目錄。
原文：https://ishadeed.com/article/css-container-style-queries/
