歡迎閱讀第二期 Chrome 開發人員快訊，瞭解社群和 Chrome 的最新動態。這是我們全新推出的幕後故事系列，將分享我們的工作方式，並快速介紹一些您應留意的重大更新。
我是 Chrome 開發人員關係團隊的 Rachel Andrew，負責 web.dev 和 developer.chrome.com 的內容。我從事網頁工作超過二十年，專注於開放式網頁標準和 CSS，也是 CSS 工作組的成員。
兩個月前，我們在 Google I/O 大會上分享了幾項重大更新，說明我們如何協助開發人員打造更快速、更強大的網路，同時確保使用者資訊安全無虞。
其中一項最顯著的進展 (我們很高興社群也注意到！) 是團隊投入大量心力，在網路上支援更多 CSS 和 UI 功能。在本期 Chrome 開發人員內幕消息中，我們將帶您一探幕後，瞭解這項工作的幕後推手、我們如何支援 CSS 和 UI 開發人員，以及未來的發展。因此，我很榮幸能主持本期「幕後花絮」。
媒體報導
在第一篇 Chrome 開發人員內幕中，我們分享了 Compat 2021 和 Interop 2022 計畫的最新消息。瀏覽器供應商和生態系統參與者攜手合作，為網頁帶來更多功能，並支援所有瀏覽器。這項計畫的重點在於 CSS，因為瀏覽器不相容是 CSS 開發人員面臨的最大挑戰之一。
雖然這對大多數人來說可能不是新聞，但我們很高興看到瀏覽器已取得的進展。
上個月初，我們看到 Safari 發布了 Safari 16.0 Beta 版，其中包含 容器查詢、子格線和 Flexbox 檢查器等令人期待的功能。Firefox 和 Chrome 近期發布的版本包含許多令人期待的功能和修正內容，我會在每月的「網路平台新功能」系列文章中，介紹穩定版和 Beta 版瀏覽器的重要更新。
內部消息：支援 CSS 和 UI 開發人員
2022 年是 CSS 功能蓬勃發展的一年，我們認為現在很適合帶您一探幕後花絮。我與網頁 UI 和開發人員工具的開發人員關係主管 Una Kravets，以及專注於 CSS 和 HTML API 的網頁 UI 產品經理 Nicole Sullivan 進行對談，瞭解 Chrome 支援 UI 開發人員的歷程。
首先，請兩位都完成以下步驟。請簡單介紹一下自己。
Nicole：我是 Chrome 網頁 UI 的產品經理。我專注於新的 CSS 和 HTML API，以及建構 UI 的開發人員和設計師。這個領域令人振奮，即將推出一些非常重要的 API，例如容器查詢、範圍，以及 (希望！) 垂直節奏。
Una：我是 Web UI 和開發人員工具 DevRel 團隊的領導者。我們專注於支援網頁平台上的 UI 工程師，確保他們擁有邁向成功所需的工具。包括 CSS API 和 HTML 元件，以及開發人員工具功能，可查看有效變更和意見回饋。
過去幾年來，Chrome 對 UI 開發人員的支援速度加快。你認為為什麼這麼久才到這裡？最大的挑戰是什麼？
Una：我們需要證明這項工作的重要性，以及為何應優先處理。我們在 2019 年進行 MDN DNA 調查，發現 UI 是平台最令人困擾的問題之一。自此之後，我們持續以資料為指引，進行 MDN 和內部開發人員滿意度調查。因此，我們得以獲得更深入的領導層支持，並優先處理 UI 領域中一些最受歡迎的開發人員功能，這些功能也是 Compat 2021 和 Interop 2022 等計畫的主要重點。
Nicole：除了獲得領導階層的支持，我們也必須找到適當的方式，將這些 API 提供給開發人員。我剛加入 Chrome 時，在名為「分層 API」(簡稱 LAPIs) 的專案中搞砸了這件事。LAPIs 的目標是為開發人員提供可直接使用的元件體驗。我還是認為這是很棒的目標，但我們犯了很多錯誤！我們首先著重於快顯通知和虛擬清單。Toast 幾乎無法製作成無障礙版本，虛擬清單也是最難正確使用的元件之一。我們立意良善，但這項計畫對開發人員沒有幫助，因此我們終止了這項計畫。以艱難的方式學習並不容易，但每個錯誤都推動了現在的 CSS 和 HTML 復興。
我們來進一步瞭解 LAPIs。這是怎麼一回事？
Nicole：就 LAPIs 而言，我們知道網頁需要更接近建構原生 UI 的嵌入式元件開發人員體驗。很明顯，重新發明輪子會阻礙開發人員。我已經數不清自己職業生涯中建了多少分頁！也就是說，我們嘗試透過在瀏覽器中隨附 JavaScript 來解決這個問題，但這非常困難。當時沒有人在瀏覽器中發布過 JavaScript，也不清楚 JavaScript 應如何與瀏覽器算繪引擎的 C++ 程式碼互動。我們聽取其他瀏覽器供應商的意見 (感謝 Mozilla！)，並放棄了該做法，因此能夠透過 Open UI 找到更合適的解決方案。透過 HTML 和 CSS，我們最終能獲得彈性且宣告式的解決方案。由於它是宣告式，我們可以內建無障礙功能，這在 JavaScript 中並不容易。我對這項技術的發展前景感到非常興奮。我們正努力支援 selectmenu、popup、tooltip、nav、accordion、tabs、carousel 和 toggle，這些都是非常重要的 UI 設計模式。
因此我們學到很多。我知道這個領域還有其他計畫，例如 CSS Houdini。這是怎麼回事？
Una：沒錯，CSS Houdini 是我們從社群學習的另一個領域。Houdini 功能非常實用，但許多功能層級太低，無法獲得廣泛採用和支援。我們發現，導入低階 API 不一定能減少開發人員的阻力。反之，著重於更高層級的解決方案和需求，有助於獲得跨瀏覽器支援，以及在生態系統中推動進展所需的登陸頁面。我們目前在 https://ishoudinireadyyet.com/ 追蹤進度。
說到跨瀏覽器支援，Interop 2022 和 Open UI 等計畫似乎為社群帶來顯著的正面成果。您從開發人員那裡聽到什麼？
Una：我們經常聽到開發人員抱怨「設計在不同瀏覽器上的運作方式不一致」。為解決這個問題，我們與其他瀏覽器供應商合作，優先推出一些最受開發人員歡迎的功能。我們收到的社群意見回饋也大多是正面的。此外，透過名為 RenderingNG 的大型重新架構作業，我們得以更有效率地推出部分功能。開發人員很高興他們多年來期盼的功能終於要推出，而且還能跨瀏覽器使用。
Nicole：社群的興奮感顯而易見。你可以在 Twitter 上查看。:)
與生態系統合作，是我們讓開發人員生活更輕鬆的關鍵。我知道您的團隊在這方面做了許多工作。可以請您分享一些細節嗎？
Nicole：首先，我一直對開發人員在網路上建構的專案感到敬佩。從最小的程式庫到完整的架構，開發人員正在打造令人驚豔的產品。這是一個很棒的創作者社群。Chrome 正在採取多項措施，與這些專案建立更緊密的連結。
舉例來說，我們幾年前開始使用 React 和 Angular 等 JavaScript 架構。以及中繼架構，例如 Next、Nuxt 和 Gatsby。去年，我們開始對 Sass、Bootstrap 和 Material 等 UI 工具和架構採取相同做法。希望明年能與 GreenSock 和其他工具合作，讓開發人員的工作更輕鬆。我剛在 Smashing Conference 聽完 GreenSock 的 Cassie Evans 演講，很想與動畫領域的人合作。
那麼，我們認為網頁版 UI 生態系統的最大商機在哪裡？
Una：就大好商機而言，我覺得我們才剛開始瞭解可自訂網頁體驗的潛力。容器查詢和 CSS 使用者偏好媒體功能等新 API，正在重新定義開發人員對回應式設計的看法。此外，我也很期待協作設計體驗，讓開發人員和設計師能與網站訪客共同作業。
Nicole，貴團隊的發展藍圖接下來有哪些規劃？
Nicole：並非所有探索都會變成可發布的產品，但目前有許多事情讓我感到非常興奮：
Una 提到第一件事，就是我們正在啟用回應式設計，以元件為基礎。這項工具包含色彩系統設計工具，設計師可根據使用者偏好設定 (例如深色模式) 調整設計。舉例來說，OKLCH 色域可讓不同色調的亮度保持一致。設計師可以從選擇顏色開始，進而設計顏色之間的關係，不會產生混濁的調色盤！
我們也正在開發一些最受歡迎的 API，例如容器查詢、層疊層、父項選取器 (:has)、範圍樣式和巢狀結構。開發人員需要這些項目，才能建構彈性設計系統，並充分運用可重複使用的元件。
捲動連結的動畫是另一個有趣的領域。我很喜歡 Steve Gardner 的示範。他設計的網站捲動時非常流暢，而且捲動時會觸發酷炫的飛機動畫。雖然這些效果很有趣，但要正確套用並不容易，尤其是要兼顧無障礙功能時。因此我們目前正在對這項功能進行無障礙使用者測試。
我個人最期待的是內建的網頁 UI 控制項。開發人員不斷重複建構相同的索引標籤集，我覺得瀏覽器可以提供協助。Open UI 團隊正在開發 selectmenu、popup、tooltip、tabs、nav、accordion 和 toggle 等元件。我們正在研究如何將無障礙功能納入這些瀏覽器基本元素，讓網路隨著時間推移，預設就能提供無障礙體驗。開發人員可以專注於更複雜細微的問題，而瀏覽器則可支援分頁索引等基本功能。這可能需要另外發布貼文，所以我們就先談到這裡！
最後，我們會持續投入資源，提升瀏覽器之間的互通性。我們很榮幸能與 WebKit 和 Gecko 的同仁合作，為開發人員帶來一致的體驗。我們清楚聽到開發人員的心聲，瞭解大家希望推出這項功能！
此外，如果您還沒看過，無縫網頁團隊的共用元素轉場效果 API 將改變網頁設計方式。設計師將能輕鬆地在實體空間中調整設計，Jake Archibald 提供了絕佳的示範。
如果標準進展順利，我們甚至可能在今年探討垂直節奏！我們能夠以 LayoutNG 為基礎，解鎖許多功能。
感謝兩位。我們相信整個社群都和我們一樣，很期待看到網頁版 UI 領域的改善和功能以全新速度推出。但仍有許多概念需要掌握，您認為應該從何處著手？
Una：在 I/O 大會的網路平台新功能主題演講中，我們介紹了今年推出的許多重要功能。Adam Argyle 也撰寫了一篇精彩文章，介紹所有新推出的 CSS 功能。目前我會持續關注穩定版本，並留意管道中即將推出的其他工作。你很棒的「網路平台新功能」系列很適合用來追蹤這類資訊。訂閱 web.dev 電子報後，開發人員也會在收件匣中收到這類內容。如果您是開發人員，想參與並協助完成上述工作，加入 Open UI 是支援這項計畫的最佳方式之一。
即將推出的重大更新
我們秉持一貫傳統，提前告知您即將推出的變更，方便您在建構網路體驗時留意。
將 Cookie 的 max-age 限制為 400 天
- 更新內容：如果使用明確的
Expires/Max-Age屬性設定 Cookie，系統現在會將值上限設為 400 天。先前沒有限制，Cookie 的到期日可設為數千年後。這項限制的目標是在常見的使用模式與尊重使用者隱私之間取得平衡。只要每 400 天造訪一次網站，Cookie 就會重新整理，確保服務持續運作，使用者可以放心，Cookie 不會長期留在瀏覽器中。 - 預估時間表：Chrome 104 (2022 年 8 月 2 日推出穩定版) 將支援這項功能。
- 開發人員行動號召：使用者造訪網站時，開發人員可能需要比以往更頻繁地主動重新整理 Cookie。否則，使用者可能會在 Cookie 首次設定後的 400 天登出。
希望您喜歡本期 Chrome 開發人員快訊。如果錯過第一期，請參閱這篇文章。我們期待在下個季度為您帶來更多內容。
在此之前，歡迎告訴我們你對本期 Chrome 開發人員快訊的看法，以及我們能如何改進。
你對本期《The Chrome Dev Insider》有什麼看法？分享意見。