Microsoft Edge 采用 Chromium:网页设计师需要了解的内容

已发表: 2019-06-13

微软的 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 作品

Microsoft Edge Chromium 引擎

渐变色和双色调现在非常流行。 使用它们的最简单方法之一是使用背景混合模式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 阻挡而欢欣鼓舞。

标准书签导入和扩展

Microsoft Edge Chromium 引擎

是的,你没看错。 Edge 将支持扩展。 只需单击一下,Edge 就可以从 Chrome 导入您的书签。 如果您计划进行交换,这不仅会使交换变得更容易,而且它使您可以访问您已经在使用的同样强大的工具。

许多网页设计师使用扩展来让他们的生活更轻松。 也许它是一个颜色滴管,所以你可以从网站上抓取完美颜色的十六进制(你现在也可以在 Edge 中使用它!),或者是一把尺子来获得正确的大小或字体抓取器。 也许您已经安装了此列表中的所有内容,并且您不想仅仅因为这些而离开 Chrome。

好吧,现在你可以了。

Microsoft Edge Chromium 引擎

因为即使 Edge 基于 Chromium,它也不是Chrome 。 它仍然是微软的产品,这意味着您将获得他们一直在重建声誉的软件质量。 不是谷歌的始终在中间范围内的代表。

将网站另存为 HTML

在 Chromium 升级之前,您无法将网页保存为 HTML。 至少可以说,右键单击上下文菜单是……有限的。

edge 无法将网站下载为 html

有了 Chromium 引擎,情况不再如此。 你最终会得到一个真正的上下文菜单。

Microsoft Edge Chromium 引擎

只需按“另存为...”,您就可以获得该站点的本地副本以供查看和使用,这样您就可以确保每个元素都正确无误。

Microsoft Edge Chromium 引擎

说到元素应该如何……

边缘终于允许页面检查

Microsoft Edge Chromium 引擎

这是网页设计师的一大亮点。 以前在 Edge 中工作几乎是不可能的,不是因为缺乏功能支持(尽管这很重要),而是因为您无法深入了解并检查单个元素以调试和排除任何问题。 您无法很好地调整和微调您的工作,因为您实际上无法轻松访问您的工作。

这已不再是这种情况。 所以网页设计师很高兴。 您最终可以使用 JS 控制台,使用 CSS 样式表,并在元素上戳和戳直到您满意为止。

私人浏览在这里

Microsoft Edge Chromium 引擎

几乎所有的浏览器都可以让您在一个干净的、没有历史记录的私人窗口中运行页面。 除了边缘。 同样,使用 Chromium,设计师将能够打开他们的作品并查看它如何呈现给用户,而无需注销、清除缓存和 cookie,也无需跳过十几个环节。 我们现在可以访问在功能上与 Chrome 的隐身标签相同的 InPrivate 窗口。 只需右键单击,您就在那里。

Microsoft Edge Chromium 引擎

对于需要使工作像素完美的网页设计师来说,能够立即测试干净的设计是必不可少的。 这个功能限制了很多设计师在 Edge 中工作,因为不使用私人窗口太麻烦了。 如果你是那种每天都会打开几十个的设计师,你可能会对 Edge 非常适合你的工作流程感到惊讶。

还有更多

这些只是冰山一角。 这只是将 Chromium 引入 Edge 将使网页设计师可以访问的功能的一小部分示例。

  • Edge 将支持flat()flatMap()
  • 可以导入动态 JavaScript 模块(终于)
  • 使用 CSS 样式化占位符文本
  • 显示:内容现在可供 CSS 网格和 flexbox 用户使用
  • TextEncoderTextDecoder将使显示直播流更好

基本上,可以这样想: 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 提供的文章特色图片