導(dǎo)讀

目前，在兩大主流移動(dòng)智能操作系統(tǒng)iOS和Android上，默認(rèn)的瀏覽器內(nèi)核都是WebKit，而且分別以Framework的方式推出了UIWebKit和WebView組件，使得第三方開發(fā)者可以據(jù)此構(gòu)建自己的瀏覽器或使用Web技術(shù)展現(xiàn)內(nèi)容的各種復(fù)雜應(yīng)用。

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

HTML

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

經(jīng)過多年關(guān)于可訪問性標(biāo)準(zhǔn)化的辯論，如今終于有了解決方案，WebKit增加了對<dialog>元素和：：Background偽元素的支持。<dialog>元素提供了一種強(qiáng)大的方法來創(chuàng)建覆蓋和模態(tài)。

WebKit還增加了對全局自動(dòng)聚焦屬性的支持，允許開發(fā)人員在頁面加載或顯示<對話框>時(shí)指示哪個(gè)元素應(yīng)該是焦點(diǎn)。

CSS

（1）CSS架構(gòu)的特性   

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

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

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

（2）附加功能

Web開發(fā)人員非常需要一種類似于現(xiàn)有視口單元，但能在移動(dòng)設(shè)備上工作得更好的工具，因?yàn)樵谝苿?dòng)設(shè)備上，隨著用戶滑動(dòng)頁面，瀏覽器視口的尺寸會發(fā)生變化。

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

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

WebKit增加了對：focus visible偽類的支持，以僅在瀏覽器呈現(xiàn)焦點(diǎn)指示器時(shí)設(shè)置其樣式。

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

WebKit修復(fù)了具有alpha透明度的顏色之間插值的錯(cuò)誤，改進(jìn)了漸變支持。  

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

（3）排版  

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

WebKit添加了對字體調(diào)色板CSS屬性和@font-palette-values規(guī)則的支持。

font-palette屬性為Web開發(fā)人員提供了一種方法，可以選擇包含在彩色字體中的幾個(gè)不同的預(yù)定義調(diào)色板中的一個(gè)。例如，聲明字體的深色調(diào)色板用于網(wǎng)站的深色模式設(shè)計(jì)。@font-palette-values規(guī)則為Web開發(fā)人員提供了一種定義自己的自定義調(diào)色板的方法，用于重新設(shè)置彩色字體的顏色。

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

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

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

（4）停用WebKit前綴  

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

外觀，包括自動(dòng)呈現(xiàn)

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

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

Web API

Web API是Web的應(yīng)用程序編程接口，它可以擴(kuò)展瀏覽器的功能，簡化復(fù)雜的功能，為復(fù)雜的代碼提供簡單的語法。所有瀏覽器都有一組內(nèi)置的 Web API 來支持復(fù)雜的操作，并幫助訪問數(shù)據(jù)。

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

對BroadcastChannel的支持允許來自源的選項(xiàng)卡、窗口、iframe和Worker相互發(fā)送消息。這可以實(shí)現(xiàn)跨多個(gè)選項(xiàng)卡同步站點(diǎn)的登錄狀態(tài)等體驗(yàn)。 

WebKit支持的另一個(gè)新機(jī)制是Web Locks API，它可以從選項(xiàng)卡、窗口、iFrame和Worker中的源節(jié)點(diǎn)作為異步鎖定控件來管理對資源的訪問。

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

這種新的支持使開發(fā)人員能夠在立即跳轉(zhuǎn)到視口中的某個(gè)位置或平滑地為滾動(dòng)操作設(shè)置動(dòng)畫之間進(jìn)行選擇。

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

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

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

JavaScript

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

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

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()簡化了檢測對象何時(shí)具有屬性本身，即未繼承或不存在的屬性。 

國際化

隨著標(biāo)準(zhǔn)流程定義了更多的國際化特性，WebKit繼續(xù)定期更新其Intl實(shí)現(xiàn)。最新版本包括使用Intl Enumeration API識別本地時(shí)區(qū)、排序規(guī)則、日歷、編號系統(tǒng)和貨幣的支持值。

更新到V2的Intl.Locale公開了新信息，其中包括日歷周數(shù)據(jù)（例如一周的第一天）、文本信息（例如書寫方向）以及其他區(qū)域相關(guān)的默認(rèn)值（例如日歷、12小時(shí)或24小時(shí)周期），以及編號系統(tǒng)。 

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

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

最后，Intl.DateTimeFormat包括對四個(gè)新的時(shí)區(qū)名稱選項(xiàng)的支持：shortOffset、longOffset、shortGeneric和longGeneric。

Web應(yīng)用程序

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

媒體

WebRTC協(xié)商API現(xiàn)在完全符合WebRTC 1.0規(guī)范，以支持WebRTC完美協(xié)商。這是一種解決在兩個(gè)遠(yuǎn)程對等方在協(xié)商期間可能發(fā)生的潛在同步問題的方法。

WebKit添加了對音頻和視頻的帶內(nèi)章節(jié)軌道的支持。帶內(nèi)文本軌道在容器內(nèi)為媒體本身提供字幕或章節(jié)標(biāo)記信息，而不是在HTML中聲明或注入JavaScript。以前的版本，已經(jīng)支持像CEA-608這樣的帶內(nèi)字幕軌道?，F(xiàn)在，帶內(nèi)章節(jié)軌道也能獲得支持，其中“提示”代表章節(jié)的開始時(shí)間和標(biāo)題。

WebKit在<video>上添加了對requestVideoFrameCallback()的支持，當(dāng)有新的視頻幀可供顯示時(shí)，它允許調(diào)用者得到通知，并提供有關(guān)該幀的元數(shù)據(jù)。  

隱私

Safari 15.4繼續(xù)致力于隱私保護(hù)，并進(jìn)一步推動(dòng)WebKit提出的以保護(hù)隱私的方式衡量廣告的網(wǎng)絡(luò)標(biāo)準(zhǔn)，它對隱私點(diǎn)擊衡量提供了三個(gè)更新：

添加了通過不可鏈接的令牌來預(yù)防轉(zhuǎn)化欺詐，以觸發(fā)商家網(wǎng)站上的事件。 

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

安全

Safari 15.4中的WebKit改進(jìn)了對Level 3級別的內(nèi)容安全策略的支持，增強(qiáng)了對內(nèi)容加載的安全控制，并幫助Web開發(fā)人員降低跨站點(diǎn)腳本和其他漏洞的風(fēng)險(xiǎn)。已經(jīng)更新內(nèi)聯(lián)腳本、內(nèi)聯(lián)樣式和eval執(zhí)行的阻止資源沖突報(bào)告，以符合Web標(biāo)準(zhǔn)。

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

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

WKWebView

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

Safari網(wǎng)絡(luò)擴(kuò)展

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

• service_worker后臺腳本作為非持久后臺頁面的替代方案。 
• 通過browser.scripting API進(jìn)行腳本和樣式注入。 
• 通過browser.declarativeNetRequest API的動(dòng)態(tài)和會話規(guī)則。 
• 使用externally_connectable:matches的網(wǎng)頁到擴(kuò)展消息。

  并解決了幾個(gè)問題，其中包括：

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

Web Inspector

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

WebKit起源史

眾所周知，WebKit是一個(gè)開源的瀏覽器排版引擎，其起源最早可追溯到始于1998年的KDE開源桌面環(huán)境項(xiàng)目的HTML Widget，后來進(jìn)一步發(fā)展為KDE的標(biāo)準(zhǔn)組件、KHTML排版引擎和KJSJavaScript腳本引擎。

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

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

?參考鏈接：

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