Google在Beta頻道釋出了最新的Chrome 78,這個版本加入了新的Houdini API,讓開發者能以JavaScript擴充CSS,同時也加入新的原生檔案系統 API,讓網頁應用程式可以與平臺檔案系統直接互動,另外,從這個版本開始以Origin Trials方法,安全地實驗網頁平臺新功能。

CSS自定義屬性或稱CSS變數,可以讓開發者在CSS中定義自己的屬性,並在全域性CSS檔案中使用這些元素,雖然這項功能很有用,但是卻有一個致命的缺點,這些元素的值可能被意外地覆寫,因為他們總是從父元素繼承值,而且無法進行轉換。

而現在CSS自定義屬性即將獲得CSS屬性與值API等級1( CSS Properties and Values API Level 1)的新能力加持,有了Houdini的CSS屬性和值API等級1,CSS自定義屬性值會被意外覆寫的缺點便可被克服,開發者可以註冊自己的變數作為完全自定義的屬性,確保這些屬性總是為特殊的類型,並且為其設定預設值,甚至還可以加入動畫。

CSS Houdini的目的,是要讓開發者可以深入樣式,擴充瀏覽器的渲染引擎的能力。換句話說,CSS Houdini讓開發者能夠透過JavaScript擴充CSS,而且不會影響效能。

這個能力之所以重要,是因為過去無法以JavaScript擴充CSS,只能撰寫JavaScript模仿CSS效果,但是替瀏覽器補充未實作的CSS,或是加入像是CSS Grid的新功能,都是非常困難,而且很難不影響效能。現在各瀏覽器開始支援CSS Houdini,而Chrome則是從78版本加入,開發者可以定義類型化的CSS屬性,並用來創建新穎的動畫效果。

Chrome 78還加入了Origin Trials實驗方法,讓官方在Chrome中安全地實驗網頁新功能,官方提到Origin Trials可以讓使用者試用新功能,並且為開發者社群提供可用性和效能等回饋。

目前Origin Trials加入的實驗功能包括了新的原生檔案系統API,開發者可以編寫能直接和使用者本地裝置檔案系統互動的網頁應用程式,包括IDE、照片和影片編輯器或是文字編輯器等。當用戶授與存取權限之後,該API就能允許網頁應用程式,直接使用平臺的開啟和儲存對話視窗,在使用者裝置中讀取和儲存檔案。

另一個Origin Trials中的新功能是SMS接收器API,目前網頁使用SMS訊息作為驗證手機號碼的手段,當使用者在輸入表單時,網頁通常會發送一次性的密碼到使用者手機上,以確定電話號碼的正確性。而現在瀏覽器實作了SMS接收器API,讓網站能夠以程式化的方式,存取使用者手機收到的SMS訊息,讓使用者不再需要手動操作這類手機驗證。


Advertisement

更多 iThome相關內容