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

Una Kravets
Bramus
Adam Argyle
Adam Argyle
X GitHub

過去幾個月來，我們的網頁 UI 已進入黃金時代。隨著使用者跨瀏覽器的嚴格採用，新的平台功能如今已支援更多網頁功能和自訂功能。

以下是近期或即將推出的 20 項最令人期待、最具影響力的功能：

新的回應式影片

我們先來看看一些新的回應式設計功能。透過全新的平台功能，您可以使用擁有回應式樣式資訊的元件建構邏輯介面、建構利用系統功能來提供更原生機身的 UI，讓使用者能夠參與設計過程，提供使用者偏好的查詢，進一步自訂。

容器查詢

瀏覽器支援

  • 105
  • 105
  • 110
  • 16

資料來源

容器查詢最近在各種新版瀏覽器中都穩定運作。您可以利用這些元件查詢父項元素的大小和樣式，藉此判斷哪些樣式應套用至該元素的所有子項。媒體查詢只能存取並運用可視區域中的資訊，因此僅適用於網頁版面配置的巨集檢視。另一方面，容器查詢則較為精確，可以支援任何數量的版面配置或版面配置。

在以下收件匣範例中，「主要收件匣」和「我的收藏」側欄都是容器。他們的電子郵件會調整格狀版面配置，並根據可用空間顯示或隱藏電子郵件時間戳記。這個部分與網頁中的內容完全相同，只是出現在不同檢視畫面中

由於我們使用容器查詢，因此這些元件的樣式是動態的。如果您調整網頁大小和版面配置，元件就會回應各自分配到的空間。側欄就會變成有更多空間的頂端列，系統會讓版面配置看起來更接近主要收件匣。在空間較少的情況下，兩者都會以壓縮格式顯示。

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

樣式查詢

瀏覽器支援

  • 111
  • 111
  • x
  • x

資料來源

容器查詢規格也可讓您查詢父項容器的樣式值。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() 讓元件更加動態。在這個示例中，包含「星號」元素的項目將套用灰色背景，而已勾選核取方塊的項目則是藍色背景。

示範的螢幕截圖

不過，這個 API 不限於家長選取功能。此外，您也可以設定父項中所有子項的樣式。舉例來說，當項目包含星號元素時，標題就會以粗體顯示。方法是使用 .item:has(.star) .title。透過 :has() 選取器，您可以存取父項元素、子項元素，甚至是同層級元素，這是一種靈活彈性的 API，每天都有新的用途出現。

如要進一步瞭解並探索更多示範內容，請參閱這篇關於 :has() 的網誌文章。

第 N 行語法

瀏覽器支援

  • 111
  • 111
  • 113
  • 9

網路平台現在擁有更先進的子子系選項。進階的第 n 子語法提供新的關鍵字 (「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

瀏覽器支援

  • 110
  • 110
  • x
  • 9

資料來源

initial-letter 的另一項改善網頁字體排版很實用。此 CSS 屬性可讓您進一步掌控插邊放置上限樣式。

您可以在 :first-letter 虛擬元素上使用 initial-letter 指定：根據包含的行數決定字母大小。字母的區塊偏移 (或「接收器」)，

如要進一步瞭解 intial-letter 的使用方式，請按這裡。

動態可視區域單元

瀏覽器支援

  • 108
  • 108
  • 101
  • 15.4

網路開發人員現在面臨的其中一個常見問題是，所有檢視點大小準確一致，在行動裝置上更是如此。如果您是開發人員，您希望 100vh (100% 的可視區域高度) 代表「與可視區域高度相同」，但 vh 單元不會考量行動裝置的導覽列撤銷等情形，因此有時最終會拉長而造成捲動操作。

顯示過多捲軸

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

在系統顯示額外動態瀏覽器工具列 (例如頂端網址或底部的分頁列) 時，動態可視區域單元的值會改變，

以視覺化方式呈現新的可視區域單元

如要進一步瞭解這些新的廣告單元，請參閱「大型、小型和動態可視區域單元」一文。

廣域色域

瀏覽器支援

  • 111
  • 111
  • 113
  • 15.4

資料來源

網路平台新增的另一個關鍵是全寬域色域。在網頁平台推出廣色域之前，您可以拍攝一張鮮豔色彩的相片，在現代裝置上皆可查看，但無法配合這些鮮明的數值使用按鈕、文字顏色或背景。

其中有一系列圖片在廣度和窄色的色調之間轉換，藉此呈現色彩鮮明度及其效果。
親自體驗

不過，我們現在已經在網路平台上推出多種全新的色彩空間，包括 REC2020、P3、XYZ、LAB、OKLAB、LCH 和 OKLCH。如要瞭解全新的網頁色彩空間和其他功能，請參閱 HD 色彩指南。

包含五個不同顏色的堆疊三角形，用於說明每個新色域之間的關係和大小。

開發人員工具中會立即顯示色彩範圍的擴大情形，其中一條白線代表 srgb 範圍的結束位置，以及較寬的域色範圍起始位置。

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

還有更多顏色工具可供色彩運用！也別錯過各種絕佳的漸層改善功能。甚至還有專為 Adam Argyle 打造的全新工具 Adam Argyle，您可以試用全新的網路顏色挑選器和漸層建構工具，詳情請參閱 gradient.style。

顏色-混合()

瀏覽器支援

  • 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);
7 個色域 (srgb、Linear-srgb、lch、oklch、lab、oklab、xyz) 各會顯示不同的結果。多數客房為粉紅色或紫色，但實際上少數仍是藍色。
試用示範

color-mix() 函式提供長時間要求的功能：保留不透明色彩值的功能，同時增加一些透明度。現在，您可以使用品牌顏色變數，建立這些顏色不同強度的變化形式。做法是混用透明的顏色。將品牌顏色混和 10% 透明時，可獲得 90% 不透明的品牌色彩。瞭解此功能如何快速建立色彩系統。

您可以立即在 Chrome 開發人員工具中查看實際運作情況，並在樣式窗格中加上一個精美的預覽文氏圖圖示。

開發人員工具螢幕截圖與文氏圖「色彩混搭」圖示

如要查看更多範例和詳細資訊，請參閱我們的顏色混搭網誌文章，或試試這個 color-mix() playground。

CSS 基礎

開發能夠明確贏得使用者勝利的新功能只是其中一環，但 Chrome 導入許多功能，都是為了提升開發人員體驗，並建立更可靠且井然有序的 CSS 架構。這些功能包括 CSS 巢狀結構、層疊式圖層、範圍樣式、三角函式和個別轉換屬性。

巢狀結構

瀏覽器支援

  • 120
  • 120
  • 117
  • 17.2

資料來源

CSS 巢狀結構 (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 架構更能掌控自己的 CSS。

Cascade 圖層可讓使用者自行控管哪些圖層的優先順序高於其他圖層，能更精細地控制套用樣式的時機。

瀑布插圖

Codepen 專案的螢幕截圖
探索 Codepen 中的專案。

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

設有範圍的 CSS

瀏覽器支援

  • 118
  • 118
  • x
  • 17.4

開發人員可以透過 CSS 範圍樣式，指定特定樣式適用的界線，基本上是在 CSS 中建立原生命名空間。過去，開發人員仰賴第三方指令碼重新命名類別或採用特定的命名慣例，以避免樣式衝突，不過不久後，您可以使用 @scope。

在這個範例中，我們將 .title 元素的範圍限定為 .card。這樣可以防止該標題元素與網頁上的任何其他 .title 元素相衝突，例如網誌文章標題或其他標題。

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

在以下的即時示範影片中，您可以一併查看 @scope 和範圍限制和 @layer：

示範資訊卡的螢幕截圖

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

三角函數

瀏覽器支援

  • 111
  • 111
  • 108
  • 15.4

資料來源

另一項新的 CSS 管線則是加入現有 CSS 數學函式的三角函數。這些功能現在在所有新版瀏覽器中皆穩定運作，方便您在網路平台上建立更自然的版面配置。其中一個絕佳範例就是這個放射狀選單版面配置，現在可以使用 sin() 和 cos() 函式設計並製作動畫。

在下方示範中，圓點圍繞著一個中心點。系統會在 X 軸和 Y 軸上轉譯每個圓點，而不是將每個點旋轉並移開，X 軸和 Y 軸的距離取決於 cos() 和 --angle 的 sin()。

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

個別轉換屬性

瀏覽器支援

  • 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 之間建立動畫與來自頂層之間的動畫。

為了讓彈出式視窗、選取選單，甚至是現有元素 (例如對話方塊或自訂元件) 提供完善的轉場效果，瀏覽器必須設法支援這些動畫。

下列彈出式示範會使用 :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 功能導覽的最後一個重點。

我們之前提過為獨立屬性建立動畫，但也有一些很有趣的 API 放在 Chrome 上，可以運用捲動式動畫和檢視畫面轉場效果

捲動式動畫

瀏覽器支援

  • 115
  • 115
  • x

資料來源

捲動式動畫可讓您根據捲動容器的捲動位置控制動畫的播放作業。這表示當您向上或向下捲動時，動畫會向前或向後拖曳。此外，您可以利用捲動式動畫，根據元素在捲動容器內的位置來控制動畫。這可讓您建立有趣的特效，例如視差背景圖片、捲動進度列，以及圖片，以便在畫面中顯示。

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

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

這些全新的 API 可與現有的 Web Animation 和 CSS Animation API 搭配使用，因此可受益於這些 API 的優點。包括讓這些動畫在主執行緒外執行。是的，我要正確讀起來：現在只需要新增幾行程式碼，就能建立流暢的動畫效果，像是捲動、在主執行緒中執行時等動作。不喜歡什麼地方？！

如要進一步瞭解如何建立這些捲動式動畫，請參閱這篇文章，深入瞭解捲動式動畫。

查看轉場效果

瀏覽器支援

  • 111
  • 111
  • x
  • x

資料來源

View Transition API 可讓您輕鬆透過單一步驟變更 DOM，同時在兩種狀態之間建立動畫轉場。這些元素可以在不同檢視畫面之間加入簡單淡出的淡出效果，但您也可以控制頁面個別部分的轉換方式。

View Transitions 可以做為漸進式強化：使用您的程式碼，透過任何方法更新 DOM，並將此程式碼納入 View Transition 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 影片，掌握更多網路到達網頁資訊。