CSS 和使用者介面的新功能：2023 年 I/O 大會版本

Una Kravets

Bramus

Adam Argyle

過去幾個月，網頁版使用者介面迎來了黃金時期。我們推出了全新的平台功能，並與多家瀏覽器合作，支援更多網路功能和自訂功能。

以下是近期推出或即將推出的 20 項最令人期待且影響深遠的功能：

• 容器查詢
• 樣式查詢
• :has() 選取器
• nth-of 微語法
• text-wrap: balance
• initial-letter
• 動態視區單位
• 廣色域色彩空間
• color-mix()
• 巢狀結構
• 層級圖層
• 限定範圍樣式
• 三角函數
• 個別轉換屬性
• 彈出式視窗
• 錨定位置
• selectmenu
• 離散性資源轉換
• 捲動驅動動畫
• 查看轉場效果

全新回應式廣告

接下來，我們將介紹幾項新的回應式設計功能。新的平台功能可讓您使用具備回應式樣式資訊的元件，建構邏輯介面，並利用系統功能建構介面，以提供更原生的 UI；此外，您還可以讓使用者透過使用者偏好查詢參與設計程序，以便提供完整的自訂選項。

容器查詢

瀏覽器支援

• 105
• 105
• 110
• 16

資料來源

容器查詢最近已在所有新式瀏覽器中穩定運作。您可以使用這些屬性查詢父項元素的大小和樣式，藉此判斷應套用至任何子項的樣式。媒體查詢只能存取及利用可視區域中的資訊，也就是說，只能針對網頁版面配置的宏觀檢視畫面運作。另一方面，容器查詢則是更精確的工具，可支援任意數量的版面配置，或版面配置內的版面配置。

在下列收件匣範例中，「主要收件匣」和「我的最愛」側欄都是容器。內含的電子郵件會根據可用空間調整格線版面配置，並顯示或隱藏電子郵件時間戳記。這是網頁中的完全相同元件，只是顯示在不同的檢視畫面

由於我們有容器查詢，因此這些元件的樣式是動態的。如果您調整頁面大小和版面配置，元件會回應個別分配的空間。側欄會變成頂端列，並提供更多空間，版面配置看起來會更像主要收件匣。在空間較少的情況下，兩者都會以精簡格式顯示。

如要進一步瞭解容器查詢和建構邏輯元件，請參閱這篇文章。

樣式查詢

瀏覽器支援

• 111
• 111
• x
• 18

資料來源

容器查詢規格還可讓您查詢父項容器的樣式值。這項功能目前已在 Chrome 111 中部分實作，您可以使用 CSS 自訂屬性套用容器樣式。

以下範例會使用儲存在自訂屬性值中的天氣特徵 (例如下雨、晴天和多雲)，為資訊卡的背景和指標圖示設定樣式。

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

這只是樣式查詢的開端。日後我們會推出布林查詢，用於判斷是否存在自訂屬性值，並減少程式碼重複情形。目前我們正在討論範圍查詢，以便根據一系列值套用樣式。這樣一來，您就可以使用百分比值套用此處所示的樣式，以便顯示降雨或雲量機率。

如要進一步瞭解相關資訊或觀看更多示範，請參閱關於樣式查詢的網誌文章。

:has()

瀏覽器支援

• 105
• 105
• 121
• 15.4

資料來源

談到強大的動態功能，:has() 選取器是新一代瀏覽器中功能最強大的 CSS 新功能之一。您可以使用 :has() 套用樣式，方法是檢查父項元素是否包含特定子項，或這些子項是否處於特定狀態。也就是說，我們現在基本上有一個父項選取器。

在容器查詢範例的基礎上，您可以使用 :has() 讓元件更具動態性。其中，含有「star」元素的項目會套用灰色背景，而勾選核取方塊的項目則會套用藍色背景。

不過，這個 API 不限於選取父項。您也可以為父項中的任何子項設定樣式。舉例來說，如果項目含有星號元素，標題就會以粗體顯示。這項操作可透過 .item:has(.star) .title 完成。使用 :has() 選取器可讓您存取父項元素、子項元素，甚至是同層元素，因此這個 API 非常靈活，每天都會有新的用途。

注意：為避免在大型 DOM 樹狀結構中產生轉譯效能緩慢的情況，建議您盡可能縮小這個選取器的範圍。舉例來說，使用 :has() 檢查根 HTML 元素的相符項目，速度會比在導覽列或樹狀結構較小的資訊卡元素中檢查相符項目還要慢。

如要進一步瞭解並查看更多示範，請參閱這篇網誌文章，瞭解 :has() 的相關資訊。

nth-of 語法

瀏覽器支援

• 111
• 111
• 113
• 9

網頁平台現在提供更進階的第 n 個子項選取功能。進階第 n 個子項語法會提供新的關鍵字 (「of」)，讓您使用 An+B 的現有微型語法，並在其中搜尋更具體的子集。

如果您使用一般第 n 個子項，例如特殊類別的 :nth-child(2)，瀏覽器會選取已套用特殊類別的元素，也是第二個子項。這與 :nth-child(2 of .special) 相反，:nth-child(2 of .special) 會先預先篩選所有 .special 元素，然後從該清單中挑選第二個元素。

如要進一步瞭解這項功能，請參閱這篇關於 nth-of 語法的文章。

text-wrap: balance

除了選取器和樣式查詢之外，我們也可以在文字設計中嵌入邏輯。在 Chrome 114 以上版本中，您可以使用文字包裝平衡功能為標題調整文字，方法是使用 text-wrap 屬性，並將值設為 balance。

試用示範版

為了平衡文字，瀏覽器會有效執行二元搜尋，找出不會導致任何額外行數的最小寬度，並在一個 CSS 像素 (而非顯示像素) 處停止。為了進一步減少二分搜尋中的步驟，瀏覽器會從平均行寬的 80% 開始。

試用示範

注意：雖然這項功能是您今天就能試用的絕佳漸進式增強功能，但請務必注意，這個 API 最多只能處理 4 行文字，因此雖然很適合用於標題和標題文字，但可能不適合用於較長的內容。

如要進一步瞭解，請參閱這篇文章。

initial-letter

瀏覽器支援

• 110
• 110
• x
• 9

資料來源

initial-letter 是另一項改善網頁字體排版的功能。這個 CSS 屬性可讓您更有效地控制內嵌的首字母大寫樣式。

您可以在 :first-letter 擬造元素上使用 initial-letter，指定下列項目： 根據字母所占行數，指定字母的大小。 字母的區塊偏移量，或「sink」，用於顯示字母的位置。

如要進一步瞭解如何使用 intial-letter，請參閱這篇文章。

動態視窗單元

瀏覽器支援

• 108
• 108
• 101
• 15.4

目前網頁開發人員面臨的一個常見問題，是如何準確且一致地調整全螢幕檢視區大小，尤其是在行動裝置上。開發人員希望 100vh (可視區高度的 100%) 代表「與可視區一樣高」，但 vh 單位不會考量行動裝置上的收縮導覽列等因素，因此有時會導致畫面過長而需要捲動。

為解決這個問題，我們現在在網頁平台上提供新的單位值，包括： - 小型檢視區高度和寬度 (或 svh 和 svw)，代表最小的有效檢視區大小。- 大型可視區域高度和寬度 (lvh 和 lvw)，代表最大尺寸。- 動態可視區域高度和寬度 (dvh 和 dvw)。

當其他動態瀏覽器工具列 (例如頂端的地址或底部的分頁列) 顯示或隱藏時，動態檢視區單元的值會有所變動。

注意：請注意，動態視區單位不會考量虛擬鍵盤的存在。從 Chrome 108 開始，您可以設定元標記來變更這項行為。

如要進一步瞭解這些新單位，請參閱「大型、小型和動態檢視區單位」。

廣色域色彩空間

瀏覽器支援

• 111
• 111
• 113
• 15.4

資料來源

網路平台另一項新功能是廣色域色彩空間。在網頁平台提供廣色域色彩之前，您可以拍攝鮮豔的照片，並在現代裝置上觀看，但無法取得與這些鮮豔值相符的按鈕、文字顏色或背景。

一系列圖片會在廣色域和窄色域之間轉換，說明色彩鮮豔度及其效果。
親自試用

不過，我們現在在網頁平台上提供一系列新的色彩空間，包括 REC2020、P3、XYZ、LAB、OKLAB、LCH 和 OKLCH。歡迎參閱高畫質色彩指南，瞭解新的網頁色彩空間等內容。

您可以在開發人員工具中立即查看色彩範圍的擴展方式，白線會標示 sRGB 範圍的結束位置，以及更廣色域色彩範圍的開始位置。

還有更多工具可用於顏色！也別錯過所有精彩的漸層改善功能。Adam Argyle 甚至還打造了全新工具，協助您試用新的網頁顏色挑選器和漸層建立工具，請前往 gradient.style 試用。

color-mix()

瀏覽器支援

• 111
• 111
• 113
• 16.2

資料來源

color-mix() 函式可用於擴展已展開的色彩空間。這個函式可混合兩個色彩值，根據混合色彩的管道建立新值。混合時使用的色彩空間會影響結果。使用 oklch 等更具感知性的色彩空間，會比使用 srgb 等色彩空間，產生不同的色彩範圍。

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

試用示範

color-mix() 函式提供大家一直要求的功能：在保留不透明顏色值的同時，為其加入一些透明度。您現在可以使用品牌顏色變數，並為這些顏色建立不同不透明度的變化版本。方法是將顏色與透明色混合。將品牌顏色藍色與 10% 透明度混合，可調出 90% 不透明的品牌顏色。您可以瞭解如何透過此功能快速建構色彩系統。

您今天就能在 Chrome 開發人員工具中看到這項功能，樣式窗格中會顯示非常精美的預覽韋恩圖圖示。

如需更多範例和詳細資訊，請參閱我們的有關 color-mix 的網誌文章，或試用這個 color-mix() 遊樂場。

CSS 基礎

開發人員除了要打造能為使用者帶來明顯優勢的新功能，Chrome 中的許多功能也旨在改善開發人員體驗，並建立更可靠且有條理的 CSS 架構。這些功能包括 CSS 巢狀結構、層級式階層、範圍式樣式、三角函數和個別轉換屬性。

巢狀結構

瀏覽器支援

• 120
• 120
• 117
• 17.2

資料來源

CSS 巢狀結構是 Sass 的熱門功能，也是 CSS 開發人員多年來的熱門要求之一，終於在網頁平台上推出。巢狀結構可讓開發人員以更簡潔的群組格式編寫程式碼，減少冗餘。

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

您也可以巢狀排列媒體查詢，也就是說，您可以巢狀排列容器查詢。在下列範例中，如果容器的寬度足夠，系統就會將資訊卡從直向版面配置變更為橫向版面配置：

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

如果容器可用的內嵌空間大於或等於 480px，就會對 flex 進行版面配置調整。只要符合條件，瀏覽器就會套用新的顯示樣式。

如需更多資訊和範例，請參閱 CSS 巢狀結構一文。

階層

瀏覽器支援

• 99
• 99
• 97
• 15.4

資料來源

我們發現另一個開發人員的痛點，是確保哪些樣式會勝過其他樣式，而解決這個問題的其中一個方法，就是更妥善地控管 CSS 層疊。

層級連結可解決這個問題，讓使用者控管哪些層級的優先順序高於其他層級，也就是更精細地控管樣式的套用時機。

探索 Codepen 上的專案。

如要進一步瞭解如何使用層疊式圖層，請參閱本文。

範圍 CSS

瀏覽器支援

• 118
• 118
• 
• 17.4

資料來源

CSS 範圍樣式可讓開發人員指定特定樣式適用的範圍，基本上是在 CSS 中建立原生命名空間。在此之前，開發人員必須依賴第三方指令碼重新命名類別，或使用特定命名慣例來避免樣式衝突，但不久之後，您就可以使用 @scope。

我們在這裡將 .title 元素的範圍設為 .card。這樣一來，標題元素就不會與網頁上的其他 .title 元素 (例如網誌文章標題或其他標題) 發生衝突。

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

您可以在這個實況示範中，看到 @scope 與 @layer 的範圍限制：

如要進一步瞭解 @scope，請參閱 css-cascade-6 規格。

三角函數

瀏覽器支援

• 111
• 111
• 108
• 15.4

資料來源

另一個新的 CSS 管線是三角函數，可新增至現有的 CSS 數學函式。這些函式現在已在所有新式瀏覽器中穩定運作，可讓您在網路平台上建立更自然的版面配置。這張圓形選單的版面配置就是一個很好的例子，現在您可以使用 sin() 和 cos() 函式設計動畫。

在下方示範中，點會圍繞中央點旋轉。每個圓點都會在 X 軸和 Y 軸上進行轉譯，而不是以各自的圓心為中心旋轉，然後向外移動。系統會根據 --angle 的 cos() 和 sin()，分別決定 X 軸和 Y 軸的距離。

如要進一步瞭解這個主題，請參閱這篇關於三角函式的文章。

個別轉換屬性

瀏覽器支援

• 104
• 104
• 72
• 14.1

資料來源

開發人員的操作體驗會隨著個別轉換函式持續改善。自上次舉辦 I/O 以來，所有新式瀏覽器的個別轉換功能都已穩定運作。

過去，您必須依賴轉換函式套用子函式，才能縮放、旋轉及平移 UI 元素。這會涉及大量重複動作，尤其是在動畫中不同時間套用多個轉換時，更是令人感到挫折。

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

您現在可以將轉換類型分開並個別套用，在 CSS 動畫中加入所有這些細節。

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

這樣一來，在動畫期間的不同時間點，位移、旋轉或縮放的變化速度可以同時發生。

詳情請參閱這篇文章，瞭解個別轉換函式。

可自訂的元件

為確保我們能透過網路平台解決開發人員的一些重要需求，我們與 OpenUI 社群團體合作，並找出三種可供開發人員使用的解決方案：

1. 內建彈出式功能，包含事件處理常式、宣告式 DOM 結構和無障礙預設值。
2. CSS API，可將兩個元素綁定在一起，以便錨點定位。
3. 可自訂的下拉式選單元件，可用於設定選取內容的樣式。

彈出式視窗

popover API 可為元素提供一些內建的瀏覽器支援功能，例如：

• 支援頂層，因此您不必管理 z-index。開啟彈出式視窗或對話方塊時，您會將該元素提升至頁面頂端的特殊圖層。
• 在 auto 彈出式視窗中提供免費的輕量式關閉行為，因此當您點選元素外部時，彈出式視窗會關閉、從無障礙樹狀結構中移除，並妥善管理焦點。
• 彈出式視窗目標和彈出式視窗本身的連結組織，其預設的無障礙設計。

這表示您只需編寫較少的 JavaScript 程式碼，即可建立所有這類功能並追蹤所有這些狀態。

彈出式視窗的 DOM 結構是宣告式，可以清楚地編寫，就像為彈出式視窗元素提供 id 和 popover 屬性一樣。接著，您可以將該 ID 同步至會開啟彈出式視窗的元素，例如具有 popovertarget 屬性的按鈕：

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover 是 popover=auto 的簡寫。含有 popover=auto 的元素會在開啟時強制關閉其他彈出式視窗、在開啟時接收焦點，並可輕鬆關閉。相反地，popover=manual 元素不會強制關閉任何其他元素類型、不會立即接收焦點，也不會輕觸關閉。透過切換鈕或其他關閉動作關閉。

如要查看最新的彈出式視窗說明文件，請前往 MDN。

錨定位置

彈出式視窗也經常用於對話方塊和工具提示等元素，這類元素通常需要繫結至特定元素。請參考以下活動範例。點選日曆活動後，系統會在您點選的活動旁邊顯示對話方塊。日曆項目是錨點，彈出式視窗則是顯示活動詳細資料的對話方塊。

您可以使用 anchor() 函式建立置中工具提示，並使用錨點的寬度將工具提示置於錨點 x 位置的 50%。接著，使用現有的定位值套用其他的刊登位置樣式。

不過，如果彈出式視窗在您設定的位置無法顯示在檢視區中，會發生什麼情況？

為解決這個問題，錨點定位 API 包含可自訂的備用位置。以下範例會建立名為「top-then-bottom」的備用位置。瀏覽器會先嘗試將工具提示置於頂端，如果不符合可視區域，則會將工具提示置於錨定元素下方。

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

注意：您可以在這裡設定非常精細的定位，但這可能會導致冗長的程式碼，不過這也是程式庫和設計系統編寫定位邏輯，並讓您在任何地方重複使用這些邏輯的好機會。

如要進一步瞭解錨定位置，請參閱這篇網誌文章。

<selectmenu>

您可以使用彈出式視窗和錨點定位，建立可完全自訂的選單。OpenUI 社群群組一直在調查這些選單的基本結構，並尋找方法，讓使用者能夠自訂其中的任何內容。請參考下列視覺範例：

如要建立最左邊的 selectmenu 範例，並使用與日曆活動中顯示的顏色相對應的彩色點，您可以按照下列方式編寫：

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

離散性質轉換

為了讓所有這些動作都能順暢地在彈出式視窗中顯示和隱藏，網頁需要以某種方式為個別屬性製作動畫。這些屬性過去通常無法製作動畫，例如前往頂層和從頂層返回，以及前往 display: none 和從 display: none 返回。

為了讓彈出式視窗、選單，甚至是對話方塊或自訂元件等現有元素，都能順利轉場，瀏覽器會啟用新的管道來支援這些動畫。

下列彈出式視窗示範，會使用 :popover-open 為開啟狀態，@starting-style 為開啟前狀態，為開啟後關閉狀態直接將轉換值套用至元素，進而產生彈出式視窗的動畫效果。如要讓這一切都與顯示畫面搭配運作，就必須將其加入 transition 屬性，如下所示：

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

互動

接下來，我們將介紹互動功能，這是本網頁 UI 功能導覽的最後一站。

我們已經討論過如何為個別屬性製作動畫，但 Chrome 也推出了一些非常實用的 API，可用於捲動驅動動畫和檢視畫面轉場效果

捲動驅動動畫

瀏覽器支援

• 115
• 115
• 
• x

資料來源

捲動驅動動畫可讓您根據捲動容器的捲動位置控制動畫播放情形。也就是說，當您向上或向下捲動時，動畫會向前或向後播放。此外，您也可以使用捲動驅動動畫，根據元素在捲動容器中的位置控制動畫。這可讓您建立有趣的效果，例如視差背景圖片、捲動進度列，以及在畫面上顯示的圖片。

這個 API 支援一組 JavaScript 類別和 CSS 屬性，可讓您輕鬆建立宣告式捲動驅動動畫。

如要透過捲動來驅動 CSS 動畫，請使用新的 scroll-timeline、view-timeline 和 animation-timeline 屬性。如要驅動 JavaScript Web Animations API，請將 ScrollTimeline 或 ViewTimeline 例項做為 timeline 選項傳遞至 Element.animate()

這些新 API 可與現有的 Web Animations 和 CSS Animations API 搭配使用，因此可享有這些 API 的優點。包括讓這些動畫在主執行緒中執行的功能。沒錯，您現在只需加入幾行額外的程式碼，就能享有流暢的動畫，並由捲動操作在主執行緒中執行。這不是很棒嗎？

如需詳細的動畫製作指南，請參閱這篇關於捲動驅動動畫的文章。

查看轉場效果

瀏覽器支援

• 111
• 111
• x
• 18

資料來源

透過 View Transition API，您可以輕鬆在單一步驟中變更 DOM，並在兩個狀態之間建立動畫轉場效果。這些轉場效果可以是檢視畫面之間的簡單淡出/淡入效果，但您也可以控制網頁的個別部分應如何轉場。

檢視畫面轉場可用於漸進式強化：將以任何方法更新 DOM 的程式碼，並將其包裝在檢視畫面轉場 API 中，並為不支援這項功能的瀏覽器提供備用方案。

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

轉場效果應如何呈現，可透過 CSS 控制

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

如Maxi Ferreira在這個精彩的示範中所示，在 View 轉場期間，其他網頁互動 (例如播放影片) 仍會持續運作。

檢視畫面轉場目前適用於 Chrome 111 版的單頁面應用程式 (SPA)。我們正在努力支援多頁應用程式。如需更多資訊，請參閱完整的觀看轉場效果指南，瞭解相關操作。

結論

如要掌握 CSS 和 HTML 的最新登陸頁面，請前往 developer.chrome.com 查看最新消息，並觀看 I/O 影片，瞭解更多網頁登陸頁面。