Microsoft Edge 採用 Chromium：網頁設計師需要了解的內容

微軟的 Internet Explorer 是互聯網上最大的模因之一。 這也是許多網頁設計師的禍根，因為根本不支持新引入的技術。 當微軟將 IE 重新命名為 Microsoft Edge 時，人們希望那些日子即將結束。 默認的 Windows 瀏覽器將很容易採用現代技術，網絡將擁有一個相當標準的平台。 那沒有發生。 然而，在 2018 年底，微軟宣布這種情況將發生變化：Edge 採用 Chromium 引擎作為基礎。

微軟邊緣鉻？ 有什麼大不了的？

在撰寫本文時，您可以下載包含 Chromium 基礎的 Edge 預覽版。 它是一個開發基礎，不適合作為瀏覽器的日常駕駛，但對於那些渴望擺脫現有 Edge 的人來說，你可以。 不過，它在早期階段非常簡單。 隨著 2019 年的進展，OEM 瀏覽器將照常更新以包含 Chromium。

這一切都很棒。 但你問有什麼大不了的？ 嗯，這個問題的答案是三重的。

1. 微軟正在擁抱開源

最近，我們看到微軟從過去的專有模式轉向開源軟件領域的多個跡象。 自從他們購買 GitHub 並開始改進 Atom 代碼編輯器以來，他們一直在朝著這個方向前進，也許最重要的是隨著 Visual Studio Code 的發布，這可能是當今開發人員中最受歡迎的編輯器。 此外，如果 VS Code 對您來說不夠強大，他們的 Visual Studio IDE 已作為免費下載發布。

將 Edge 添加到開源領域只會為消費者提供更強大的產品。 微軟在這個聲明中說得很好。

我們還開始在可訪問性、觸摸、ARM64 等領域為 Chromium 做出貢獻。 我們的計劃是繼續在 Chromium 中工作，而不是創建一個並行項目。 我們直接與 Google 的團隊合作，我們期待與開源社區開展更多合作。

很高興聽到微軟在 Chromium 上與穀歌合作，而不是為了自己的目的而分叉。 隨著項目的推進，Chromium 和網頁設計作為一個整體將變得更加健壯和開放。

2. 碎片更少，功能更多

正如我們上面提到的，採用 Chromium 的 Edge 最終將引入以前被排除在瀏覽器之外的功能和技術。 對於用戶來說，這意味著在幾乎所有網站上都有更好的體驗，因為事情會正常工作，而不是收到錯誤消息或崩潰。 對於開發人員來說，這再次意味著他們的工作不會讓用戶崩潰，而且他們的時間可以更好地花在新項目和更好的產品上，而不是修補和裝配黑客解決方案來讓事情在 IE/Edge 上工作。

這種事情正是我們獲得 Microsoft Edge Chromium 升級的原因。 他們明確表示他們的目標是“為我們的客戶創造更好的網絡兼容性，並為所有網絡開發人員減少網絡碎片。”

碎片化的減少僅僅意味著更一致地使用網絡。 這也意味著用戶可以（希望）使用擴展和附加組件，而無需開發人員（很多）額外的工作。

我們確保他們無需額外工作即可在 Edge 瀏覽器中看到相同的兼容性。

對於由於安全問題和隱私不足而希望選擇不使用 Chrome 的人來說，這個消息非常重要。 這些人仍然希望盡可能在網絡上擁有最好、最一致的體驗。 由於碎片最少，安全性提高，因為特定於平台的錯誤和漏洞的可能性大大減少。

3. 網頁設計師獲得自由

在此版本之前，網頁設計師在許多方面受到限制。 雖然你們中的許多人在沒有必要限制自己基於 IE 的情況下發揮了自己的魔力，但您的客戶的訪問者可以很容易地控制您的項目範圍。

網頁設計師和開發人員的關鍵要點

隨著 Chromium 的採用，Web 開發和設計的世界正在開放很多，我們只想提到一些開放式的東西，您將能夠利用它們，而不必為或創建變通方法。完全避免。 CSS-Tricks 對前端開發人員可以期待的內容進行了詳盡的總結，但這些只是其中的一些亮點。

背景混合模式 CSS 作品

漸變色和雙色調現在非常流行。 使用它們的最簡單方法之一是使用背景混合模式CSS。 在此 Chromium 版本的 Edge 之前，這種效果根本無法在 Microsoft 瀏覽器上呈現。 你混合的任何圖像都將是全彩色的，可能會破壞你混合的整個氛圍。 這已經不是問題了。 如果您使用像 Divi 這樣的頁面構建器，您會很高興知道它們中包含的混合效果也會呈現，因此除非您絕對想要，否則您不必深入研究樣式表。

邊緣理解透明的十六進制顏色代碼（最終）

因此，這與其說是一個令人驚奇的新功能，不如說是全面改善生活質量。 而對某些人來說，這可能根本不重要。 那些不介意將顏色寫為rgba(255, 255, 255, .45)而不是#ffffff45 的人。 如果您（像許多人一樣）更喜歡十六進制顏色，那麼您很幸運。 您最終將能夠開始使用您喜歡的樣式並保持樣式表井井有條。

基本上，可以包括在十六進制的透明度，在邊緣呈現這種變化（注意45在上面的例子中的端部，表明45％的透明度），這意味著沒有更多的混合和匹配CSS。 正如我們所說，這是一種生活質量功能。

文本方向和書寫模式 CSS 將呈現

先進的 CSS 技術從來都不是 Edge 的強項。 事實上，它甚至不是弱套裝。 它根本不在Edge的壁櫥裡。 如果您是那種想要利用高級 CSS 的開發人員，而這種 CSS 甚至超出了像 Divi 這樣的頁面構建器所能做的範圍（當然，這並不多），那麼您總是對 Microsoft Edge 和 Internet Explorer 感到沮喪。 因為他們是不會用一些東西的工作。 現在 Chromium 已成為過去，我們最喜歡的效果之一（從技術上講，是其中兩個）是text-orientation/writing-mode 。

不久前，我們發表了一篇關於橫向和縱向文本的帖子。 在此更新之前，以下代碼（以及帖子中的效果）無法在 Edge 中顯示。

.sideways-text {
transform: rotate(90deg); /* makes entire paragraphs and lines rotate sideways */
}
 
.vertical-yellow {
text-orientation: upright; /* makes individual characters stand upright, not whole lines like transform: rotate */
writing-mode: vertical-lr; /* continues left-to-right at line break */
color: yellow;
font-size:2rem; /* this will make the body text twice the relative size of the default set for the whole site */
line-height: 200%; /* line height is VISUALLY line-width when it's vertical */
text-transform: uppercase;
font-family: monospace; /* this just pretties up the whole deal, making all characters the same width */
}
 
.vertical-white {
text-orientation: upright;
writing-mode: vertical-lr;
color: white;
font-size:2rem;
line-height: 200%;
text-transform: uppercase;
font-family: monospace;
}

讓我們為這些效果和先進技術不再被 The Powers That Be 阻擋而歡欣鼓舞。

標準書籤導入和擴展

是的，你沒看錯。 Edge 將支持擴展。 只需單擊一下，Edge 就可以從 Chrome 導入您的書籤。 如果您計劃進行交換，這不僅會使交換變得更容易，而且它使您可以訪問您已經在使用的同樣強大的工具。

許多網頁設計師使用擴展來讓他們的生活更輕鬆。 也許它是一個顏色滴管，所以你可以從網站上抓取完美顏色的十六進制（你現在也可以在 Edge 中使用它！），或者是一把尺子來獲得正確的大小或字體抓取器。 也許您已經安裝了此列表中的所有內容，並且您不想僅僅因為這些而離開 Chrome。

好吧，現在你可以了。

因為即使 Edge 基於 Chromium，它也不是Chrome 。 它仍然是微軟的產品，這意味著您將獲得他們一直在重建聲譽的軟件質量。 不是谷歌的始終在中間範圍內的代表。

將網站另存為 HTML

在 Chromium 升級之前，您無法將網頁保存為 HTML。 至少可以說，右鍵單擊上下文菜單是……有限的。

有了 Chromium 引擎，情況不再如此。 你最終會得到一個真正的上下文菜單。

只需按“另存為...”，您就可以獲得該站點的本地副本以供查看和使用，這樣您就可以確保每個元素都正確無誤。

說到元素應該如何……

邊緣終於允許頁面檢查

這是網頁設計師的一大亮點。 以前在 Edge 中工作幾乎是不可能的，不是因為缺乏功能支持（儘管這很重要），而是因為您無法深入了解並檢查單個元素以調試和排除任何問題。 您無法很好地調整和微調您的工作，因為您實際上無法輕鬆訪問您的工作。

這已不再是這種情況。 所以網頁設計師很高興。 您最終可以使用 JS 控制台，使用 CSS 樣式表，並在元素上戳和戳直到您滿意為止。

私人瀏覽在這裡

幾乎所有的瀏覽器都可以讓您在一個乾淨的、沒有歷史記錄的私人窗口中運行頁面。 除了邊緣。 同樣，使用 Chromium，設計師將能夠打開他們的作品並查看它如何呈現給用戶，而無需註銷、清除緩存和 cookie，也無需跳過十幾個環節。 我們現在可以訪問在功能上與 Chrome 的隱身標籤相同的 InPrivate 窗口。 只需右鍵單擊，您就在那裡。

對於需要使工作像素完美的網頁設計師來說，能夠立即測試乾淨的設計是必不可少的。 這個功能限制了很多設計師在 Edge 中工作，因為不使用私人窗口太麻煩了。 如果你是那種每天都會打開幾十個的設計師，你可能會對 Edge 非常適合你的工作流程感到驚訝。

還有更多

這些只是冰山一角。 這只是將 Chromium 引入 Edge 將使網頁設計師可以訪問的功能的一小部分示例。

• Edge 將支持flat()和flatMap()
• 可以導入動態 JavaScript 模塊（終於）
• 使用 CSS 樣式化佔位符文本
• 顯示：內容現在可供 CSS 網格和 flexbox 用戶使用
• TextEncoder和TextDecoder將使顯示直播流更好

基本上，可以這樣想： Chrome 可以做的任何事情，Edge 也可以做。 這不是一個美妙的想法嗎？

Microsoft Edge Chromium 特定功能

微軟不僅僅是採用 Chromium 並用它取代 Edge。 他們也在那裡添加自己的功能。

1. Chrome 安全

用戶將確保他們受到與 Chrome 用戶相同類型的安全措施（尤其是通過擴展程序）的保護。 此外，微軟正在為瀏覽器引入一套新的安全措施和跟踪攔截器。 用戶將能夠設置自己喜歡的保護級別，從根本沒有到非常嚴格的鎖定。 微軟表示，他們希望為用戶提供清晰、簡單和簡單的隱私保護。 許多安全解決方案對於用戶來說似乎過於復雜，而隨著 Edge 的無處不在，這是一個很好的步驟。

2. 新系列

此外，Chromium 基礎將讓 MS 引入一項他們稱之為“收藏”的功能，讓用戶可以從互聯網上收集（顯然）內容，包括文本和圖像，以便他們可以共享和管理它。 他們使用 Chromium 基礎來保持材料的來源，以及導出到 MS Office 套件並維護數據結構以供以後操作。

3. IE 仿真

然後是抵抗力：一個內置的 Internet Explorer 模擬器。是的，你沒看錯。 新的 Microsoft Edge Chromium 將內置 IE。 聽起來可能有點落後，但它實際上是一件美事。 通過切換到 Chromium，Edge 擺脫了 IE 的限制，讓開發人員和用戶擁有更好的體驗。 但是，那些為IE瀏覽器專門設計了網站過去？ 好吧，那些會壞掉的。 許多企業仍在使用 IE，因此擁有內部模擬器來呈現​​這些應用程序和頁面意味著企業無需猶豫升級，因為他們的工作流程或服務不會中斷（或需要額外的培訓或升級 - 還）。 這是過渡團隊真正出色的表現。

未來是光明的

我們希望在不久的將來有一天，微軟瀏覽器不會成為笑話的主角。 我們真的希望向 Chromium 引擎的遷移能夠取得成功，並幫助開創整個網絡的標準化時代。 這對用戶、設計師和開發人員都有好處，如果處理得當（看起來確實如此），由於這種轉變，互聯網可能會為很多人開放。 它也可以讓很多設計師的生活變得更輕鬆。

您如何看待 Microsoft Edge Chromium？

ProStockStudio/shutterstock.com 提供的文章特色圖片