一窺 Designcember 打造您在節慶日曆體驗中的體驗和工具。
正因為 12 月的精神，再加上眾多大眾會用掉倒數計時與慶祝的日曆，我們希望讓社群和 Chrome 團隊能夠突顯網路內容。我們每天會重點介紹 UI 開發和設計相關內容的部分內容，並精選 31 項重點內容，包括 26 個全新示範網站、工具、公告、Podcast、影片、文章和個案研究。
如要查看完整體驗，請前往 designcember.com。
總覽
我們的目標是盡可能以最少的位元組，提供易於存取、新穎、現代且回應迅速的網頁體驗。我們想強調新的響應式 API，例如容器查詢，並在以設計為重點且資源繁多的網站中，加入美觀的深色模式範例。為此，我們壓縮檔案、提供多種格式、使用專為產生靜態網站產生程序的建構工具、推出新的 polyfill 等等。
從奇思異想開始
我們希望 Designcember 月曆網站能展示 12 月所有想推廣的作品，同時也能做為示範網站。我們決定建構回應式公寓大樓，讓建築物可以變得更高、更窄，或更短、更寬，並讓窗戶在框架內自動重新排列。每個回溯期代表一天 (因此一項內容)。 我們與插畫家 Alice Lee 合作，將我們的願景付諸實現。
Alice 分享了令人振奮的過程和草圖，即使是早期概念也令人興奮。她在設計藝術期間，駭客入侵了建築。早期的討論內容圍繞宏觀版面配置、建築物和建築物的窗戶。隨著可用檢視區空間增加，視窗會如何調整為一、兩或三欄？縮放幅度有多大？建築物的最大尺寸為何？窗戶的移動幅度有多大？
以下是使用 grid-auto-flow: dense 的回應式原型設計預覽畫面，說明如何讓格線演算法自動放置視窗。我們很快就發現，雖然顯示比例格線可完美呈現圖片，但無法讓視窗在非一致的可用空間中放大或縮小，也無法展現容器查詢的強大功能。
當一般電網相對穩定，並且傳達建築物及其窗戶的回應方向後，我們就可以專注在單一窗戶上。某些視窗的拉伸、縮小、擠壓、放大和重新組合次數，比格狀中其他視窗還要多。
每個視窗都需要處理特定數量的調整大小擾動現象。下方是窗格原型，可展示窗格對湍流的回應情形，並顯示每個互動式窗格可調整的幅度。
使用圖像片集的視窗動畫
部分視窗會顯示動畫，為使用者提供額外的互動體驗。動畫是使用 Photoshop 逐格手繪而成。每個影格都會經過匯出，利用這個 Spritesheet 產生器轉換成 Sprite 工作表，再使用 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 採用 3 倍的像素比例。他們打算使用 imgix，在伺服器上提供最佳化的圖片和格式，但我們發現使用 Squoosh 工具手動調整圖片，可讓我們省下 50% 以上的費用。
插圖在壓縮時會遇到特殊的挑戰，尤其是 Alice 使用的筆觸和透明粗邊風格。我們選擇將每張 Photoshop 匯出的 3x png 圖片壓縮為較小的 png、webp 和 avif。每種檔案類型都有其專屬的壓縮功能，因此我們壓縮了超過 50 張圖片，找出一些常見的最佳化設定。
Squoosh CLI 在需要最佳化 200 多張圖片時就顯得非常重要，因為手動完成這些工作可能需要花上好幾天。取得常見的最佳化設定後，我們將這些設定做為指令列指示提供，並將整個 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 說明，使用者體驗將會不佳。因此，我們將圖片標示為簡報，並提供整體的視窗說明。在螢幕閱讀器上瀏覽視窗時，使用者會感受到優美的敘述體驗，我們希望這能傳達網站想要分享的奇幻和樂趣。
以下影片展示鍵盤體驗。分頁鍵、Enter 鍵、空格鍵和 Esc 鍵，都是用來協調焦點在視窗彈出式視窗和視窗之間的移動。
螢幕閱讀器體驗具有特殊的 ARIA 屬性，可讓內容更清楚。舉例來說，日期的連結只會顯示「一」或「二」，但在加入 ARIA 後，系統會將其讀出為「Day one」和「Day two」。此外，所有圖片都會在單一標籤中匯總，因此每個視窗都有說明。
天文系統，以元件為核心的靜態網站產生器
Astro 讓團隊更容易在網站協作。元件模型對 Angular 和 React 開發人員來說都很熟悉，而範圍限定的類別名稱樣式系統則可協助每位開發人員瞭解，他們在視窗上的工作不會與其他人發生衝突。
以天數做為元件
每個日子都是元件，可從建構時間資料儲存庫擷取狀態。這樣一來，我們就能在 HTML 傳送至瀏覽器前執行範本邏輯。邏輯會判斷該天是否應顯示工具提示，因為未使用中的日期不會顯示彈出式視窗。
系統會每小時執行一次建構作業，而建構時間資料儲存庫會在午夜過後的隔天解鎖。這些可自行更新且自給自足的小系統，可讓網站保持最新狀態。
限定樣式與開放式問題
Astro 會將在元件模型中編寫的樣式設定為範圍，這麼做可讓您更輕鬆地在許多團隊成員之間分配工作負載，也能讓您輕鬆使用 Open Props。Open Props Standardize.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);
}
}
我們也使用容器查詢來顯示和隱藏細節，因為在較小的尺寸下，圖片會越來越擁擠，在較大的尺寸下則會越來越空白。《Window 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) {
/* ... */
}
深色模式
設計森網站最後有一次的重要接觸，但這是一款賞心悅目的深色主題。我們想說明如何運用圖片，讓使用者能積極參與打造出色的深色模式體驗。為此，我們以程式輔助方式調整每個視窗的背景樣式，並在建立視窗圖片時盡可能使用 CSS。大多數的背景都是 CSS 漸層，方便您調整顏色值。然後將圖片疊加在這些圖片上。
其他彩蛋
個人風格
我們在頁面中加入了一些個人風格，讓網站更具個人特色。第一個是角色陣容，靈感來自我們的團隊。我們也為閒置期間加入復古風格的游標，並嘗試使用 favicon 樣式。
功能性觸控
其中一個額外的功能是「跳至今天」功能，其中有一個鳥在建築物頂端。按一下或按下 Enter 鍵，即可跳到當月當天，快速查看最新發布內容。
Designcember.com 也提供了特殊的列印樣式表，我們基本上就是提供 8.5 x 11 吋的紙上效果最佳的特定圖片，方便您自行印出行事曆，並度過一整年的節慶購物季。
總而言之，我們投入大量心力，打造有趣、新穎的現代網頁體驗，以慶祝 12 月 UI 開發活動。希望你喜歡這堂課程！
