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

Una Kravets
Bramus
Adam Argyle

過去幾個月，網頁版使用者介面迎來了黃金時代。新平台功能已推出，並獲得跨瀏覽器採用，支援的網路功能和自訂功能比以往更多。

以下列出 20 項近期推出或即將推出的重大功能：

全新回應式廣告

首先來瞭解幾項新的回應式設計功能。新版平台功能可讓您使用擁有自身回應式樣式資訊的元件，建構邏輯介面；建構可運用系統功能提供更原生 UI 的介面；以及透過使用者偏好查詢，讓使用者參與設計程序，實現完全自訂。

容器查詢

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

容器查詢最近在所有新式瀏覽器中都已穩定運作。您可以查詢父項元素的大小和樣式，決定要套用至任何子項的樣式。媒體查詢只能存取及運用可視區域的資訊，因此只能處理網頁版面配置的巨集檢視畫面。另一方面，容器查詢是更精確的工具，可支援任意數量的版面配置，或版面配置中的版面配置。

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

由於我們有容器查詢，這些元件的樣式是動態的。如果您調整頁面大小和版面配置，元件會根據個別分配到的空間做出回應。側邊欄會變成頂端列，空間更大，版面配置看起來更像主要收件匣。如果空間不足，兩者都會以精簡格式顯示。

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

樣式查詢

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 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()

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

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

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

示範螢幕截圖

但這項 API 不僅限於選取上層。您也可以為父項中的任何子項設定樣式。舉例來說，如果項目有星號元素，標題就會以粗體顯示。這時就會用到 .item:has(.star) .title。使用 :has() 選擇器可存取父項元素、子項元素，甚至是同層級元素，因此這個 API 非常彈性，每天都會出現新的用途。

如要瞭解詳情及查看更多示範，請參閱這篇網誌文章，深入瞭解 :has()。

nth-of 語法

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 9.

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

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

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

text-wrap: balance

選取器和樣式查詢並非唯一可在樣式中嵌入邏輯的位置，排版也是其中之一。從 Chrome 114 開始，您可以使用 text-wrap 屬性搭配 balance 值，為標題啟用文字換行平衡功能。

試用示範版

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

試用示範

詳情請參閱這篇文章。

initial-letter

Browser Support

  • Chrome: 110.
  • Edge: 110.
  • Firefox: not supported.
  • Safari: 9.

Source

網頁排版另一項重大改進是 initial-letter。這個 CSS 屬性可讓您更精確地控制內嵌首字下沉的樣式。

您可以使用 initial-letter 上的 :first-letter 虛擬元素指定： 字母的大小，取決於字母佔用的行數。 字母的區塊偏移量或「接收器」，用於放置字母。

。

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

動態可視區域單位

Browser Support

  • Chrome: 108.
  • Edge: 108.
  • Firefox: 101.
  • Safari: 15.4.

網頁開發人員目前面臨的常見問題之一，是準確且一致的全螢幕尺寸，尤其是在行動裝置上。開發人員希望 100vh (可視區域高度的 100%) 代表「與可視區域一樣高」，但 vh 單位不會考量行動裝置上收合的導覽列等項目，因此有時會過長而導致捲動。

顯示過多捲軸

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

當額外的動態瀏覽器工具列 (例如頂端的網址或底部的分頁列) 可見時，動態檢視區塊單元的值會變更，反之亦然。

可視區域單位的新視覺化效果

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

廣色域色彩空間

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.4.

Source

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

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

但現在網頁平台提供一系列新的色彩空間，包括 REC2020、P3、XYZ、LAB、OKLAB、LCH 和 OKLCH。請參閱 HD 顏色指南，瞭解全新的網頁色彩空間等功能。

五個堆疊的三角形，顏色各異，用來顯示每個新色域的關係和大小。

您可以在開發人員工具中立即查看色彩範圍的擴展情況，白色線條會標示 sRGB 範圍的終點，以及更廣色域色彩範圍的起點。

開發人員工具的顏色挑選器中顯示色域線。

顏色方面還有許多工具可用！也別錯過所有出色的漸層改善項目。Adam Argyle 甚至還打造了全新工具，協助您試用新的網頁顏色挑選器和漸層建構工具，請前往 gradient.style 試用。

color-mix()

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Source

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);
7 個色域 (srgb、linear-srgb、lch、oklch、lab、oklab、xyz)，分別顯示不同的結果。許多都是粉紅色或紫色，真正還是藍色的很少。
立即試用

color-mix() 函式提供一項長期以來備受期待的功能：在不透明的顏色值中加入透明度，同時保留這些值。現在，您可以在建立不同不透明度的顏色變化時，使用品牌顏色變數。方法是將顏色與透明色混合。如果將品牌藍色與 10% 透明度混合，就會得到 90% 不透明度的品牌顏色。您會發現這項功能可讓您快速建構色彩系統。

您可以在 Chrome 開發人員工具中實際體驗這項功能，樣式窗格中會顯示精美的預覽維恩圖示。

開發人員工具螢幕截圖，顯示 Venn 圖色彩混合圖示

如需更多範例和詳細資料，請參閱這篇有關 color-mix 的網誌文章，或試試這個 color-mix() Playground。

CSS 基礎

開發可明顯提升使用者體驗的新功能是其中一環，但許多 Chrome 功能的目標是改善開發人員體驗，並建立更可靠且有條理的 CSS 架構。這些功能包括 CSS 巢狀結構、層疊層、範圍樣式、三角函數和個別轉換屬性。

巢狀結構

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Source

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 巢狀結構一文。

連串圖層

Browser Support

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4.

Source

我們發現開發人員的另一個痛點是確保樣式一致性，而解決這個問題的方法之一，就是加強控管 CSS 疊加。

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

階層式插圖

Codepen 專案的螢幕截圖
在 Codepen 上探索專案。

如要進一步瞭解如何使用層疊層，請參閱這篇文章。

範圍 CSS

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

開發人員可透過 CSS 範圍樣式指定特定樣式適用的界線，在 CSS 中建立原生命名空間。過去，開發人員必須依賴第三方指令碼重新命名類別，或使用特定命名慣例來避免樣式衝突，但很快就能使用 @scope。

這裡要將 .title 元素限定在 .card 內。這樣一來，該標題元素就不會與網頁上的任何其他 .title 元素 (例如網誌文章標題或其他標題) 發生衝突。

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

您可以在這個即時示範中，查看範圍限制 @scope 和 @layer：

示範中的卡片螢幕截圖

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

三角函數

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

另一個新的 CSS 基礎架構是新增至現有 CSS 數學函式的三角函數。這些函式現在已在所有現代瀏覽器中穩定運作，可讓您在網路平台上建立更多自然版面配置。其中一個絕佳範例是這個放射狀選單版面配置，現在可以使用 sin() 和 cos() 函式設計及製作動畫。

在下方的示範中，圓點會圍繞中心點旋轉。每個點並非繞著自己的中心旋轉，然後向外移動，而是沿著 X 軸和 Y 軸平移。X 軸和 Y 軸上的距離取決於 --angle 的 cos() 和 sin()。

。

如要進一步瞭解這個主題，請參閱三角函數文章。

個別轉換屬性

Browser Support

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 72.
  • Safari: 14.1.

Source

我們持續改善開發人員人體工學，提供個別轉換函式。自上次舉辦 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 彈出式視窗的輕觸即關閉行為，因此當您點選元素外部時，彈出式視窗會關閉、從無障礙樹狀結構中移除，並正確管理焦點。
  • Popover 目標和 Popover 本身的結締組織預設無障礙功能。

這表示您不必編寫大量 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，可支援捲動驅動動畫和檢視畫面轉場效果

捲動驅動動畫

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

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

這項 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 的優勢。包括讓這些動畫在主執行緒外執行。沒錯，您現在只要加入幾行額外程式碼，就能透過捲動功能，在主執行緒外執行如絲般流暢的動畫。這麼多好處，還不快來體驗！

如需如何建立這些捲動驅動動畫的深入指南，請參閱這篇捲動驅動動畫文章。

查看轉移作業

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox Technology Preview: supported.
  • Safari: 18.

Source

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 在這部精彩的示範影片中所示，在發生檢視區塊轉場效果時，其他網頁互動 (例如播放影片) 仍會繼續運作。

目前，檢視畫面轉場效果適用於 Chrome 111 以上版本的單頁應用程式 (SPA)。我們正在開發多頁面應用程式支援功能，如要瞭解詳情，請參閱完整的檢視區塊轉場效果指南。

結論

請在 developer.chrome.com 隨時掌握 CSS 和 HTML 的最新功能，並觀看 I/O 影片，瞭解更多網頁功能。