導讀

目前，在兩大主流移動智能操作系統iOS和Android上，默認的瀏覽器內核都是WebKit，而且分別以Framework的方式推出了UIWebKit和WebView組件，使得第三方開發者可以據此構建自己的瀏覽器或使用Web技術展現內容的各種復雜應用。

近日，Safari 15.4為WebKit添加了70多個新增功能，其中包含新的Web技術、更新和修復，這也是在2022年推出的第一個大型WebKit版本。Safari 15.4目前適用于macOS Monterey 12.3、iPadOS和iOS 15.4。具體新增特性如下：

HTML

WebKit通過<img>元素的加載（loading）屬性添加了對延遲加載圖像的支持，為Web開發人員提供了一種簡單的方法來指示瀏覽器延遲加載的某些圖像。 

經過多年關于可訪問性標準化的辯論，如今終于有了解決方案，WebKit增加了對<dialog>元素和：：Background偽元素的支持。<dialog>元素提供了一種強大的方法來創建覆蓋和模態。

WebKit還增加了對全局自動聚焦屬性的支持，允許開發人員在頁面加載或顯示<對話框>時指示哪個元素應該是焦點。

CSS

（1）CSS架構的特性   

2022年CSS的新增功能為Web開發人員構建代碼提供了革命性的新方法，使代碼重用、創建設計系統以及與復雜應用程序集成變得更加容易。 首先，登陸Safari，WebKit添加了對:has()偽類的支持。這個選擇器滿足了人們長期以來對“父選擇器”的渴望（這是一種基于元素內容有條件地應用CSS規則的方法）。長期以來，人們一直認為采用這樣的選擇器是不可能的，但WebKit團隊找到了一種高度優化性能的方法，并提供了一種不會降低頁面速度的靈活解決方案。 WebKit增加了對級聯層（Cascade Layers）的支持，這是一種將樣式組織到層中的強大方法，可以在每個層內獨立計算特異性。  

Web開發人員可以創建一個“框架”層和一個“自定義”層——將所有CSS從第三方框架分配到“框架”層，并在“自定義”層中編寫自己的代碼。他們可以指定自定義層中的所有內容都應該優于框架層中的所有內容，無論每個層中使用的選擇器的特殊性如何。級聯層幾乎同時出現在所有主要瀏覽器中，并包含在Interop 2022中，這讓它成為未來Web開發人員會重視的工具。 

WebKit還通過contains屬性添加了對CSS Containment的支持——所有四種類型：大小、布局、樣式和繪制。 

（2）附加功能

Web開發人員非常需要一種類似于現有視口單元，但能在移動設備上工作得更好的工具，因為在移動設備上，隨著用戶滑動頁面，瀏覽器視口的尺寸會發生變化。

新的視口單元就是這種解決方案。100svh是指可能的最小視口高度的100%，100lvh是指最大可能視口高度的100%。100dvh指的是動態視口高度的100%——這意味著該值將隨著用戶滑動移動設備的屏幕而改變。

還有其他新的視口單元——svw、lvw和dvw在寬度方面也有相同的用途。為了涵蓋vmin和vmax的小型、大型和動態版本，svmin、svmax、lvmin、lvmax、dvmin和dvmax單元也要實現。為了支持邏輯維度，新的vi和vb在視口內聯維度和視口塊維度上與現有視口單元類似。svi、svb、lvi、lvb、dvi和dvb為小型、大型和動態版本的內聯維度和塊維度提供邏輯維度單元。

WebKit增加了對：focus visible偽類的支持，以僅在瀏覽器呈現焦點指示器時設置其樣式。

為了使原生表單控件更具可定制性，accent-color屬性為Web開發人員提供了一種更改表單控件用戶屬性（UI）特定部分顏色的方法。在macOS、iPadOS和iOS上，<input type="checkbox">、<input type="radio">、<progress>、<select>和帶有<datalist>的文本輸入類型支持強調色。此外，在iPadOS和iOS上，<input type="range">、<button>和<input type="button">支持強調色。 

WebKit修復了具有alpha透明度的顏色之間插值的錯誤，改進了漸變支持。  

此外，WebKit還添加了對calc()數學函數的支持，包括sin、cos、tan、e、pi、exp、log、atan、acos、asin和atan2。 

（3）排版  

Safari15.4中增添的幾個新WebKit功能豐富了Web排版的可能性。 

WebKit添加了對字體調色板CSS屬性和@font-palette-values規則的支持。

font-palette屬性為Web開發人員提供了一種方法，可以選擇包含在彩色字體中的幾個不同的預定義調色板中的一個。例如，聲明字體的深色調色板用于網站的深色模式設計。@font-palette-values規則為Web開發人員提供了一種定義自己的自定義調色板的方法，用于重新設置彩色字體的顏色。

用于放大的大寫字母的顏色字體是Bradley Initials DJR Web，此處顯示的是其默認調色板、由Web開發人員創建的自定義調色板、包含在字體中的替代調色板，并且根據用戶的喜好移除了一些顏色。 

WebKit添加了對text-decoration-skip-ink的支持，以控制下劃線和上劃線在通過字形上升和下降時呈現的形式。WebKit之前通過text-decoration-skip支持這一排版功能，但由于尚無其他瀏覽器支持short-hand，WebKit對long-hand的支持將更容易取消下劃線和上劃線。 

此外，WebKit添加了對ic單元的支持，在排版CJK腳本時很有用。

（4）停用WebKit前綴  

為了減少對前綴的依賴，WebKit新支持了幾個CSS屬性和值，這些屬性和值僅在早期形式中可用。帶前綴的版本仍然有效，現在別名為無前綴的版本。Safari15.4添加了對以下內容的支持： 

外觀，包括自動呈現

• mask，以及常用形式mask-image、mask-size、mask-repeat-x、mask-repeat-y、mask-origin  
• 背面可見性  
• 垂直組合文本
• 打印顏色調整  
• text-align屬性的父CSS值  

WebKit還刪除了非標準CSS屬性：-WebKit邊框擬合、-WebKit頁邊距折疊、-WebKit頁邊距頂部折疊、-WebKit頁邊距底部折疊、-WebKit折疊前頁邊距、-WebKit折疊后頁邊距以及-WebKit背景合成。

Web API

Web API是Web的應用程序編程接口，它可以擴展瀏覽器的功能，簡化復雜的功能，為復雜的代碼提供簡單的語法。所有瀏覽器都有一組內置的 Web API 來支持復雜的操作，并幫助訪問數據。

Safari 15.4包括對WebKit中Web API的許多升級，以幫助Web開發人員提供更好的用戶體驗。

對BroadcastChannel的支持允許來自源的選項卡、窗口、iframe和Worker相互發送消息。這可以實現跨多個選項卡同步站點的登錄狀態等體驗。 

WebKit支持的另一個新機制是Web Locks API，它可以從選項卡、窗口、iFrame和Worker中的源節點作為異步鎖定控件來管理對資源的訪問。

開發人員還可以使用CSS滾動行為屬性或JavaScript中window.scroll()、window.scrollTo()和window.scrollBy()方法中的行為選項來控制元素的滾動行為。

這種新的支持使開發人員能夠在立即跳轉到視口中的某個位置或平滑地為滾動操作設置動畫之間進行選擇。

ResizeObserver API更新了對ResizeObserverEntry使用的ResizeObserverSize接口的支持，以幫助開發人員觀察元素的元素框大小屬性的變化。

StructuredClone(value)的添加提供了一個實用程序，該實用程序使用結構化克隆算法同步執行深度復制，以克隆和傳輸輸入值中的對象。

WebKit對文件系統訪問API和Origin Private File System的支持首先在Safari15.2中發布。Safari15.4在FileSystemFileHandle中引入了getFile()方法，可以更方便地從文件系統中讀取文件。此外，WebKit更新了WriteableStream以使用文件系統訪問API。

JavaScript

此次，JavaScript的新功能和更新為開發人員帶來了更多便利。其方便的新數組功能使得使用findLast()和findLastIndex()方法從數組末尾開始搜索變得更好。這些方法可幫助開發人員避免需要首先使用reverse()來改變數組的典型方法。

另外，JavaScript還支持at()方法訪問指定整數索引處的條目，特別是支持使用負整數從數組末尾開始。 

let list = ['banana','cherry','orange','apple','kiwi'];

// Instead of this:

console.log(list[list.length-2]);

// It's as easy as:

console.log(list.at(-2));

新的語言工具對象Object.hasOwn()簡化了檢測對象何時具有屬性本身，即未繼承或不存在的屬性。 

國際化

隨著標準流程定義了更多的國際化特性，WebKit繼續定期更新其Intl實現。最新版本包括使用Intl Enumeration API識別本地時區、排序規則、日歷、編號系統和貨幣的支持值。

更新到V2的Intl.Locale公開了新信息，其中包括日歷周數據（例如一周的第一天）、文本信息（例如書寫方向）以及其他區域相關的默認值（例如日歷、12小時或24小時周期），以及編號系統。 

WebKit還將Intl.DisplayNames更新到V2，添加了對日歷和dateTimeField名稱以及語言顯示選項的支持。 

添加到Intl.PluralRules的selectRange()方法為范圍（例如0-1項）提供了區域設置正確的復數形式。Intl.NumberFormat V3更新添加了formatRange()和formatRangetoParts()方法，用于使用區域設置感知約定以及新的useGrouping、roundingPriority、roundingIncrement、trailingZeroDisplay和signDisplay選項來格式化數字范圍。

最后，Intl.DateTimeFormat包括對四個新的時區名稱選項的支持：shortOffset、longOffset、shortGeneric和longGeneric。

Web應用程序

對Web App Manifest和ServiceWorker的更新，改進了Safari中網站的用戶體驗，以及iOS和iPadOS上主屏幕上保存的Web應用程序。 Web App Manifest改進包括確保瀏覽器始終在頁面加載期間獲取清單文件，而不是在用戶從“共享”菜單中選擇“添加到主屏幕”。這種方法提高了可靠性，并且還允許清單文件定義Safari中網頁的特征。  此外，現在支持在Web應用清單文件中聲明圖標。當HTML頭部中沒有定義apple-touch-icon，并且用于聲明圖標的清單文件代碼省略“目的”鍵或包含“目的”時，Safari和iOS使用清單聲明的圖標。使用apple-touch-icon定義圖標優先于manifest聲明的圖標，以便為使用此技術為iOS定義特定圖標的Web應用程序提供一致的行為，這與其他移動平臺不同。 開發人員現在可以在ServiceWorker中啟用導航預加載，以提高加載性能，并避免阻塞網絡請求的ServiceWorker啟動延遲。還有新的支持允許用戶下載由ServiceWorker生成的文件。WebKit還提高了使用FormData和通過ServiceWorker的文件使用FormData文件的可靠性。  

媒體

WebRTC協商API現在完全符合WebRTC 1.0規范，以支持WebRTC完美協商。這是一種解決在兩個遠程對等方在協商期間可能發生的潛在同步問題的方法。

WebKit添加了對音頻和視頻的帶內章節軌道的支持。帶內文本軌道在容器內為媒體本身提供字幕或章節標記信息，而不是在HTML中聲明或注入JavaScript。以前的版本，已經支持像CEA-608這樣的帶內字幕軌道。現在，帶內章節軌道也能獲得支持，其中“提示”代表章節的開始時間和標題。

WebKit在<video>上添加了對requestVideoFrameCallback()的支持，當有新的視頻幀可供顯示時，它允許調用者得到通知，并提供有關該幀的元數據。  

隱私

Safari 15.4繼續致力于隱私保護，并進一步推動WebKit提出的以保護隱私的方式衡量廣告的網絡標準，它對隱私點擊衡量提供了三個更新：

添加了通過不可鏈接的令牌來預防轉化欺詐，以觸發商家網站上的事件。 

• 增加了對商戶網站上相同站點轉換像素的支持，以消除對跨站點像素的依賴。
• 允許測量發布商網站上嵌套的跨站點iframe中的鏈接。  

安全

Safari 15.4中的WebKit改進了對Level 3級別的內容安全策略的支持，增強了對內容加載的安全控制，并幫助Web開發人員降低跨站點腳本和其他漏洞的風險。已經更新內聯腳本、內聯樣式和eval執行的阻止資源沖突報告，以符合Web標準。

對“strict-dynamic”、“unsafe-hashes”和“report-sample”源表達式的新支持為開發人員提供了更大的靈活性。開發人員還可以使用對哈希源表達式的新支持，安全地在其頁面中包含外部JavaScript。

該版本還刪除了對XSS Auditor的支持，它已被CSP和COEP等現代跨域防御所取代。

WKWebView

使用WKWebView（包括iOS和iPadOS上的第三方瀏覽器）的開發人員可以利用新的WKPreferences進行額外的用戶體驗控制。iOS、iPadOS和macOS上的應用現在可以控制允許或阻止web內容使用全屏API。另一個新首選項允許啟用或禁用特定于站點的雜項，這是一組旨在提高Web兼容性的特定于站點的行為。 在iPadOS上，使用媒體源擴展的Web內容現在可以在WKWebView中使用。  

Safari網絡擴展

在WebKit對擴展的跨瀏覽器互操作模型方面，Safari 15.4增加了對Web擴展的額外支持，包括對manifest_version3和相關API更改的支持。這些新功能包括：  

• service_worker后臺腳本作為非持久后臺頁面的替代方案。 
• 通過browser.scripting API進行腳本和樣式注入。 
• 通過browser.declarativeNetRequest API的動態和會話規則。 
• 使用externally_connectable:matches的網頁到擴展消息。

  并解決了幾個問題，其中包括：

• 現在對擴展同步存儲中的項目大小和數量實施了限制。 
• 現在允許在擴展清單的content_security_policy中包含更多指令，例如沙盒指令。 
• declarativeNetRequest規則的urlFilter中的特殊匹配字符（*、|、||和^）現在可以處理，而不是被視為正則表達式模式。 
• 現在允許從runtime.onMessage偵聽器返回的Promise用于消息回復。

Web Inspector

Web Inspector的更新，為在樣式面板中處理CSS提供了有用的新工具，包括對級聯層和新的@layer規則集的直觀支持，從而可以輕松識別在哪個層中定義了規則。 當Flexbox和Grid使用align-content、align-items、align-self、justify-content、justify-items或justify-self時，還有新的CSS對齊控件可以直觀地識別和選擇理想值。  在樣式面板中添加新屬性或值時，Web Inspector提供了方便的自動完成選項。最新版本升級了自動完成，可以使用模糊匹配，從而更容易找到正確的選項。  當使用CSS自定義屬性或更廣為人知的CSS變量時，一種常見的做法是將它們添加到:root或html的選擇器規則中。不幸的是，這會導致頁面上的每個元素都有一長串繼承的CSS變量。Web Inspector可以通過多種方式幫助用戶處理此問題。首先，它會自動隱藏未使用的繼承CSS變量。然后，當需要查看它們時，可以使用一個按鈕將它們全部顯示出來。還可以使用過濾器工具來搜索正確的CSS變量，或者可以在計算面板中查看按值類型分組的所有適用CSS變量，從而允許折疊與其任務不相關的組。 

WebKit起源史

眾所周知，WebKit是一個開源的瀏覽器排版引擎，其起源最早可追溯到始于1998年的KDE開源桌面環境項目的HTML Widget，后來進一步發展為KDE的標準組件、KHTML排版引擎和KJSJavaScript腳本引擎。

蘋果公司為開發自主的Safari瀏覽器，在對比了Gecko和KHTML之后，毅然選擇了后者。原因是相比Gecko的龐大臃腫，KHTML更加輕巧和清晰。蘋果公司將KHTML更名為WebCore，KJS更名為JavaScriptCore，兩者合起來作為WebKit。

2008年9月，谷歌公司推出了基于WebKit內核的Chrome瀏覽器，Chrome促成了瀏覽器技術的持續發展，WebKit也因此逐漸轉入更多開發者的視界，影響力和知名度與日俱增。

?參考鏈接：

??https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/??