Edge 擁抱 Chromium 對前端工程師來講意味着什麼？

翻譯：瘋狂的技術宅

原文：css-tricks.com/edge-goes-c…

在2018年12月，微軟宣佈 Edge 將採用 Chromium 內核，這是一個爲 Google Chrome 提供支持的開源項目。業內許多人對失去瀏覽器多樣性而感到悲傷，然而我卻很是高興。官方正式的發佈日期還沒有公佈，不過可能會在今年的某個時間公佈。隨着它的發佈，一系列 HTML、JavaScript 和 CSS 功能將實現徹底的跨瀏覽器支持。

如今 Windows 預覽版已經可用 ，即將推出適用於 Mac 的版本。

不久前，我寫了一篇題爲「慢慢死亡的 Internet Explorer 」的文章。 一些人已經很幸運放棄了那個瀏覽器。但這並非阻止咱們迴歸的惟一因素。 Internet Explorer 是咱們都討厭的瀏覽器，Edge 原本就是很好的替代品。不幸的是，Edge 自己就是落後的。 EdgeHTML 是 Trident 的一個分支，這也是 Internet Explorer 的內核。同時微軟對 Edge 方面的投資不足，致使了有其父必有其子。 Edge 的用戶反饋網站卻是不錯，容許開發人員投票選出他們想要實現的功能。但不幸的是，正如 Dave Rupert 吐槽的那樣，在網站上投票「就像往許願池中扔硬幣同樣。」 最須要的功能多年來一直沒有實現。

Edge 目前有許多不支持的功能，可是這些功能在其餘現代瀏覽器中是可用的，一旦他們進行了切換，立刻就能夠用了。並且它有不少不能被修補或解決的問題，因此這個版本是一個極大的麻煩。

# 值得期待的可用功能

那麼這些功能到底是什麼呢？讓咱們在這裏興奮的作一個簡述。

# 自定義元素和 Shadow DOM

自定義元素和 shadow DOM 容許開發人員可以獲得自定義、可重用和可封裝的組件。不少人都在要求這個功能。自 2014 年以來，人們一直在投票要求實現它，如今咱們終於獲得了。

# HTML 的 details 和 summary 元素

<details> 和 <summary> 元素是 HTML5 的一部分，自2011年起就在 Chrome 中獲得了支持。這些元素在一塊兒使用，能夠生成一個顯示和隱藏內容的簡單小部件。雖然用 JavaScript 實現相似的東西很簡單的，可是 <details> 和 <summary> 元素即便在 JavaScript 被禁用或加載失敗時也能工做。

# Javascript 的字體加載 API

對於某些人來講這有很大的意義。目前全部現代瀏覽器都支持 CSS font-display 屬性。可是你可能仍然但願用 JavaScript 加載字體。 Zach Leatherman 解釋了爲何你可能須要用 JavaScript加載字體 ，即便如今 font-display 已經獲得了普遍支持。根據 Zach 的說法，這個 API 的拋棄 polyfill 很是重要，由於這個JavaScript是

[...]一般在關鍵路徑中內聯。瀏覽器解析和執行 JavaScript 所花費的時間實際上被浪費在了支持本機 CSS 字體加載 API 上了。「

在2018年的一篇文章中，Zach 感嘆道：

[...]瀏覽器提供的 CSS 字體加載 API 有着至關普遍的支持而且已經存在了很長時間，可是全部人都對 Microsoft Edge 感到很遺憾。「

不會再這樣了！

# JavaScript 的 flat 和 flatMap

用代碼片斷來解釋是最簡單的方式，當一個數組嵌套在另外一個數組中時，flat() 很是有用。

const things = ['thing1', 'thing2', ['thing3', ['thing4']]]
const flattenedThings = things.flat(2); // Returns ['thing1', 'thing2', 'thing3', 'thing4']
複製代碼

顧名思義，flatMap() 至關於同時使用 map() 和 flat() 方法。

Node.js 11也支持這些方法。🎉

# JavaScript 的 TextEncoder和TextDecoder

TextEncoder 和 TextDecoder 是編碼規範的一部分。在使用流時，它們很是有用。

# JavaScript 對象的 rest 和 spread

就像數組的 rest 和 spread 屬性同樣。

const obj1 = {
  a: 100,
  b: 2000
}

const obj2 = {
  c: 11000,
  d: 220
}

const combinedObj = {...obj1, ...obj2} 
// {a: 100, b: 2000, c: 11000, d: 220}
複製代碼

# JavaScript模塊：動態導入

使用相似函數的語法，動態導入容許你在用戶須要時延遲加載 ES 模塊。

button.addEventListener("click", function() {
  import("./myModule.js").then(module => module.default());
});
複製代碼

# CSS 的 background-blend-mode 屬性

background-blend-mode 給 web 帶來了 Photoshop 風格的圖像處理。

# CSS prefers-reduced-motion 媒體查詢

隨着網絡上的動畫變得愈來愈廣泛，咱們要意識到到動畫可能會致使某些用戶出現頭暈、噁心和頭痛的症狀。我不由以爲不使人感到不適應該是網站的默認設置，由於並不是全部用戶都會知道這個設置存在。

# CSS 的 caret-color 屬性

這是一個至關簡單的功能，能夠安全、輕鬆地用做漸進加強功能。它容許你在文本框輸入字符時設置閃爍光標的樣式。

# 8位十六進制顏色表示法

在代碼庫中保持一致性很重要。這包括固定使用 RGB、十六進制或 HSL 顏色格式中的某一個。若是你的首選格式是十六進制，將會遇到問題，由於當你須要定義透明度時，就要切換到 rgba()。 Hex 如今能夠包含 alpha（透明度）值。例如，ffffff80 至關於rgba(255,255,255，.5)。可是它不是最直觀的顏色格式，而且也沒有比 rgba() 更多的優點。

# 固有尺寸

這是我最渴望的一個功能。固有尺寸根據元素的內容肯定大小，並在CSS中引入三個新關鍵字：min-content，max-content 和fit-content()。這些關鍵字可用於大多數一般使用長度的地方，如 height, width, min-width, max-width, min-height, max-height, grid-template-rows, grid-template-columns 和 flex-basis。

# CSS 的 text-orientation 屬性

與 writing-mode屬性一塊兒使用，text-orientation 能夠指定文本的方向，很是值得期待。

# CSS ：placeholder-shown 的僞元素

placeholder-shown 甚至能夠在 Internet Explorer 中使用，但不知何故從未在 Edge 中實現。用戶體驗研究代表，一般應該避免使用佔位符文本。可是若是你用了佔位符文本，能夠很方便的根據用戶是否在 input 中輸入文本而有條件地應用樣式。

# CSS 的 place-content 屬性

place-content 是設置 align-content 和 justify-content 的簡寫。

# CSS 的 will-change 屬性

will-change 屬性可用於性能優化，提早通知瀏覽器元素 will change。 Pre-Chromium Edge實際上很是擅長處理動畫，而不須要這個屬性，但如今它將具備徹底的跨瀏覽器支持。

# CSS 的 all 屬性

all 是一次設置全部 CSS 屬性的簡寫。

例如，設置 button { all: unset; } 至關於：

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}
複製代碼

不幸的是，revert 關鍵字仍然只在 Safari 中實現了，這在某種程度上限制了以從 all 屬性中得到的好處。

# CSS 形狀和剪輯路徑

傳統上的 web 是以矩形爲中心的。畢竟它有一個盒子模型。雖然咱們再也不須要浮動進行佈局，但咱們能夠創造性地用它們來圍繞圖像和形狀對文本 shape-outside 屬性進行包裝。這能夠和 clip-path 屬性結合使用，該屬性能夠在形狀內顯示圖像。

Clippy 是一個在線的clip-path編輯器

# CSS ：focus-within 僞類

若是要對錶單的某個輸入控件在處於焦點時應用特殊樣式，那麼:focus-within 是你的最佳選擇。

# CSS 內容關鍵字

若是你正在使用 CSS 網格，這幾乎是必不可少的。儘管開發者的投出了多達 3,920 張的選票，Edge 仍是將其標記爲「未計劃」。

對於 flexbox 和 grid，只有 direct children 分別成爲 flex 項或 grid 項。任何嵌套更深的東西都不能用 flex 或 grid-positioning 放置。用規範中的話來講，當 display:contents 應用於父元素時，「該元素必須被看做它已經在元素樹中被其內容替換，「容許它們用網格或 flexbox 佈局。Chris 文章中更全面的解釋值得一讀。

不幸的是，仍然有某些錯誤和其餘影響可訪問性的瀏覽器實現。

# 對將來更多的承諾

咱們只研究了 Edge 遷移到 Chromium 時全部現代瀏覽器都支持的功能。也就是說，傳統 Edge 的死亡也讓不少其餘功能愈來愈近了。 Edge 是惟一一個遲遲不願支持 Web 動畫 API 的瀏覽器，而且對 Houdini 規範徹底沒有興趣。

來源: ishoudinireadyyet.com

# 對瀏覽器測試的影響

在 BrowserStack 進行中測試（左）和 iPhone 上的各類瀏覽器（右）

固然，對於 Web 開發人員來講，另外一個巨大的優點是測試會減小。在跨瀏覽器測試期間 Edge 大多都會被忽視，所以 Edge 用戶更有可能得到破碎的體驗。這是微軟決定轉向 Chromium 的主要緣由。若是你的網站在Chromium 瀏覽器中沒有錯誤，那麼在其它瀏覽器中可能工做的都很好。 用Edge團隊的話來講，Chromium 將爲咱們的客戶提供「更好的Web兼容性，併爲全部 Web 開發減小 Web 碎片化」。各類各樣的設備和瀏覽器使瀏覽器測試成爲使前端開發人員的最不愉快的任務之一。 Edge 如今可供 macOS 用戶使用，這對於咱們在 Mac 上工做的人來講很是有用。對 BrowserStack 的需求將會略微減小。

# 咱們會失去什麼？

據我所知，SVG顏色字體將再也不適用於 Edge 瀏覽器。其餘顏色字體格式（COLR，SBIX，CBDT/CBLC）將繼續有效。

# 其它瀏覽器會怎樣？

不能否認，Edge 並非最後一個低標準瀏覽器。 Internet Explorer 始終不支持本文提到的全部功能。若是你在俄羅斯有用戶，則須要支持 Yandex。若是你在非洲有用戶，則須要支持 Opera Mini。若是你在中國有用戶，那麼UC 和 QQ 將會是重要的測試對象。若是你不須要考慮這些區域性因素，那麼如今就是放棄對 Internet Explorer 的支持並擁抱現代 Web 功能的最佳時機。不少 PC 用戶徹底不習慣使用 Internet Explorer。但願改進後的 Edge 可以吸引他們。 Microsoft 官方博客中標題爲「把 Internet Explorer 做爲默認瀏覽器的危險」 的文章得出結論：「Internet Explorer 是一種兼容性解決方案......大多數開發人員如今都沒有在 Internet Explorer 上進行測試。」對於其它用戶來講，大多數 web 看起來愈來愈支離破碎。該讓它死掉了。

# Google 是自大狂？

Web 開發人員的工做將變得更加輕鬆，但對微軟公告的迴應並不是是積極的。例如，Mozilla 有一個極其悲觀的迴應，指責微軟「正式放棄獨立的互聯網共享pingtai」。該聲明稱谷歌「幾乎徹底控制了咱們在線生活的基礎設施」，而且「壟斷了對獨特資產的控制」。它的結論是「將基本的基礎在線設施的控制權交給一家公司是很是糟糕的。」

許多人已經回想到了 IE6 的時代，這是瀏覽器最後一次得到如此巨大的市場份額。贏得瀏覽器大戰的 Internet Explorer 讓人陷入了停滯狀態。相比之下，Chrome 不斷推出新功能。 Google 積極參與 W3C 和 WHATWG 的 web 標準化組織。能夠說，它在這些機構中具備超大的影響力，並具備決定 web 將來形態的能力。Google 開發人員確實傾向於炒做僅在 Chrome 中發佈的功能。

# 來自競爭者的合做

Edge 而不是新的 IE 能夠幫助 web 創新。雖然它在許多領域是落後的，但它確實引領了 CSS 網格、CSS Exclusions、CSS Regions 和新的HTML導入規範。與以往徹底不一樣，如今微軟已成爲全球最大的開源項目支持者之一。這意味着全部主流瀏覽器如今都是開源的。微軟已聲明他們打算成爲Chromium的重要貢獻者 —— 事實上，他們已經累計提交了超過300次合併。這將對 Edge 用戶有很大幫助，同時也將使 Chrome、Opera、Brave和其餘基於 Chromium 的瀏覽器用戶受益。

歡迎關注公衆號：前端先鋒，獲取更多前端乾貨。