歡迎閱讀第二期 Chrome 開發人員內幕消息，我們將分享社群和 Chrome 的最新消息和令人興奮的內容。本集內容將帶您一窺幕後工作人員的幕後故事，並快速瀏覽一些您應該留意的重大更新。
我是 Chrome 開發人員關係團隊的 Rachel Andrew，也是 web.dev 和 developer.chrome.com 的內容負責人。我從事網頁相關工作超過二十年，專注於開放式網頁標準和 CSS，也是 CSS 工作小組的成員。
兩個月前，我們在 Google I/O 大會上分享了一些重要更新，說明我們如何協助開發人員打造更快速、更強大的網站，同時確保使用者資訊的安全和隱私。
其中一個值得注意的點 (我們很高興社群有注意到！) 是團隊為了支援更多 CSS 和 UI 功能，正在進行大量工作。在本期 Chrome 開發人員內幕消息中，我們將帶您一窺幕後，瞭解這項工作的幕後推手、我們如何致力於支援 CSS 和 UI 開發人員，以及未來的發展方向。因此，我很高興能主持這一期的「Insider」節目。
媒體報導
在第一期 Chrome 開發人員內部消息中，我們分享了 2021 年相容性和 2022 年互通性計畫的最新資訊。瀏覽器供應商和生態系統參與者一直與我們合作，為網路帶來更多功能，並且支援所有瀏覽器。瀏覽器不相容是 CSS 開發人員面臨的最大挑戰之一，因此這項計畫特別著重於 CSS。
雖然這對大多數人來說可能不是新聞，但我們很高興看到各瀏覽器的進展。
上個月稍早時，Safari 宣布推出豐富的版本，其中包含 Safari 16.0 Beta 版，提供 容器查詢、子格柵和 Flexbox Inspector 等令人興奮的功能。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，例如 Container Queries、Scope 和 (希望有) vertical rhythm。
Una：我負責網頁使用者介面和開發人員工具開發人員關係團隊。我們專注於為網路平台的 UI 工程師提供支援，並確保他們能取得成功所需的工具。這包括 CSS API 和 HTML 元件，以及開發人員工具功能，可查看實際變更和意見回饋。
Chrome 在過去幾年內，持續為 UI 開發人員提供支援，為什麼會花這麼長的時間才到達這裡？最大的挑戰為何？
Una：我們需要進行一些工作，證明這項工作的重要性，以及為何應將其列為優先事項。我們從 2019 年的 MDN DNA 問卷調查開始，這項調查指出 UI 是平台上的主要痛點。自那時起，我們持續透過 MDN 和內部開發人員滿意度問卷調查，以資料做為指南。這一切的結果就是，我們能夠獲得更深層的領導層支持，並能將工程工作優先處理 UI 領域中開發人員最常要求的功能，這些功能也是 2021 年相容性和 2022 年互通性等計畫的主要重點。
Nicole：除了獲得主管階層的支持，我們還必須找到正確的方式，將這些 API 提供給開發人員。我剛加入 Chrome 時，在名為「Layered APIs」 (簡稱 LAPI) 的專案中搞砸了這件事。LAPI 旨在為開發人員提供即插即用元件體驗。我仍然認為這是值得追求的目標，但我們犯了很多錯誤！我們首先著重於Toast 通知和虛擬清單。彈出式通知幾乎無法讓使用者輕鬆存取，而虛擬清單則是難以正確處理的元件之一。我們的初衷是好的，但這並未對開發人員有所助益，因此我們終止了這個專案。雖然學習過程中難免會犯錯，但每個錯誤都會為 CSS 和 HTML 帶來新生機，這就是目前的現況。
讓我們進一步討論 LAPI。這是怎麼一回事？
Nicole：就 LAPI 而言，我們知道網頁需要提供可立即使用的元件開發人員體驗，以便更接近原生 UI 的建構方式。顯然，重新發明輪子會讓開發人員陷入困境。我無法計算自己在職涯中建立的分頁數量！不過，我們嘗試透過與瀏覽器一併提供 JavaScript 來解決這個問題，但這非常困難。之前沒有人曾在瀏覽器中發布 JavaScript，因此我們不清楚該如何與支援瀏覽器轉譯引擎的 C++ 程式碼互動。我們聽取了其他瀏覽器供應商的意見 (感謝 Mozilla)，並放棄了這個做法，因此我們得以透過開放式 UI 找到更優質的做法。我們採用 HTML 和 CSS，最終打造出靈活的宣告式解決方案。由於這是宣告式語言，我們可以以 JavaScript 無法輕易做到的方式，將無障礙功能納入程式碼。我很期待這項功能的未來發展。我們正在努力支援選單、彈出式視窗、工具提示、導覽、摺疊式、分頁、輪轉介面和切換按鈕等非常重要的 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 和其他工具合作，為開發人員帶來更便利的體驗。我剛剛看到 GreenSock 的 Cassie Evans 在 Smashing Conference 發表演講，我很期待能與動畫領域的人士合作。
那麼，我們認為網頁版 UI 生態系統有哪些最大商機？
Una：就商機而言，我認為我們才剛開始探索可自訂網站體驗的潛力。容器查詢和 CSS 使用者偏好媒體功能等新 API 正在重新定義開發人員查看回應式設計的方式。我也很期待協同設計體驗，讓開發人員和設計人員能與造訪網站的使用者合作無間。
Nicole，你團隊的發展藍圖接下來會著重哪些項目？
Nicole：並非所有探索都會成為可發布的內容，但目前有許多我非常期待的內容：
Una 提到的第一件事，就是我們要啟用回應式、以元件為基礎的設計。其中包含設計色彩系統的工具，方便設計師回應使用者的偏好設定，例如深色模式。舉例來說，OKLCH 色域可讓色調的亮度保持一致。設計師可以從選擇顏色，轉而設計顏色之間的關係，不會造成調色盤看起來混濁不清！
我們也正在開發一些使用者最常要求的 API，例如容器查詢、分層層級、父項選取器 (:has)、區隔樣式和巢狀。開發人員需要這些元件，才能建立充滿可重複使用的元件的彈性設計系統。
捲動連結動畫是另一個有趣的領域。我很喜歡 Steve Gardner 的示範。他擁有順暢的捲動體驗，以及捲動時會觸發的酷炫飛機動畫。雖然這些功能很有趣，但要做出正確的設計並不容易，尤其是要考量無障礙性。因此，我們目前正在針對這項功能進行無障礙使用者測試。
我個人最期待的是內建的網頁 UI 控制項。開發人員不斷重複建立相同的分頁集，我認為瀏覽器可以提供協助。在 Open UI 中，我們正在處理選單、彈出式視窗、工具提示、分頁、導覽、摺疊式面板和切換按鈕等元件。我們正在研究如何將無障礙功能整合到這些瀏覽器原始元素中，讓網頁在一段時間後，能夠預設為無障礙。開發人員可以專注於更複雜和細微的問題，而瀏覽器則可支援分頁的操作方式等基本功能。這可能需要專文說明，所以我先說到這裡！
最後，我們會持續投資於瀏覽器之間的互通性。與 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 開發人員內幕的看法，以及我們可以如何改善。
你對這期 Chrome 開發人員內幕有什麼看法？提供意見。