最近，Chrome團(tuán)隊(duì)發(fā)布了對一個(gè)新的CSS規(guī)范的實(shí)驗(yàn)性支持，即樣式查詢。簡而言之，它讓我們查詢?nèi)萜鞯臉邮?，而不是只查詢尺寸。在查詢?nèi)萜鞒叽绮粔虻那闆r下，這可能很有幫助。

CSS 容器查詢

介紹樣式查詢之前，我們先來回顧容器查詢。

CSS 容器查詢（Container Queries）是一項(xiàng)新的 CSS 功能，允許開發(fā)人員根據(jù)元素的大小來應(yīng)用樣式。這意味著，開發(fā)人員可以為不同大小的設(shè)備或?yàn)g覽器窗口應(yīng)用不同的樣式，而無需使用媒體查詢或使用 JavaScript 來檢測設(shè)備大小。

我們來看看一個(gè)例子：

.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開始查詢。一旦滿足了這個(gè)條件，CSS將應(yīng)用于該容器內(nèi)的組件。

樣式查詢

簡單地說，樣式查詢讓我們查詢一個(gè)容器的CSS屬性或CSS變量。

樣式查詢?nèi)匀皇窃囼?yàn)性的，目前只在Chrome Canary中實(shí)現(xiàn)。要測試它們，請進(jìn)入chrome://flags并激活 "Experimental Web Platform features"的切換。

例如，我們可以檢查容器是否有 display: flex，并在此基礎(chǔ)上為子元素設(shè)計(jì)樣式。

.page-header {
  display: flex;
}

@container style(display: flex) {
  .page-header__start {
    flex: 1;
    display: flex;
    align-items: center;
    border-right: 1px solid lightgrey;
  }
}

理想情況下，上述做法應(yīng)該是可行的，但目前Chrome Canary中的樣式查詢原型僅局限于CSS變量。樣式查詢預(yù)計(jì)將在Chrome M111中出現(xiàn)。

現(xiàn)在，我們可以檢查變量--boxed: true是否被添加到容器中，如果是，我們可以在此基礎(chǔ)上改變子元素的樣式。

請看下圖:

請注意，容器查詢和樣式查詢的主要區(qū)別在于，前者是針對大小的查詢，后者是針對樣式的查詢。

.card-container {
  --boxed: true;
}

@container style(--boxed: true) {
  .card {
    /* boxed styles */
  }
}

問題

在探討我們可以在哪里使用樣式查詢之前，我們先來回答大家常見的一個(gè)問題：樣式查詢能解決什么問題？容器查詢還不夠嗎？

這是一個(gè)好問題。在容器查詢中，我們可以根據(jù)一個(gè)組件的父級寬度來控制它的樣式，這非常有用。不過，在某些情況下，我們可能不需要查詢尺寸，而是想查詢一個(gè)容器的計(jì)算樣式。

為了讓你有更好的了解，請看下圖：

這是一篇來自CMS的文章正文。我們有一個(gè)默認(rèn)的圖片樣式和另一個(gè)看起來有特色的樣式。

下面是對應(yīng)的代碼：

<figure>
  <img src="cheesecake.jpg" alt="" />
  <figcaption>....</figcaption>
</figure>

figcaption {
  font-size: 13px;
  padding: 4px 8px;
  background: lightgrey;
}

當(dāng)我們開始對特色的進(jìn)行造型時(shí)，我們需要覆蓋上述內(nèi)容，并有一個(gè)CSS類，我們可以用它進(jìn)行造型。

.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;
}

當(dāng)我們開始為突出顯示的元素添加樣式時(shí)，我們需要覆蓋上述樣式并定義一個(gè) CSS 類，以便可以對其進(jìn)行樣式設(shè)置。

.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;
}

很酷，這個(gè)方法行。我們能不能做得更好？是的！使用樣式查詢，我們可以在 figure 中添加 display: flex? 或一個(gè) CSS 變量 --featured: true，然后基于這個(gè)進(jìn)行樣式設(shè)置。

<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? 不存在，我們將默認(rèn)使用基本 figure 設(shè)計(jì)。我們可以使用 not? 關(guān)鍵字來檢查 figure 是否沒有 display: flex。

/* Default figure style. */
@container figure not style(--featured: true) {
  figcaption {
    /* Custom styling */
  }
}

要知道的幾個(gè)細(xì)節(jié)默認(rèn)情況下，每個(gè)元素都是樣式容器

所以根本不需要定義一個(gè)樣式容器。默認(rèn)情況下，它就在那里。

我們不能用類名來解決這個(gè)問題嗎？

是的，我們可以。使用樣式查詢的目的是使 CSS 更易讀并更容易修改。上述邏輯可以作為一個(gè)組件 CSS 寫出，而無需將所有這些樣式添加到條件類中。

事例：https://codepen.io/shadeed/pen/ZERZxzG/a583817975bae6b78308acb6939a9a54?editors=1100

減少 CSS 特定性問題

我喜歡使用樣式查詢的原因是，它將減少 CSS 特定性，因?yàn)槲覀儗⒉惶蕾?CSS 變化類或 HTML 數(shù)據(jù)屬性來對組件變化進(jìn)行樣式設(shè)置。

在下面的 CSS 中，我們?yōu)?section 添加了基本樣式。沒有什么特別的。

.section {
  background-color: lightgrey;
}

.section__title,
.section__desc {
  color: #222;
}

我們需要一種方法來為它設(shè)置不同的主題，因此我們使用了變化類。

.section--dark {
  background-color: #222;
}

.section--dark .section__title,
.section--dark .section__desc {
  color: #fff;
}

使用樣式查詢，我們可以在 .section 組件周圍使用容器，然后在不在 CSS 中創(chuàng)建更多特定性的情況下為標(biāo)題和描述打標(biāo)簽。

@container style(--theme: dark) {
  .section {
    background-color: #222;
  }

  .section__title,
  .section__desc {
    color: #fff;
  }
}

這看起來干凈多了。

接下來，我們探索幾種樣式查詢可能有幫助的使用情況。

使用情況和示例

基于上下文的樣式設(shè)置

這是一種常見的使用情況，在同一包裝器中我們使用了相同的組件但用法不同。在右側(cè)，我們有一個(gè)文章組件，可能包含一個(gè)數(shù)字或不包含。

目前，我們可能會使用一個(gè)新的 CSS 類來解決樣式設(shè)置問題，或者可能在文章組件本身上使用變化類。

.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 樣式查詢，我們可以在父元素中添加一個(gè) CSS 變量，并根據(jù)此對文章進(jìn)行樣式設(shè)置?？纯催@個(gè)：

.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

組件級的主題切換

我們構(gòu)建的一些組件根據(jù)特定條件需要使用不同的主題。在下面的示例中，我們有一個(gè)包含不同統(tǒng)計(jì)組件的儀表板。

基于包裝器，我們需要切換組件的主題。

目前，我們可以使用特殊類根據(jù)它們的容器為自定義統(tǒng)計(jì)組件添加樣式。

.special-wrapper .stat {
  background-color: #122c46;
}

.special-wrapper .stat__icon {
  background-color: #2e547a;
}

.special-wrapper .stat__title {
  background-color: #b3cde7;
}

上面的做法一點(diǎn)也沒有錯(cuò)，也不壞，但因?yàn)槲覀兦短琢薈SS，所以增加了特殊性。讓我們探討一下如何用樣式查詢來實(shí)現(xiàn)上述內(nèi)容。

首先，我們需要在特殊包裝器上定義一個(gè)切換按鈕。然后，我們可以檢查該開關(guān)是否處于激活狀態(tài)，并對狀態(tài)組件進(jìn)行相應(yīng)的設(shè)計(jì)。

.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Add the dark styles. */
  }
}

在這種情況下，樣式查詢的有用之處在于，將上述樣式放在 CSS 中的一個(gè)地方是有意義的。

/* stat.css */
.stat {
  /* default styling */
}

@container stats style(--theme: dark) {
  .stat {
    /* custom styling */
  }
}

頭像組

在這個(gè)例子中，我們有一組用戶的頭像。我們需要根據(jù)在父代上設(shè)置的一個(gè)CSS變量，以不同的方式來布置它們。我從Atlassian設(shè)計(jì)系統(tǒng)中挑選了這個(gè)例子。

<div class="avatars-wrapper">
  <div class="avatars-list">
    <div class="avatar"></div>
    <!-- more avatars -->
  </div>
</div>

在CSS中，我給容器添加了一個(gè)名字，并定義了--appearance: default變量。

.avatars-wrapper {
  container-name: avatars;
}

.avatars-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

有了這個(gè)，我們就可以使用樣式查詢來改變基于--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

條件裝飾樣式

在某些情況下，我們可能需要根據(jù)文本元素在 HTML 中的位置為其添加條件裝飾樣式。

標(biāo)題和段落下方有一個(gè)旋轉(zhuǎn)的背景效果。這是通過偽元素實(shí)現(xiàn)的：

<div class="content">
  <h2><!-- Title here --></h2>
  <p><!-- Description --></p>
</div>

要對它們進(jìn)行樣式設(shè)置，我們可以使用 CSS 變量并檢查它是否已切換，然后相應(yīng)地添加樣式。在示例中，:after? 偽元素被添加到 .content 容器的每個(gè)子元素。

.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 樣式時(shí)，第一步是在<html>?元素中添加 dir=rtl?。一旦添加，每個(gè)元素的 direction CSS 屬性都會變?yōu)?nbsp;direction: rtl。

隨著邏輯屬性的興起，我們不需要完全重寫 CSS?？紤]以下示例：

.item {
  margin-inline-start: 1rem;
}

對于從左到右的布局，上述內(nèi)容將計(jì)算為 margin-left?。對于從右到左的布局，它將是 margin-right。很酷，對吧？但是我們?nèi)匀粵]有檢查漸變方向的邏輯 CSS。

樣式查詢可以用于解決這個(gè)問題?？紤]以下示例：

我們有一個(gè)組件，由兩個(gè)元素組成，這兩個(gè)元素都應(yīng)根據(jù)文檔改變方向：

• 漸變：對于 LTR 布局，它從左到右。
• 箭頭方向：指向右邊。

上述內(nèi)容無法使用邏輯 CSS 控制。目前，我們這樣做：

html[dir="rtl"] .card {
  background: linear-gradient(to left, ...);
}

html[dir="rtl"] .card__cta {
  transform: scaleX(-1);
}

使用樣式查詢，我們可以查詢?nèi)萜鞑z查direction?是否等于 rtl，并根據(jù)此對樣式進(jìn)行更改。

.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);
  }
}

請注意，樣式查詢的當(dāng)前原型不支持 style() 查詢中的 CSS 屬性。因此，我在示例中使用了 CSS 變量。

新聞模塊

這是我在 bbc.com 上發(fā)現(xiàn)的真實(shí)問題。最初，我們有以下新聞組件。

根據(jù)其容器，樣式應(yīng)略有改變?？紤]以下圖：

注意組件現(xiàn)在有兩個(gè)修改：

• 白色背景。
• 標(biāo)題和描述容器四周填充。

這是 BBC.com 上 CSS 的樣式：

.media--padded {
  background: #fff;
}

.media--padded .media__content {
  padding: 0.75rem 0.75rem 3rem 0.75rem;
}

我們?nèi)绾瓮ㄟ^樣式查詢來解決這個(gè)問題呢？很簡單，我們需要一種方法來告訴組件，如果你住在這個(gè)容器內(nèi)，卡片的樣式應(yīng)該被填充。

.special-container {
  --card--padded: true;
}

@container style (--card-padded: true) {
  .media {
    background: #fff;
  }

  .media__content {
    padding: 0.75rem 0.75rem 3rem 0.75rem;
  }
}

總結(jié)

CSS 樣式查詢是 CSS 的強(qiáng)大補(bǔ)充。我迫不及待地想看看社區(qū)中的其他人會用它們做什么。哦，我也忍不住想在 iShadeed 實(shí)驗(yàn)室中為樣式查詢創(chuàng)建一個(gè)新目錄。

原文：https://ishadeed.com/article/css-container-style-queries/