一窺 Designcember 節慶日曆風格體驗的建構過程和工具。
為了配合 12 月的節慶氛圍，以及大家用來倒數和慶祝的各種日曆，我們想特別介紹社群和 Chrome 團隊的網路內容。我們每天都會精選一個與 UI 開發和設計相關的內容，總共精選了 31 個內容，包括 26 個新的展示網站、工具、公告、Podcast、影片、文章和案例研究。
如要查看完整體驗，請前往 designcember.web.app。
總覽
我們的目標是以盡可能少的位元組，提供無障礙、奇特、現代化且具備回應性的網路體驗。我們想強調容器查詢等新的回應式 API，並在以設計為重心的網站中加入深色模式的精美範例，該網站包含大量資產。為此，我們壓縮了檔案、提供多種格式、使用針對靜態網站產生作業最佳化的建構工具、發布新的 Polyfill 等。
從異想天開開始
Designcember 日曆網站的概念是展示我們在 12 月期間想強調的所有工作，同時也做為示範網站。我們決定建構回應式公寓大樓，可變高變窄，或變矮變寬，窗戶也會在框架內重新排列。每個視窗代表一天 (因此也代表一項內容)。 我們與插畫家 Alice Lee 合作，將願景化為現實。
Alice 充滿啟發性，分享的流程和草圖即使只是初步概念，也令人興奮。她負責美術設計，我們則負責架構。早期的討論內容圍繞在巨集版面配置、建築物和窗戶。隨著可用的檢視區塊空間增加，視窗會如何調整為一欄、兩欄或三欄？這些字體可以縮小或放大多少？建築物最大尺寸為何？視窗會移動多少？
以下是使用 grid-auto-flow: dense 的回應式原型預覽畫面，顯示格線演算法如何自動放置視窗。我們很快就發現，雖然格線的長寬比很適合展示藝術作品，但無法讓視窗在不一致的可用空間中放大和縮小，也無法展現容器查詢的強大功能。
一般格線相對穩定，且傳達了建築物和窗戶的感應方向後，我們就能專注於單一窗戶。有些視窗在格線中會比其他視窗更常延展、縮小、擠壓、放大及重新組合。
每個視窗都必須處理一定程度的調整大小擾動。以下是視窗原型，可展示視窗對亂流的反應，並顯示每個互動式視窗的預期調整幅度。
使用 Sprite Sheet 的視窗動畫
部分視窗會顯示動畫，為使用者帶來更多互動體驗。這些動畫都是在 Photoshop 中逐格手繪而成。匯出每個影格，然後使用這個精靈圖表產生器將影格轉換為精靈圖表，最後使用 Squoosh 進行最佳化。然後，CSS 動畫會使用 background-position-x 和
animation-timing-function，如下列範例所示。
.una
background: url("/day1/una_sprite.webp") 0% 0%;
background-size: 400% auto;
}
.day:is(:hover, :focus-within) .una {
animation: una-wave .5s steps(1) alternate infinite;
}
@keyframes una-wave {
0% { background-position-x: 0%; }
25% { background-position-x: 300%; }
50% { background-position-x: 200%; }
75% { background-position-x: 100%; }
}
部分動畫 (例如第六天的存錢筒) 是以步驟為基礎的 CSS 動畫。我們使用類似的技巧，透過 steps() 達到這個效果，不同之處在於關鍵影格是 CSS 轉換位置，而非背景位置。
CSS 遮罩
部分窗戶的形狀獨特，我們使用「遮罩」和 aspect-ratio，協助製作可調整大小、形狀獨特且能適應環境的視窗。
如要建立遮罩 (例如視窗 8 的遮罩)，需要一些 Photoshop 基礎技能，以及對網頁遮罩運作方式的瞭解。我們來看看第八天的時間範圍。
如要將形狀變成遮罩，必須將內部的四葉幸運草形狀獨立出來，並填入白色。白色會告訴 CSS 要保留哪些內容，白色以外的內容則不會保留。在 Photoshop 中，選取視窗內部，羽化 1 像素 (移除鋸齒問題)，然後填滿白色，並以與視窗框架相同的高度和寬度匯出。這樣一來，影格和遮罩就能直接疊加，並如預期顯示影格內的內容。
完成後，視窗內容可以修改，且一律會顯示在自訂框架內。下圖顯示視窗的深色模式版本，背景漸層不同，且光線套用了發光 CSS 篩選器。
遮蓋功能也支援以容器查詢為準的動態視窗。在視窗九中，有一個角色隱藏在遮罩後方，直到視窗縮小為止。為確保使用者無法將圖片移出影格，Alice 為我們完成了整個角色。角色會遮罩在視窗內，但植物不會，因此我們處理的另一個挑戰是將遮罩元素與未遮罩圖層分層，並確保所有元素都能一起順利縮放。
下圖顯示未對視窗和字元套用遮罩的樣子。
擠壓藝術
為了維持插圖的精確度，並確保高畫質螢幕不會模糊不清，Alice 以 3 倍的像素比例作業。我們原本打算使用 imgix，在伺服器上提供最佳化的圖片和格式，但發現使用 Squoosh 工具手動調整，可以節省 50% 以上的空間。
插畫的壓縮作業有其獨特挑戰，尤其是 Alice 使用的筆觸和透明粗邊風格。我們選擇使用 Squoosh 將每個以 3 倍大小從 Photoshop 匯出的 PNG 圖片，縮小為 PNG、WebP 和 AVIF 格式。每種檔案類型都有自己的特殊壓縮能力，我們壓縮了 50 多張圖片，才找出一些常見的優化設定。
有超過 200 張圖片需要最佳化，因此 Squoosh CLI 變得至關重要，如果手動完成所有作業，可能需要好幾天。我們取得常見的最佳化設定後，以指令列指令的形式提供這些設定，並將整個 PNG 圖片資料夾批次處理為 WebP 和 AVIF 壓縮對應項目。
以下是使用的 AVIF CLI squoosh 指令範例：
npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png
將最佳化圖片存入存放區後，我們就能開始從 HTML 載入圖片：
<picture>
<source srcset="/day1/inner-frame.avif" type="image/avif">
<source srcset="/day1/inner-frame.webp" type="image/webp">
<img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
</picture>
撰寫圖片原始碼很重複，因此我們製作了 Astro 元件，只要一行程式碼就能嵌入圖片。
<Pic filename="day1/inner-frame" role="presentation" />
螢幕閱讀器和鍵盤使用者
Designcember 的大部分體驗都透過藝術和互動式櫥窗呈現。我們認為，鍵盤使用者應能使用網站並查看視窗，螢幕閱讀器使用者則應享有良好的旁白體驗。
舉例來說，在嵌入圖片時，我們使用 role="presentation" 將圖片標示為螢幕閱讀器的呈現內容。我們認為，如果使用者體驗是介於 5 到 12 個破碎的 alt 說明，那會是不好的體驗。因此，我們將圖片標示為呈現內容，並提供整體視窗旁白。在螢幕閱讀器上瀏覽視窗時，會有一種敘事感，我們希望這能幫助網站傳達其想分享的奇想和樂趣。
以下影片展示鍵盤體驗。Tab 鍵、Enter 鍵、空格鍵和 Esc 鍵都可用來將焦點移至視窗彈出式視窗和視窗，以及從這些位置移開。
螢幕閱讀器體驗具有特殊的 ARIA 屬性，可清楚呈現內容。舉例來說，如果只有「一」或「二」的連結，但加入一些 ARIA 後，系統就會播報「第一天」和「第二天」。此外，所有圖片都會彙整成單一標籤，因此每個視窗都有說明。
Astro：靜態優先的元件導向網站產生器
Astro 讓團隊輕鬆協作開發網站。Angular 和 React 開發人員都熟悉元件模型，而範圍類別名稱樣式系統則可確保每位開發人員在視窗上進行的工作不會與其他人衝突。
以天為單位的元件
每天都是一個元件，會從建構時間資料存放區擷取狀態。這樣一來，我們就能在 HTML 傳送至瀏覽器前執行範本邏輯。這項邏輯會判斷當天是否應顯示工具提示，因為非使用中的日期不會有彈出式視窗。
系統每小時都會執行建構作業，而建構時間資料儲存庫會在建構伺服器午夜過後解鎖新的一天。這些小系統會自動更新，並自行運作，確保網站內容保持最新狀態。
範圍樣式和 Open Props
Astro 會將樣式範圍限定在元件模型內，因此可輕鬆在多位團隊成員之間分配工作負載，使用 Open Props 也變得很有趣。Open Props normalize.css 樣式可搭配自適應 (淺色和深色) 主題使用，並協助處理段落和標題等內容。
身為 Astro 的早期採用者，我們在 PostCSS 遇到了一些問題。舉例來說，由於建構問題過多，我們無法更新至最新版 Astro。您可以在這裡投入更多時間，將建構和開發人員工作流程最佳化。
彈性容器
部分視窗會放大和縮小，但會維持顯示比例，保留藝術效果。我們使用其他視窗，展示以容器查詢為基礎的元件架構功能。容器查詢是指視窗可以擁有各自的動態樣式資訊，並根據自身大小重新調整。部分視窗從窄版變成寬版，因此需要調整視窗內媒體的大小和位置。
當視窗有更多可用空間時，我們可以調整視窗的大小或子項元素，以符合空間大小。結果發現，為了滿足自適應視窗的需求，容器查詢不僅能展示功能，更是必要條件，還能大幅簡化特定版面的自動化調度管理。
.day {
container: inline-size;
}
.day > .pane {
min-block-size: 250px;
@container (min-width: 220px) {
min-block-size: 300px;
}
@container (min-width: 260px) {
min-block-size: 310px;
}
@container (min-width: 360px) {
min-block-size: 450px;
}
}
這與維持顯示比例不同。提供更多控制權和商機。許多孩子在達到特定尺寸後，會開始移動位置，以適應新的版面配置。
容器查詢也讓我們支援區塊方向 (垂直) 容器，因此當視窗長度增加時，我們可以調整樣式以適當配合。這點可從我們單獨使用的以高度為準查詢，以及以寬度為準查詢中看出：
.person {
place-self: flex-end;
margin-block: 25% 50%;
margin-inline-start: -15%;
z-index: var(--layer-1);
@container (max-height: 350px) and (max-width: 425px) {
place-self: center flex-end;
inline-size: 50%;
inset-block-end: -15%;
margin-block-start: -2%;
margin-block-end: -25%;
z-index: var(--layer-2);
}
}
我們也使用容器查詢，在圖片變小而越來越擁擠時顯示和隱藏詳細資料，在圖片變寬而越來越空曠時也是如此。第 9 個視窗就是一個很好的例子：
跨瀏覽器支援
如要打造優質的現代跨瀏覽器體驗，特別是針對容器查詢等實驗性 API，我們需要優質的 Polyfill。我們向團隊發出號召，Surma 率先建構了新的容器查詢 Polyfill。這個 Polyfill 依賴 ResizeObserver、MutationObserver 和 CSS :is() 函式。因此，所有新式瀏覽器都支援 Polyfill，具體來說，Chrome 和 Edge 88 以上版本、Firefox 78 以上版本，以及 Safari 14 以上版本都支援。使用 Polyfill 時，可採用下列任一語法：
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
深色模式
Designcember 網站的最後一個重要潤飾是美觀的深色主題。我們想向您展示如何運用藝術本身，積極參與打造優質的深色模式體驗。為此，我們以程式輔助方式調整每個視窗的背景樣式，並在建立視窗圖片時，盡可能使用 CSS。大多數背景都是 CSS 漸層，因此更容易調整顏色值。然後將藝術作品疊加在這些圖片上。
其他彩蛋
個人風格
我們在頁面中加入一些個人風格，讓網站更具特色。首先是角色陣容，靈感來自我們團隊。我們也在非活動日加入復古風格的游標，並調整了 Favicon 樣式。
功能觸控
其中一項額外功能是「跳到今天」功能，建築物頂端會出現一隻小鳥。按一下或按下 Enter 鍵，即可跳到頁面上的當月當日，快速查看最新發布內容。
Designcember 網站也提供特別的列印樣式表，我們基本上會提供最適合 8.5 吋 x 11 吋紙張的特定圖片，方便您自行列印日曆，全年都能感受節慶氣氛。
總而言之，我們投入了大量心力，打造出充滿樂趣、奇幻的新潮網路體驗，在 12 月整個月慶祝 UI 開發。希望您喜歡！
