翻譯：瘋狂的技術宅
在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 規範完全沒有興趣。
# 對瀏覽器測試的影響
在 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”。該宣告稱谷歌“幾乎完全控制了我們線上生活的基礎設施”，並且“壟斷了對獨特資產的控制”。它的結論是“將基本的基礎線上設施的控制權交給一家公司是非常糟糕的。”
# 來自競爭者的合作
Edge 而不是新的 IE 可以幫助 web 創新。雖然它在許多領域是落後的，但它確實引領了 CSS 網格、CSS Exclusions、CSS Regions 和新的HTML匯入規範。與以往完全不同，現在微軟已成為全球最大的開源專案支持者之一。這意味著所有主流瀏覽器現在都是開源的。微軟已宣告他們打算成為Chromium的重要貢獻者 —— 事實上，他們已經累計提交了超過300次合併。這將對 Edge 使用者有很大幫助，同時也將使 Chrome、Opera、Brave和其他基於 Chromium 的瀏覽器使用者受益。
歡迎關注公眾號：前端先鋒，獲取更多前端乾貨。
