← 所有文章

為何 Safari 27 帶來 525 項修正:來自 WebKit 實驗室的筆記

WWDC 2026 上 Safari 團隊說過最發人深省的一句話,並不是關於某項功能。在 Safari and Web Technologies group lab 一個小時的時間裡,WebKit 工程師反覆繞著同一個問題:瀏覽器團隊究竟如何決定要打造什麼,又為何從外界看來總是如此緩慢?他們一再回到的答案(轉述自實驗室現場)是:他們是真心在乎的,而且有一個您可以查證的數字為證。Safari 27 帶來 58 項新功能與 525 項修正,WebKit 稱之為「近期記憶中任何一個 Safari 版本裡最龐大的一堆修正」。1這篇文章談的,就是這個數字底下的思路,取材自實驗室,並以 WebKit 自家的版本說明為依據。

觀看:Safari and Web Technologies Group Lab(WWDC26)

WWDC 2026 Safari & Web Technologies Group Lab。

重點摘要

  • Safari 27 帶來 58 項新功能與 525 項修正,是任何 Safari 版本中最高的修正數。1實驗室將今年定調為一場「消除紙割傷」的行動:追擊那些讓平台值得信賴的小型正確性錯誤,而不只是搶眼的頭條功能。
  • 最清楚的例子,是 JavaScript 模組載入器的重寫。WebKit 的說明描述為「透過重寫 ES module loader 以符合標準,修正了多個 top-level await 的正確性錯誤」,取代了一個建立在已被棄置的 2016 年提案之上、且完全早於 top-level await 出現的實作。1
  • 實驗室以 :has() 選擇器作為案例,說明標準究竟如何從卡關走到落地:這個功能多年來被工程師視為不可能,直到 Igalia 的工程努力讓它變得夠快,如今已在每一個主流引擎中出貨。23
  • 表單控制項的故事漸趨成熟:appearance: base-select 會清除原生 <select> 的樣式,讓您從一塊乾淨的畫布開始;而更廣義的「為每一個表單控制項套用樣式」方向,仍是一份尚未定案的規格,討論小組也在鏡頭前對此公開意見不一。12
  • WebKit 與 JavaScriptCore 在每一個 Apple 作業系統上運行,包括 watchOS,而 SwiftUI 如今也擁有第一級的 WebView,因此「網頁引擎」更像是一項系統服務,而非單一的 App。24

這個數字,以及它的意義

WebKit 對 Safari 27 的定調出奇地量化。撇開新功能不談,這個版本帶來 525 項修正,是「任何 Safari 版本中最龐大的一堆修正」。1在實驗室裡,團隊把這個數字連結到的是一種姿態,而非一座里程碑:轉述其大意是,網頁開發者有時會把瀏覽器的種種抉擇讀成不在乎他們的日常體驗,而團隊的回應恰恰相反——把 Safari 上的網頁體驗弄得更差,對誰都沒有好處。2您不必純憑信任去接受這份心意,因為修正數就是證據,而實驗室自己對版本說明的形容是:那份清單長到足以讓您捲動好一陣子。2

最佳的單一例證,是一段大多數開發者永遠看不見的底層管路。WebKit 重寫了 JavaScript 模組載入器。版本說明寫得很具體:團隊「透過重寫 ES module loader 以符合標準,修正了多個 top-level await 的正確性錯誤」,因為先前的實作是「建立在一份已被棄置、且完全早於 top-level await 出現的 2016 年 WHATWG Loader 提案之上」,可能讓 import 在 export 尚未完全初始化前就存取到它們。1為了修正一整類 await 排序錯誤而重寫一個模組載入器,是一項浩大的工程,而且做對了之後,反而沒有人會察覺。這就是用一次 commit 體現的「消除紙割傷」行動。

標準究竟如何從卡關走到落地::has() 的故事

實驗室裡最受用的一段敘事,是關於 CSS :has() 選擇器——那個盼望已久的父層選擇器。討論小組的轉述版本是:在將近二十年的時間裡,瀏覽器工程師都說不行,理由是當時的晶片不夠快,無法在不拖垮頁面效能的情況下評估它,直到讓它變得可行的工程終於完成,它才跨越各家瀏覽器出貨。2這個故事底下可供查證的骨幹是真實的。WebKit 在 Safari 15.4 出貨 :has(),Chromium 隨後在 Chrome 105 跟進——工程由開源顧問公司 Igalia 主導——Firefox 則在第 121 版補齊最後一塊,於是那個多年來「不可能」的選擇器,如今已在每一個主流引擎中運作。3

實驗室把這件事連結到一條值得記住名字的設計原則。HTML 專案的「優先群體順序」(priority of constituencies)排定了當各方需求衝突時,誰的需求勝出:使用者優先於作者,作者優先於實作者,實作者優先於規格制定者,而所有這些又都優先於理論上的純粹。5正是這條規則,解釋了為何瀏覽器寧可永遠扛著一個醜陋的相容性權宜方案也不願弄壞某個網站,也解釋了為何一個對作者有益的功能,若實作起來會透過效能傷害到使用者,仍可能等上數年。:has() 就是這條規則以慢動作收斂的結果:對作者有用,卡在「讓它變快」所要付出的使用者代價上,直到那份代價降下來才得以出貨。

表單控制項計畫,以及一場公開的分歧

過去十年最被渴求的 CSS 能力終於到來:為原生表單控制項套用樣式,而不必用 <div> 把它們從頭重建。Safari 27 帶來 appearance: base-select,用 WebKit 的話來說,它讓您能「清除原生樣式,從一塊乾淨的調色盤開始」,接著疊上自己的 CSS,同時保留控制項真正的語意、鍵盤操作與無障礙功能。1它與 ::picker(select)::picker-icon::checkmark 以及一個 <selectedcontent> 元素搭配使用——也就是 為真正的 select 元素套用樣式 所涵蓋的可自訂 select 範疇。

實驗室補上的,是對這個更廣大願景有多麼未竟的坦白。把 appearance: base 擴展到每一個表單控制項,是一個已宣示的方向,而非一份已出貨的規格;討論小組更在鏡頭前對最棘手的問題自相矛盾:未套樣式的基準究竟該長什麼樣。轉述這場交鋒:一方主張,一個未套樣式的控制項應該看起來像一個樸素的現代控制項;反方則回應,「現代」是一個不斷移動的流行標靶,並非規格能夠釘死的東西,因此這個基準應該盡可能從頁面繼承,其餘則盡可能不帶任何主觀立場。2他們一致同意的那項工程限制,才是真正困難的部分:唯有當預設算繪與 DOM 結構在各家瀏覽器間完全一致時,這項功能才能成立,因為作者會同時針對兩者套用樣式。2這正是為什麼一個有 30 年歷史的問題,至今仍是進行中的工作,而非一個可以打勾的項目。

網頁引擎是一項系統服務

實驗室帶來一個有用的重新框定:WebKit 遠不只是 Safari。WebKit 與 JavaScriptCore 在每一個 Apple 作業系統上出貨,包括完全沒有瀏覽器的 watchOS,而任何會執行 JavaScript 的 App,都倚賴 JavaScriptCore。2WebKit 自家的 WWDC 素材也表達了同樣的觀點,將 App 介面描述為「由 HTML、CSS 與 JavaScript 驅動,並由 WebKit 與 JavaScriptCore——也就是 Safari 內部相同的引擎——跨各平台算繪而成」。1對開發者而言的實際影響在 2025 年落地:當時 SwiftUI 獲得了原生的 WebViewWebPage 模型,使 WebKit 成為第一級的 SwiftUI 視圖,而不再是包在 UIViewRepresentable 裡的 WKWebView4當網頁引擎深入到作業系統這個層級,「這應該做成原生還是網頁」就不再是一個非此即彼的問題。

WebKit 率先出貨了什麼,又在打造什麼

有兩條較小的脈絡值得開發者留意。其一,Safari 持續領先其他引擎出貨 CSS 功能:hanging-punctuation 多年來都是 Safari 獨有,CSS 的 filter() 函式(有別於廣受支援的 filter 屬性)仍是 WebKit 獨有,而 Safari 近期出貨了 random() 函式,並附帶一個 random-item(),用於在 CSS Values 草案所定義的離散值之間做選擇。67那種「Safari 落後了」的反射式說法,往往忽略了它有多常率先出手。

其二,網頁擴充功能的故事正在整合。跨瀏覽器的 WebExtensions 努力正從一個歷時數年的社群小組,邁向一個正式的 W3C 工作小組,並在 2025 年提出一份草案章程,目標是一份真正具互通性的規格。8而 Apple 在 WWDC 2026 主題演講上宣布了一個面向消費者的轉折:「Describe an Extension」,它運用 Apple Intelligence,從一段白話描述生成並安裝一個自訂的 Safari 擴充功能,無需 Xcode,也無需經過 App Store 來回審核。9請把它當成一則主題演講的宣布,而非一個開發者 API,但方向已很清楚:擴充功能的範疇正同時在標準層與終端使用者層兩端拓寬。

該從中帶走什麼

實驗室是一扇窗,望進大多數功能報導略過的那道取捨。瀏覽器團隊可以追逐搶眼的頭條功能,也可以追逐正確性,而 WebKit 在這個版本裡顯而易見地選擇了後者:525 項修正、一個為了一整類 await 錯誤而重寫的模組載入器,以及一個等了硬體二十年才趕上的父層選擇器。對任何在這個平台上建構東西的人來說,教訓是:當您想知道究竟什麼真的變好了,該讀的是版本說明,而不是主題演講。那些功能收錄於 可自訂的 selectCSS Grid LanesHTML model 元素;而這種步調背後的思路,則藏在實驗室裡。

常見問題

Safari 27 裡有多少項修正?

525 項修正,外加 58 項新功能,WebKit 形容這是任何 Safari 版本中最高的修正數。1實驗室將這一年定調在正確性與「紙割傷」上,而非搶眼的頭條功能。

模組載入器的重寫是什麼?

WebKit 為了符合標準而重寫了 Safari 的 ES module loader,修正了多個 top-level await 的正確性錯誤。先前的實作建立在一份已被棄置、且早於 top-level await 出現的 2016 年 WHATWG Loader 提案之上,可能讓 import 在 export 尚未完全初始化前就存取到它們。1

appearance: base 出貨了嗎?

appearance: base-select 在 Safari 27 中為 <select> 元素出貨,清除原生樣式,讓您能套用自己的 CSS,同時保留控制項的語意。1appearance: base 擴展到所有表單控制項是一個已宣示的方向,但仍是一份尚未定案的規格,而實驗室的討論小組對未套樣式的預設外觀該長什麼樣,也公開意見不一。2

Apple 真的加入了 AI 生成的 Safari 擴充功能嗎?

是的。Apple 在 WWDC 2026 主題演講上宣布了「Describe an Extension」:它運用 Apple Intelligence,從一段自然語言描述生成並安裝一個自訂的 Safari 擴充功能,無需 Xcode 或 App Store。9它是一項消費者功能,而非一個開發者 API。


Safari 功能系列文章涵蓋的是「是什麼」:為真正的 <select> 套用樣式用於原生砌體佈局的 CSS Grid Lanes,以及 HTML <model> 元素。這一篇涵蓋的,則是這種步調背後的「為什麼」。完整的系列總覽,請見 Apple 生態系列

參考資料


  1. WebKit, News from WWDC26: WebKit in Safari 27 beta. Source for the 58 new features and 525 fixes (“the largest pile of fixes in any Safari release”), the ES module loader rewrite (“Fixed multiple top-level await correctness bugs with a rewrite of the ES module loader for standards compliance,” replacing an implementation “based on an abandoned 2016 WHATWG Loader proposal that predated top-level await entirely”), the appearance: base-select description (“clear the native styling and start with a clean palette”) with ::picker(select)/::picker-icon/::checkmark/<selectedcontent>, and the framing of WebKit and JavaScriptCore as the engines behind app interfaces across Apple platforms. 

  2. Apple, WWDC 2026 session 8015, Safari and Web Technologies Group Lab. Paraphrased from a locally transcribed recording; Apple publishes no official captions for the labs, so the wording here is a paraphrase, not a quotation, and exact phrasing is unverified. Source for the team’s caring-about-the-platform framing tied to the length of the release notes, the :has() narrative that engineers resisted it for roughly two decades on performance grounds, the live disagreement over the unstyled appearance: base baseline (modern-control vs inherit-from-page) and the cross-browser identical-rendering-and-DOM-structure constraint, and the point that WebKit/JavaScriptCore run on every Apple OS including watchOS. 

  3. WebKit, Using :has() as a CSS Parent Selector and much more, and the cross-engine shipping record: Safari 15.4, Chrome 105 (engineering led by Igalia), Firefox 121. Source for :has() shipping in all major browser engines after years of being considered infeasible. 

  4. Apple, WebKit for SwiftUI and WWDC 2025 session 231, Meet WebKit for SwiftUI. Source for SwiftUI’s native WebView and WebPage model introduced in the 2025 releases, making WebKit a first-class SwiftUI view. 

  5. W3C, HTML Design Principles: Priority of Constituencies. Source for the ordering “users over authors over implementors over specifiers over theoretical purity.” 

  6. MDN / caniuse, hanging-punctuation and the CSS filter() function. Source for both being supported in Safari/WebKit and not in Chrome or Firefox at time of writing (the filter() function is distinct from the widely supported filter property). 

  7. W3C, CSS Values and Units Module Level 5, which defines random() and random-item(). Safari has shipped the random() function; random-item() selects among discrete keyword or property values. 

  8. W3C, WebExtensions Community Group and the 2025 draft WebExtensions Working Group charter. Source for the cross-browser WebExtensions effort moving from a community group toward a formal Working Group. 

  9. Apple announced “Describe an Extension” at the WWDC 2026 keynote, generating and installing a custom Safari extension from a natural-language description via Apple Intelligence, without Xcode or the App Store. Reported by MacRumors, June 8, 2026. Described here as a keynote announcement and consumer feature, not a developer API. 

相關文章

CSS Grid Lanes:Safari 原生瀑布流布局

CSS Grid Lanes 用三行 CSS 為 Safari 26.4 帶來原生瀑布流布局,並以 flow-tolerance 旋鈕修正瀑布流長久以來的 tab 順序問題。

2 分鐘閱讀

可自訂的 Select:終於能為真正的 <select> 設定樣式

Safari 27 與 Chrome 135 讓您能為真正的 select 元素設定樣式:appearance: base-select、::picker(select)、option 中的豐富 HTML,以及可替換的按鈕。

4 分鐘閱讀

無建構工具宣言:不用打包工具直接發布

FastAPI + HTMX + 純 CSS,零建構工具卻達成完美 Lighthouse 分數。真實的生產數據、誠實的取捨,以及清晰的界線。

3 分鐘閱讀