新一代網頁樣式設定

即時掌握現代 CSS 有哪些實用功能。

Adam Argyle
Una Kravets

CSS 目前有許多令人期待的功能， 現在的瀏覽器已經支援其中許多新功能！ 2019 年 CDS 活動會談論 包含幾項我們認為應特別注意的新功能和即將推出的功能。

這篇文章主要介紹您目前可以使用的功能。 請務必觀看演講影片 ，進一步瞭解 Houdini 等即將推出的功能 您也可以在 Google Cloud 控制台 CSS@CDS 網頁。

目錄

捲動貼齊

捲動 Snap 可讓您在使用者垂直、水平或兩者皆垂直捲動內容時定義貼齊點。其提供內建的捲動內部和減速功能，且支援觸控功能。

以下程式碼範例會在 <section> 元素中設定水平捲動，並將對齊點對齊子項 <picture> 元素的左側：

section {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

section > picture {
  scroll-snap-align: start;
}

運作方式如下：

  • 在父項 <section> 元素中
    • overflow-x 已設為 auto，允許水平捲動。
    • 將 overscroll-behavior-x 設為 contain，防止任何父項元素在使用者達到 <section> 元素的捲動區域邊界時捲動。(儘管不是這樣，但通常也是不錯的做法)。
    • 將 scroll-snap-type 設為 x (用於水平貼齊)，以及 mandatory，確保可視區域一律會對齊最接近的貼齊點。
  • 在子項 <picture> 元素中，scroll-snap-align 會設為啟動，從而設定每張圖片左側的貼齊點 (假設 direction 設為 ltr)。

以下是現場示範：

您也可以觀看垂直捲動貼齊和矩陣捲動貼齊的示範。

:focus-within

:focus-within 解決長期以來的無障礙功能問題：在許多情況下，聚焦子項元素都應該影響父項元素的呈現方式，才能讓輔助技術的使用者存取 UI。

舉例來說，如果下拉式選單中有多個項目，當任一項目焦點移至該項目時，該選單就會持續顯示在畫面上。否則鍵盤使用者的選單會消失。

:focus-within 會指示瀏覽器在焦點位於指定元素的任何子項元素時套用樣式。返回選單範例，只要在選單元素上設定 :focus-within，就能確保當選單項目成為焦點時，畫面上仍會持續顯示：

.menu:focus-within {
  display: block;
  opacity: 1;
  visibility: visible;
}

這張插圖顯示焦點和聚焦狀態之間的行為差異。

請嘗試使用 Tab 鍵瀏覽可聚焦元素，如下所示。您會發現當焦點移到選單項目上時，選單仍會持續顯示：

媒體查詢層級 5

新的媒體查詢提供強大的功能，可根據使用者的裝置偏好設定調整應用程式使用者體驗。基本上，瀏覽器會做為系統層級偏好設定的 Proxy，讓我們使用 prefers-* 媒體查詢群組在 CSS 中回應：

顯示媒體查詢解讀系統層級使用者偏好設定的圖表。

以下是我們認為開發人員最期待的全新查詢內容：

這些查詢對於無障礙功能來說非常實用。舉例來說，我們之前無法得知使用者已將 OS 設為高對比模式。如果您想要為忠於品牌的網頁應用程式提供高對比模式，就必須請使用者從應用程式的使用者介面選擇。您現在可以使用 prefers-contrast 偵測 OS 的高對比設定。

這些媒體查詢帶來的影響之一，在於我們能夠配合各種使用者偏好和無障礙需求，設計多種系統層級使用者偏好設定組合。如果使用者想在光線昏暗的環境中使用高對比深色模式，你可以達成這項目標！

阿丹必須『偏好減少動作』無法實作為「無動態」使用者表示他們偏好較少動作，而不想要任何動畫。他主張降低動作並非動作。以下示例在使用者偏好減少動態效果的情況下，採用交錯淡出動畫效果：

邏輯屬性

隨著越來越多的開發人員投入國際化處理，邏輯屬性正應解決這類問題。margin 和 padding 等許多版面配置屬性會假設使用由上至下及由左至右讀取的語言。

顯示傳統 CSS 版面配置屬性的圖表。

使用不同書寫模式為多種語言設計網頁時，開發人員必須針對多個元素分別調整所有屬性，而這很快就成為維護可維護的夢想。

邏輯屬性可讓您在不同翻譯和寫入模式中維持版面配置的完整性。系統會根據內容的語意順序 (而非空間安排) 進行動態更新。根據邏輯屬性，每個元素都有兩個維度：

  • 「區塊」維度與線條文字流衝突。(英文 block-size 與 height 相同)。
  • 「內嵌」維度與一行文字流「平行」。(英文 inline-size 與 width 相同)。

這些維度名稱適用於所有邏輯版面配置屬性。例如，在英文中，block-start 與 top 相同，而 inline-end 與 right 相同。

顯示新的 CSS 邏輯版面配置屬性的圖表。

使用邏輯屬性時，您只需變更網頁的 writing-mode 和 direction 屬性，即可自動更新其他語言的版面配置，不必更新數十種個別元素的版面配置屬性。

只要將 <body> 元素上的 writing-mode 屬性設為其他值，即可透過下方的示範模式瞭解邏輯屬性的運作方式：

position: sticky

具有 position: sticky 的元素會一直處於區塊流程中，直到元素開始離開畫面為止。 到了這個時間點，網頁其餘部分就會停止捲動 並固定在元素 top 值指定的位置。 分配給該元素的空間會保留在資料流中 當使用者往上捲動時，元素就會返回該元素。

固定位置可讓您建立許多以往需要使用 JavaScript 的實用效果。為示範應用方式，我們製作了多個示範。每個示範用的 CSS 大致相同，只不過稍微調整 HTML 標記來建立不同的效果。

固定式堆疊

在本示範中，所有固定式元素都共用同一個容器。也就是說，當使用者向下捲動時，每個固定式元素都會滑過上一個元素。固定式元素具有相同的停滯位置。

頁緣固定投影片

在本例中，固定元素就是表親。(也就是說，他們的父母是兄弟姊妹)。當固定式元素到達容器的底部邊界時，就會與容器一起向上移動，這樣會讓較不固定的元素再次向上提升。換句話說，它們看起來似乎正在競爭停滯不前。

黏著劑

就像固定式投影片，這個示範中的固定式元素是表親。不過，這些程式碼也加在採用兩欄格狀版面配置的容器中。

backdrop-filter

backdrop-filter 屬性可讓您將圖形效果套用至元素「後方」的區域，而非元素本身。由於過去只能透過一行 CSS 執行複雜的 CSS 和 JavaScript 駭客攻擊，因此有許多酷炫效果。

舉例來說，此示範內容使用 backdrop-filter 來進行 OS 式模糊處理：

如需更多資訊，歡迎參閱有關「backdrop-filter」的貼文。

:is()

雖然 :is() 虛擬類別其實已有十多年的歷史，但我們認為該類別的使用頻率仍不如預期。這會使用以半形逗號分隔的選取器清單做為引數，且會與清單中的任何選取器相符。這項彈性功能可讓您使用極為便利，而且可大幅減少運送的 CSS 數量。

請看以下的簡單範例：

button.focus,
button:focus {
  …
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  …
}

/* selects the same elements as the code above */
button:is(.focus, :focus) {
  …
}

article > :is(h1,h2,h3,h4,h5,h6) {
  …
}

gap

CSS 格線版面配置的 gap (先前為 grid-gap) 已有一段時間。gap 可以指定內含元素的內部間距，而非子項元素的間距，藉此解決許多常見的版面配置問題。舉例來說，您可以不必擔心子項元素的邊界，導致所含元素的邊緣周圍有不必要的空白字元：

插圖：顯示 Gap 屬性如何避免容器元素邊緣非預期的間距。

更棒的消息：gap 即將採用 Flexbox，提供與格狀空間相同的所有間距：

  • 系統只有一個間距宣告，而非多個間距。
  • 您無須為專案建立慣例，判斷哪些子項元素應具備間距，因為含有的元素會擁有間距。
  • 比起機器化貓頭鷹等舊版策略，程式碼更容易理解。

以下影片展示了對兩個元素使用單一 gap 屬性的好處，其中一個採用格線版面配置，另一個使用彈性版面配置：

目前，只有 FireFox 支援彈性版面配置中的 gap，但您可以實際操作看看，瞭解其運作方式：

CSS Houdini

Houdini 是一組適用於瀏覽器轉譯引擎的低階 API，可讓您指示瀏覽器如何解讀自訂 CSS。也就是說，您可以使用 CSS 物件模型，透過 JavaScript 擴充 CSS。這麼做有幾個好處：

  • 讓您以更強大的功能建立自訂 CSS 功能。
  • 將轉譯問題與應用程式邏輯區隔開來更加容易。
  • 效能優於我們目前的 JavaScript 的 CSS 聚合功能，因為瀏覽器不再需要剖析指令碼，並執行第二個轉譯週期。系統會在第一個轉譯週期中剖析 Houdini 程式碼。

顯示 Houdini 與傳統 JavaScript polyfill 比較運作方式的插圖。

Houdini 是多項 API 的綜合名稱。想進一步瞭解這些裝置及其目前狀態嗎？請參閱《Is Houdini Ready?》在先前的討論中，我們介紹了 Properties and Values API、Paint API 以及動畫小程式，因為這些是目前支援的功能。我們可以輕鬆將一篇完整的貼文公布到各個令人期待的 API 上，但目前請先前往我們的講座

溢位

雖然有其他事情是想要討論，但由於沒時間深入探討這些事項，因此我們很快就講完了。⚡ 如果尚未聽過其中部分功能，請務必觀看講座的最後一部分！

  • size：可讓您同時設定高度和寬度的屬性
  • aspect-ratio：這種屬性可以為不含內建函式的元素設定顯示比例的屬性
  • min()、max() 和 clamp()：可讓您為任何 CSS 屬性設定數字限制的函式，而不只是寬度和高度
  • list-style-type 現有屬性，但很快就會支援更多範圍的值，包括表情符號和 SVG
  • display: outer inner：display 屬性即將接受兩個參數，可讓您明確指定其外部和內部版面配置，而不會使用 inline-flex 等複合關鍵字。
  • CSS 區域：可讓你填入特定非矩形的指定區域，讓內容能流入和流出
  • CSS 模組：JavaScript 能夠要求 CSS 模組，並取得豐富的物件，以便執行所需作業