Edge 擁抱 Chromium 對前端工程師意味著什麼？

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

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

不久前，我寫了一篇題為“慢慢死亡的 Internet Explorer ”的文章【https://alistapart.com/article/the-slow-death-of-internet-explorer-and-future-of-progressive-enhance】。一些人已經很幸運放棄了那個瀏覽器。但這並不是阻止我們迴歸的唯一因素。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 被禁用或加載失敗時也能工作。/<summary>/<details>/<summary>/<details>

# Javascript 的字體加載 API

對於某些人來說這有很大的意義。目前所有現代瀏覽器都支持 CSS font-display 屬性。但是你可能仍然希望用 JavaScript 加載字體。Zach Leatherman 解釋了為什麼你可能需要用 JavaScript加載字體【https://www.filamentgroup.com/lab/js-web-fonts.html#why-would-you-still-use-javascript%3F】 ，即使現在 font-display 已經得到了廣泛支持。根據 Zach 的說法，這個 API 的拋棄 polyfill 非常重要，因為這個JavaScript是

在2018年的一篇文章中【https://www.zachleat.com/web/the-compromise/】，Zach 感嘆道：

不會再這樣了！

# JavaScript 的 flat 和 flatMap

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

1const things = ['thing1', 'thing2', ['thing3', ['thing4']]]
2const 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 屬性一樣。

 1const obj1 = {
 2 a: 100,
 3 b: 2000
 4}
 5
 6const obj2 = {
 7 c: 11000,
 8 d: 220
 9}
10
11const combinedObj = {...obj1, ...obj2} 
12// {a: 100, b: 2000, c: 11000, d: 220}

# JavaScript模塊：動態導入

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

1button.addEventListener("click", function() {
2 import("./myModule.js").then(module => module.default());
3});
 

# CSS 的 background-blend-mode 屬性

background-blend-mode 給 web 帶來了 Photoshop 風格的圖像處理【https://www.sarasoueidan.com/demos/css-blender/】。

# 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。

與 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; } 相當於：

1button {
2 background: none;
3 border: none;
4 color: inherit;
5 font: inherit;
6 outline: none;
7 padding: 0;
8}

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

# CSS 形狀和剪輯路徑

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

Clippy

Clippy 【https://bennettfeely.com/clippy/】是一個在線的clip-path編輯器

# CSS ：focus-within 偽類

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

# CSS 內容關鍵字

如果你正在使用 CSS 網格，這幾乎是必不可少的。儘管開發者的投出了多達 3,920 張的選票，Edge 還是將其標記為“未計劃”。

3,920 次投票票仍不被理會

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

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

# 對未來更多的承諾

我們只研究了 Edge 遷移到 Chromium 時所有現代瀏覽器都支持的功能。也就是說，傳統 Edge 的死亡也讓很多其他功能越來越近了。Edge 是唯一一個遲遲不肯支持 Web 動畫 API 的瀏覽器，並且對 Houdini 規範完全沒有興趣。

來源：https://ishoudinireadyyet.com

來源: https://ishoudinireadyyet.com

# 對瀏覽器測試的影響

在 BrowserStack 進行中測試(左)和 iPhone 上的各種瀏覽器(右)

當然，對於 Web 開發人員來說，另一個巨大的優勢是測試會減少。在跨瀏覽器測試期間 Edge 大多都會被忽視，因此 Edge 用戶更有可能獲得破碎的體驗。這是微軟決定轉向 Chromium 的主要原因。如果你的網站在Chromium 瀏覽器中沒有錯誤，那麼在其它瀏覽器中可能工作的都很好。用Edge團隊的話來說，Chromium 將為我們的客戶提供“更好的Web兼容性，併為所有 Web 開發減少 Web 碎片化”。各種各樣的設備和瀏覽器使瀏覽器測試成為使前端開發人員的最不愉快的任務之一。Edge 現在可供 macOS 用戶使用，這對於我們在 Mac 上工作的人來說非常有用。對 BrowserStack 的需求將會略微減少。

# 我們會失去什麼？

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

魔法獨角獸彩色字體中的"please"字樣

# 其它瀏覽器會怎樣？

不可否認，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 有一個極其悲觀的回應，指責微軟“正式放棄獨立的互聯網共享平臺”。該聲明稱谷歌“幾乎完全控制了我們在線生活的基礎設施”，並且“壟斷了對獨特資產的控制”。它的結論是“將基本的基礎在線設施的控制權交給一家公司是非常糟糕的。”

許多人已經回想到了 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 的瀏覽器用戶受益。

十五年編程經驗，今年1月整理了一批2019年最新WEB前端教學視頻，不論是零基礎想要學習前端還是學完在工作想要提升自己，這些資料都會給你帶來幫助，從HTML到各種框架，幫助所有想要學好前端的同學，學習規劃、學習路線、學習資料、問題解答。只要加入WEB前端學習交流Q群：296212562，即可免費獲取。

閱讀更多 前端技術教學分享 的文章

關鍵字: HTML Nod 微軟