2018年12月，微軟宣布Edge瀏覽器將採(cǎi)用Chromium——谷歌Chrome瀏覽器的開源項(xiàng)目?jī)?nèi)核。業(yè)內(nèi)許多人對(duì)瀏覽器多樣性的喪失感到惋惜，而我本人卻欣喜若狂。雖然官方尚未公佈確切的發(fā)布日期，但預(yù)計(jì)會(huì)在今年某個(gè)時(shí)候推出。 Edge採(cǎi)用Chromium後，大量的HTML、JavaScript和CSS特性將實(shí)現(xiàn)全瀏覽器兼容。

Edge預(yù)覽版現(xiàn)已面向Windows用戶開放下載，Mac版本即將推出。

? 面向所有Web開發(fā)者和愛好者！ ?

下一代#MicrosoftEdge 的首個(gè)預(yù)覽版本已準(zhǔn)備好供您體驗(yàn)– 立即試用！ [鏈接] [推特鏈接]

不久前，我撰寫了一篇題為“Internet Explorer的緩慢消亡”的文章。我們中的一些幸運(yùn)兒已經(jīng)放棄了IE瀏覽器。但I(xiàn)E並非唯一阻礙我們前進(jìn)的因素。 IE是我們都討厭的瀏覽器，而Edge本應(yīng)成為其改進(jìn)後的替代品。不幸的是，Edge本身也落後了。 EdgeHTML是Trident的一個(gè)分支，Trident是Internet Explorer的渲染引擎。微軟對(duì)Edge的投資嚴(yán)重不足，結(jié)果Edge也繼承了IE的不足。 Edge的用戶之聲網(wǎng)站是一個(gè)不錯(cuò)的想法，允許開發(fā)者投票選擇他們希望實(shí)現(xiàn)的功能。然而，正如Dave Rupert所說，在這個(gè)網(wǎng)站上投票“就像往許願(yuàn)井里扔硬幣”。最受期待的功能多年來一直未得到實(shí)現(xiàn)。

Chromium之前的Edge不支持許多現(xiàn)代瀏覽器已有的功能，而這些功能也無法通過polyfill或其他方法繞過，因此Edge轉(zhuǎn)向Chromium是一個(gè)重大的事件。

值得期待的新功能

那麼，這些功能究竟是什麼呢？讓我們列舉出來，並開始期待所有這些新功能吧。

自定義元素和Shadow DOM

自定義元素和Shadow DOM結(jié)合使用，允許開發(fā)者定義自定義的、可重用的和封裝的組件。許多人都渴望這個(gè)功能。人們從2014年就開始投票要求實(shí)現(xiàn)它，而我們終於要得到了。

HTML details和summary元素

<details></details>和<summary></summary>元素是HTML5的一部分，自2011年以來一直被Chrome支持。這兩個(gè)元素結(jié)合使用，可以生成一個(gè)簡(jiǎn)單的部件來顯示和隱藏內(nèi)容。雖然使用JavaScript實(shí)現(xiàn)類似的功能很容易，但即使JavaScript被禁用或未能加載，<details></details>和<summary></summary>元素也能正常工作。

JavaScript字體加載API

這對(duì)某些人來說意義重大。所有現(xiàn)代瀏覽器現(xiàn)在都支持CSS font-display屬性。但是，您可能仍然希望使用JavaScript加載字體。字體加載狂熱者Zach Leatherman解釋了為什麼即使我們現(xiàn)在對(duì)font-display有廣泛的支持，您可能仍然希望使用JavaScript加載字體。放棄此API的polyfill非常重要，因?yàn)楦鶕?jù)Zach的說法，這段JavaScript：

[…] 通常內(nèi)聯(lián)在關(guān)鍵路徑中。在支持原生CSS字體加載API的瀏覽器上，解析和執(zhí)行polyfill JavaScript所花費(fèi)的時(shí)間基本上是浪費(fèi)的。 ”

在2018年的一篇文章中，Zach惋惜地寫道：

[…] 瀏覽器提供的CSS字體加載API具有相當(dāng)廣泛的支持，並且已經(jīng)存在很長(zhǎng)時(shí)間了，但令人費(fèi)解的是，它仍然缺失於所有可用的Microsoft Edge版本中。 ”

現(xiàn)在不再缺失了！

JavaScript flat和flatMap

最容易用代碼片段解釋， flat()在您在另一個(gè)數(shù)組中嵌套數(shù)組時(shí)非常有用。

 const things = ['thing1', 'thing2', ['thing3', ['thing4']]]
const flattenedThings = things.flat(2); // 返回['thing1', 'thing2', 'thing3', 'thing4']

顧名思義， flatMap()相當(dāng)於同時(shí)使用map()方法和flat() 。

這些方法也受Node 11支持。 ?

JavaScript TextEncoder和TextDecoder

TextEncoder和TextDecoder是編碼規(guī)範(fàn)的一部分。在處理流時(shí)，它們看起來很有用。

JavaScript對(duì)象剩餘和對(duì)象展開

這就像數(shù)組的剩餘和展開屬性。

 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模塊：動(dòng)態(tài)導(dǎo)入

使用類似函數(shù)的語法，動(dòng)態(tài)導(dǎo)入允許您在用戶需要時(shí)延遲加載ES模塊。

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

CSS background-blend-mode屬性

background-blend-mode將Photoshop風(fēng)格的圖像處理帶到了Web上。

CSS prefers-reduced-motion媒體查詢

我不禁覺得，不讓用戶感到不適應(yīng)該是網(wǎng)站的默認(rèn)設(shè)置，尤其是一些用戶可能不知道此設(shè)置的存在。隨著Web動(dòng)畫變得越來越普遍，重要的是要認(rèn)識(shí)到動(dòng)畫可能會(huì)導(dǎo)致某些用戶頭暈、噁心和頭痛。

CSS caret-color屬性

誠(chéng)然，這是一個(gè)相當(dāng)瑣碎的功能，可以安全且輕鬆地用作漸進(jìn)增強(qiáng)。它允許您設(shè)置文本輸入字段中閃爍光標(biāo)的樣式。

8位十六進(jìn)制顏色表示法

在代碼庫中保持一致性是很好的。這包括堅(jiān)持使用RGB、十六進(jìn)製或HSL顏色格式中的任何一種。如果您首選的格式是十六進(jìn)制，那麼您會(huì)遇到問題，因?yàn)槊慨?dāng)您需要定義透明度時(shí)，都需要切換到rgba() 。十六進(jìn)制現(xiàn)在可以包含alpha（透明度）值。例如， #ffffff80等效於rgba(255, 255, 255, .5) ?？梢哉f，它不是最直觀的顏色格式，與rgba()相比沒有任何實(shí)際好處。

本徵大小

我沒有看到像其他一些新的CSS功能那樣對(duì)本徵大小有那麼多的炒作或興奮，但它是我個(gè)人最渴望的功能。本徵大小根據(jù)元素的內(nèi)容確定大小，並向CSS引入了三個(gè)新的關(guān)鍵字： min-content 、 max-content和fit-content() 。這些關(guān)鍵字可以在您通常使用長(zhǎng)度的地方使用，例如height 、 width 、 min-width 、 max-width 、 min-height max-height 、 grid-template-rows 、 grid-template-columns和flex-basis 。

CSS text-orientation屬性

與writing-mode屬性結(jié)合使用， text-orientation指定文本的方向，正如您可能預(yù)期的那樣。

CSS :placeholder-shown偽元素

placeholder-shown甚至在Internet Explorer中可用，但不知何故從未進(jìn)入Edge……直到現(xiàn)在。用戶體驗(yàn)研究表明，通常應(yīng)避免使用佔(zhàn)位符文本。但是，如果您使用佔(zhàn)位符文本，這是一種根據(jù)用戶是否在輸入中輸入任何文本有條件地應(yīng)用樣式的便捷方法。

CSS place-content屬性

place-content是設(shè)置align-content和justify-content的簡(jiǎn)寫。

CSS will-change屬性

will-change ，提前告知瀏覽器元素將發(fā)生更改。 Chromium之前的Edge實(shí)際上擅長(zhǎng)在不需要此屬性的情況下高效處理動(dòng)畫，但它現(xiàn)在將具有全瀏覽器兼容性。

CSS all屬性

[CSS-Tricks鏈接] all是同時(shí)設(shè)置所有CSS屬性的簡(jiǎn)寫。

例如，設(shè)置button { all: unset; }等效於：

 button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

然而，遺憾的是， revert關(guān)鍵字除了Safari之外，還沒有在其他任何地方實(shí)現(xiàn)，這在某種程度上限制了我們可以從all屬性中獲得的里程。

CSS形狀和剪輯路徑

傳統(tǒng)上，Web一直以矩形為中心。畢竟它有一個(gè)盒子模型。雖然我們不再需要浮動(dòng)來進(jìn)行佈局，但我們可以創(chuàng)造性地使用它們來使用shape-outside屬性將文本環(huán)繞圖像和形狀。這可以與clip-path屬性結(jié)合使用，該屬性可以將圖像顯示在形狀內(nèi)。

CSS :focus-within偽類

如果您想在任何一個(gè)輸入都處於焦點(diǎn)時(shí)將特殊樣式應(yīng)用於整個(gè)表單，那麼:focus-within就是您的選擇器。

CSS contents關(guān)鍵字

如果您使用CSS網(wǎng)格，這幾乎是必不可少的。儘管開發(fā)人員投了3920票，但這已被Edge標(biāo)記為“未計(jì)劃”。

對(duì)於flexbox和grid，只有直接子元素分別成為flex項(xiàng)目或grid項(xiàng)目。任何嵌套更深的元素都不能使用flex或grid定位來放置。用規(guī)範(fàn)的話來說，當(dāng)將display: contents應(yīng)用於父元素時(shí)，“必須將元素視為已被其內(nèi)容替換在元素樹中”，從而允許使用網(wǎng)格或flexbox對(duì)其進(jìn)行佈局。 Chris對(duì)此進(jìn)行了更詳盡的解釋，值得一看。

不幸的是，其他瀏覽器實(shí)現(xiàn)中仍然存在一些影響可訪問性的錯(cuò)誤。

未來充滿更多希望

我們只關(guān)注了Edge轉(zhuǎn)向Chromium後所有現(xiàn)代瀏覽器都將支持的功能。也就是說，傳統(tǒng)Edge的消亡也使許多其他功能感覺更近了。 Edge是唯一一個(gè)在Web動(dòng)畫API上拖後腿的瀏覽器，並且對(duì)Houdini規(guī)範(fàn)的任何部分都不感興趣。

對(duì)瀏覽器測(cè)試的影響

當(dāng)然，對(duì)於Web開發(fā)者來說，另一個(gè)巨大的好處是減少了測(cè)試。許多人在跨瀏覽器測(cè)試期間忽略了Edge，因此Edge用戶更有可能遇到損壞的體驗(yàn)。這是微軟決定切換到Chromium的主要原因。如果您的網(wǎng)站在一個(gè)Chromium瀏覽器中沒有錯(cuò)誤，那麼它可能在所有瀏覽器中都沒問題。用Edge團(tuán)隊(duì)的話來說，Chromium將為“我們的客戶提供更好的Web兼容性，並為所有Web開發(fā)者減少Web碎片化”。各種各樣的設(shè)備和瀏覽器使瀏覽器測(cè)試成為我們作為前端開發(fā)者負(fù)責(zé)的最令人不愉快的任務(wù)之一。 Edge現(xiàn)在可供macOS用戶使用，這對(duì)我們?cè)S多使用Mac工作的人來說是一個(gè)好消息。對(duì)BrowserStack的訂閱現(xiàn)在將稍微不那麼必要了。

我們會(huì)失去什麼嗎？

據(jù)我所知，唯一一個(gè)除了Chrome之外所有地方都支持的功能是SVG彩色字體，它將不再在Edge瀏覽器中工作。但是，其他彩色字體格式（COLR、SBIX、CBDT/CBLC）將繼續(xù)工作。

呃，@GoogleChrome 你計(jì)劃很快支持#OpenTypeSVG嗎？在Safari（12 ）、Firefox（26 ）甚至EdgeHTML（38 ）Photoshop、Illustrator中受支持– 但Chrome不支持
/cc @colorfontswtf [推特鏈接]

其他瀏覽器呢？

誠(chéng)然，Edge並不是最後一個(gè)次優(yōu)瀏覽器。本文中的所有功能在Internet Explorer中都不受支持，而且永遠(yuǎn)也不會(huì)支持。如果您在非洲或印度有用戶，則需要支持Opera Mini。如果您在中國(guó)有用戶，那麼UC瀏覽器將非常重要。如果您沒有這些區(qū)域考慮，那麼現(xiàn)在是放棄對(duì)Internet Explorer的支持並擁抱現(xiàn)代Web提供的功能的最佳時(shí)機(jī)。許多PC用戶純粹出於習(xí)慣而堅(jiān)持使用Internet Explorer。希望改進(jìn)後的Edge足以吸引他們離開。一篇題為“使用Internet Explorer作為默認(rèn)瀏覽器的危險(xiǎn)”的官方微軟博客文章總結(jié)道，“Internet Explorer是一個(gè)兼容性解決方案……開發(fā)人員現(xiàn)在基本上沒有針對(duì)Internet Explorer進(jìn)行測(cè)試?！睂?duì)於其剩餘用戶來說，大部分Web看起來越來越損壞。是時(shí)候讓它消亡了。

谷歌是權(quán)力狂嗎？

Web開發(fā)人員的生活即將變得更容易，但對(duì)微軟公告的回應(yīng)卻遠(yuǎn)非積極。例如，Mozilla給出了強(qiáng)烈的悲觀回應(yīng)，指責(zé)微軟“正式放棄了互聯(lián)網(wǎng)的獨(dú)立共享平臺(tái)”。該聲明稱谷歌“幾乎完全控制著我們?cè)诰€生活的基礎(chǔ)設(shè)施”，並且“對(duì)獨(dú)特的資產(chǎn)擁有壟斷地位”。它總結(jié)道，“將基本在線基礎(chǔ)設(shè)施的控制權(quán)交給一家公司是可怕的?！?/p>

許多人回想起IE6的時(shí)代，那是瀏覽器最後一次獲得如此壓倒性的市場(chǎng)份額的時(shí)代。 Internet Explorer贏得了瀏覽器大戰(zhàn)後，陷入了完全停滯的狀態(tài)。相比之下，Chrome不斷推出新功能。谷歌積極參與Web標(biāo)準(zhǔn)機(jī)構(gòu)W3C和WHATWG。不過，可以說，它在這些機(jī)構(gòu)中擁有過大的影響力，並有能力決定Web未來的形狀。谷歌開發(fā)者關(guān)係確實(shí)傾向於宣傳僅在Chrome中發(fā)布的功能。

從競(jìng)爭(zhēng)到合作

Edge並非新的IE ，它可以幫助推動(dòng)Web創(chuàng)新。雖然它在許多方面落後了，但它確實(shí)為CSS網(wǎng)格、CSS排除、CSS區(qū)域和新的HTML導(dǎo)入規(guī)範(fàn)帶路。與以往的行為大相徑庭的是，微軟已成為全球最大的開源項(xiàng)目支持者之一。這意味著所有主要的瀏覽器現(xiàn)在都是開源的。微軟表示，他們打算成為Chromium的重要貢獻(xiàn)者——事實(shí)上，他們已經(jīng)完成了300多次合併。這將幫助Edge用戶，也將使Chrome、Opera、Brave和其他基於Chromium的瀏覽器的用戶受益。

以上是Edge成為Chromium：這對(duì)前端開發(fā)人員意味著什麼？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！