Firefox 49 修复了针对 WebKit 设计的网站，以及更多

Hacks 博客上的几篇最近文章解释了为什么网络开发人员应该关心跨浏览器兼容性以及优秀的网络开发人员如何实现它。网络开发人员在让网络为所有人服务方面发挥着至关重要的作用。浏览器制造商也是如此。从今天起，我们在 Gecko 渲染引擎中引入了一系列兼容性功能，使我们与 WHATWG 兼容性标准保持同步。

此版本中的一些显著变化包括对多个 -webkit- 前缀和 WebKit 特定接口的支持。这些平台功能是非标准的、供应商专有的，并且非常普遍。

非标准、不兼容的 CSS 会使针对标准设计的用户代理的网站出现故障。当不支持 -webkit- 前缀的浏览器（例如 Firefox 48 及更低版本）访问这些网站之一时，网络看起来会很糟糕。这种情况会一直持续到这些网站更新其 CSS 为止。因此，Firefox 49 包含以下更改以适应 WebKit 特定内容

WebKitCSSMatrix() 接口支持
-webkit-gradient() 支持
-webkit- 前缀属性映射到其标准等效项。
从一些 -webkit- 前缀（旧）flexbox 属性到 -moz- 前缀 flexbox 属性的映射。
对以下尚未有无前缀等效项的 CSS 属性的支持
-webkit-text-fill-color
-webkit-text-stroke-color
-webkit-text-stroke-width
-webkit-text-stroke

（不）常见问题解答（iFAQ）

问：这对我意味着什么？

答：作为用户，改进了与仅针对 WebKit 浏览器设计的网站的兼容性，尤其是在移动设备上。
okcupid

作为开发人员，您可能需要返回并为您的 -webkit- 仅 CSS 添加无前缀等效项，以便我们将来可以从网络平台中删除这些项（理论上）。专业提示：无前缀属性始终放在最后。

问：您是否弄坏了我的网站？

答：我们希望没有！但您可以使用以下首选项切换此功能以进行测试

about:config?filter=layout.css.prefixes.webkit

如果存在差异（更糟！），请向 bugzilla.mozilla.org 报告错误，并抄送 mitaylor@mozilla.com，或在 webcompat.com 上报告错误。

问：我现在应该只使用 -webkit- 前缀吗？

答：不，那是不必要和不可取的。继续使用 Web 标准并继续在多个浏览器中进行测试。如果您必须使用 -webkit- 前缀（现在使用它的理由比以往任何时候都少），请确保它们在您 CSS 中的无前缀属性之上。

完整披露：Mike 编辑兼容性标准，但如果您想贡献，还有工作要做！

Mike 在德克萨斯州奥斯汀的 Mozilla 工作，担任 Web 兼容性工程师。

Mike Taylor 的更多文章…

Justin Crawford 是 Mozilla 的产品工程师，负责开发人员营销和增长。他喜欢思考未来、构建事物和骑自行车。

Justin Crawford 的更多文章…

32 条评论

匿名

为什么不直接使用现有的 moz 标志？

2016 年 9 月 20 日下午 2:58
1. mitaylor@mozilla.com
  
  不幸的是，很多网站都是专门为移动 WebKit 浏览器设计的，并没有包含 moz 前缀，甚至没有无前缀变体。
  
  2016 年 9 月 20 日下午 4:57
  1. Luke
    
    有足够多的网站专门/意外地编写成只能在 Webkit 中工作，因此有必要像那样调整浏览器吗？这真的解决了问题吗？
    
    2016 年 9 月 20 日下午 8:38
    1. mitaylor@mozilla.com
      
      这为 Firefox 用户解决了问题，让他们现在可以使用这些网站。唯一的其他选择是让网站开发者回过头来更新他们的网站以使用标准，而这有点像大海捞针（不幸的是）。
      
      2016 年 9 月 21 日上午 10:20
Anand Kumria

为什么不在 Firefox 的 nightly/alpha/beta 版本中显示一个悬挂横幅，当它发现需要启用这种兼容性模式的文档时？

可能有一些网站会将各种 CSS 组合在一起，而且可能并不立即清楚这些（错误）功能正在使用。

2016 年 9 月 20 日下午 5:25
1. Karl Dubost
  
  因为大多数情况下这些网站都是由根本没有在 Firefox 中进行测试的网络开发人员制作的，因此横幅只会对 Firefox 用户可见（如您提到的 nightly、alpha 和 beta）。而且因为有时候，这仅仅是公司在仅针对特定浏览器进行开发时做出的一个有意识的商业决定。
  
  2016 年 9 月 22 日下午 1:50
未定义

从网络开发人员的角度来看，这是一个糟糕的决定，因为它鼓励*直接*使用非标准功能，从而为兼容性问题留下更多空间。原因如下

如果 Firefox 不支持 -webkit 前缀，开发人员将被迫考虑兼容性问题并使用类似“autoprefixer”的东西来帮助。所有实验性功能都将在不同的浏览器（IE、Chrome、Firefox...）上尽可能好地工作。

但如果 Firefox 支持 -webkit 前缀，开发人员购买了它，他们将直接编写类似‘-webkit-feature’的东西，并假设它将在*主要浏览器*上运行。问题是，*主要浏览器*只包括*基于 webkit 的浏览器*，IE 呢？

如果开发人员直接使用非标准功能，迫使他/她考虑潜在问题要比给他/她留下一个脆弱的解决方案更好。

2016 年 9 月 20 日下午 10:09
1. mitaylor@mozilla.com
  
  Edge 支持此更新支持的所有内容（以及 Compat 标准所描述的内容）。IE 支持其中的一部分。所以这些都是当前的主要浏览器。
  
  您必须停止将这些视为非标准，而应该将它们视为 API 和属性，只是名字很糟糕（而且在大多数情况下，它们只是映射到无前缀的标准 CSS）。重点不是您应该继续用前缀编写代码——这样做是为了让*旧*网站（或作者使用过时或不统一技术的网站）正常工作。
  
  2016 年 9 月 21 日上午 10:29
2. Karl Dubost
  
  关于“如果开发人员直接使用非标准功能，迫使他/她考虑潜在问题要比给他/她留下一个脆弱的解决方案更好。”
  
  公平地说，问题是，在大多数情况下，开发人员最初并不想为产品支持特定属性而付出努力。因此，最终用户（他们不知道为什么网站坏了）会遇到糟糕的用户体验。用户比网络开发者多。另外，让开发者考虑这个问题，意味着他们必须 1. 在 Firefox 中进行测试。2. 关心在 Firefox 中的结果。并非每个人都有相同的业务优先级。所以我们又回到了改善用户体验上。
  
  2016 年 9 月 22 日下午 1:58
gnz

问：这对我意味着什么？

答：这意味着 Mozilla 背弃了它维护 Web 标准的承诺，选择屈服于 Webkit。对你来说，这是一个悲伤的日子，因为 Firefox 将不再维护它所肩负的使命，而正是这个使命让你向 Mozilla 捐款。

这意味着你不再觉得有必要将 Mozilla 称为“互联网的卫士，帮助保持互联网的健康和开放”。这意味着 Firefox 已经放弃了。

2016 年 9 月 20 日下午 11:56
1. mitaylor@mozilla.com
  
  > 这意味着 Mozilla 背弃了它维护 Web 标准的承诺
  
  不，恰恰相反。我们采用了 Apple 从未指定的 API 和属性，并将它们变成标准，无论你是否喜欢。
  
  > 选择屈服于 Webkit
  
  我不理解这句话。我们正在为 Firefox 用户启用以前无法使用的内容。如果您重新阅读 Mozilla 宣言，我认为您会发现这与它相符。用户 > 理论纯洁。
  
  2016 年 9 月 21 日上午 10:26
  1. Maxime Thiers
    
    无论你是否喜欢，带 -webkit- 前缀的 CSS 功能既不是也不会变成开放标准。随着 Mozilla 的举动，它将成为现有等效标准的实际标准。
    网页倒退了 18 年，感谢 Mozilla :(
    
    “用户大于理论纯洁”的 b****** 曾经导致“最佳浏览尺寸为 1024×768”的网站出现，现在只需要将 1024×768 替换为 webkit 即可。
    
    历史有时会重演，现在它却在倒退…
    
    [语言已编辑]
    
    2016 年 9 月 21 日下午 12:53
    1. mitaylor@mozilla.com
      
      没错，这是事实上的标准：https://compat.spec.whatwg.org/
      
      2016 年 9 月 22 日上午 09:24
      1. 没关系
        
        在 IE 非常流行的年代，我们是不是只是拿了他们有问题的网页引擎实现，然后把它变成了标准？
        
        如果制定标准的新方法是利用非标准，然后给它们加上“标准”的标签，我认为我们可能就要认输了。
        
        不要误会，我仍然感谢 Mozilla 为网页所做出的努力，但这些消息感觉更像是倒退而不是前进。
        
        2016 年 9 月 22 日下午 15:09
      2. mitaylor@mozilla.com
        
        > 在 IE 非常流行的年代，我们是不是只是拿了他们有问题的网页引擎实现，然后把它变成了标准？
        
        这种情况确实存在，而且我们现在已经忘记了。XMLHttpRequest 是由微软和 Mozilla 发明的，Opera 和苹果在 W3C 的规范出现之前就已经实现了它。显然，这不是标准产生的理想方式，但网络常常是堆砌起来的各种技术，这些技术并不总是按照我们事后想要的方式实现。
        
        我不确定我们是否需要认输。网络是活生生的，各主要供应商在标准组织中都在不断取得进展。你可能认为这只是宣布供应商前缀破产（大多数人都会同意供应商前缀是一个糟糕的主意吧？）——这就是我眼中的情况。
        
        2016 年 9 月 22 日下午 15:38
      3. Karl Dubost
        
        关于：“在 IE 非常流行的年代，我们是不是只是拿了他们有问题的网页引擎实现，然后把它变成了标准？”
        
        是的（不仅是 IE）。没有一个浏览器是完美的。这就是为什么我们可以读取无效 HTML 的原因。让我们来看看。Mike 已经提到了 XMLHttpRequest
        
        * XMLHttpRequest
        * innerText（随后由 Safari（WebKit）实现，然后被 Chrome（Blink）导入，而我们不得不经过多年的抵制和联系后才实现，而且还导致一些网站对用户来说无法访问）。innerText 是去年才在 Firefox 中实现的。感谢 Robert O’Callahan 的工作。标准属性是 textContent。
        * zoom 属性。由 IE 创建，在 WebKit 和 Blink 中实现。仍然没有在 Gecko（Firefox）中实现。会导致一些网站无法访问。
        * insertAdjacentHTML() 由所有浏览器支持，并且由 IE 创建。
        * 等等。
        
        2016 年 9 月 22 日下午 16:35
    2. JakoD
      
      无论你是否喜欢，带 -webkit- 前缀的 CSS 功能既不是也不会变成开放标准。随着 Mozilla 的举动，它将成为现有等效标准的实际标准。
      网页倒退了 18 年，感谢 Mozilla :(
      
      “用户大于理论纯洁”的 b****** 曾经导致“最佳浏览尺寸为 1024×768”的网站出现，现在只需要将 1024×768 替换为 webkit 即可。
      
      历史有时会重演，现在它却在倒退…
      
      抱歉，我不同意。我偶尔会遇到在 Firefox 中无法正常工作的网站。这包括网站的单个部分由于各种问题无法使用，到整个网站都一团糟，以至于普通用户甚至无法找到联系信息来投诉这个错误（稍后会详细说明）。这一切仅仅是因为一个网站是“只使用/为 Chrome 开发的”。
      因此，普通用户会做两件事之一
      – 离开网站，转到竞争对手的网站
      – 或者离开 Firefox，转到 Chrome（或基于 Chrome 的其他浏览器）——这不是我们想要的结果，对吧？
      
      很少会发生的是，错误会被修复，因为… 究竟是谁会报告呢？即使是一个小错误，报告也需要花费时间，也许还会有一些额外的疑问，因为普通用户没有经过专门训练，无法正确地报告错误（这是我在与新客户或大型现有客户的新员工打交道时经常遇到的问题）。人们只是在没有评论的情况下离开网站，例如加载时间太长。
      最后，即使错误被报告了，修复它有时也需要花费资金，而一些网站所有者不愿意支付这笔费用。修复网站以使其与其他浏览器兼容对商人来说似乎是一项巨大的任务，即使实际上只需要取消一些属性的前缀并在构建流程中添加 Autoprefixer 就可以了（也就是不到 5 分钟的时间）。
      考虑到所有这些，以及苹果最终也同意将实验性功能放在前缀后面是一件坏事，并宣布他们不会再这样做 (https://webkit.org/blog/6131/updating-our-prefixing-policy/)，我认为在 Firefox 中支持现有的、普遍使用的 webkit 前缀是可以的——也许可以在控制台（或者如果确实需要，可以在 Firefox 开发版中的某个位置）添加某种形式的通知，这样孤独的新手开发者，他们在该代码上首次使用 Firefox 进行开发，就可以偶然发现它，并进行不到 5 分钟的修复，同时网站仍然（并且在此之前一直）能够正常运行。
      
      2016 年 9 月 25 日上午 01:58
Šime Vidas

我给网页开发者的建议
1. 开始使用 Autoprefixer；
2. 忘记供应商前缀；
3. 让网页浏览器解决剩下的网页兼容性问题。

2016 年 9 月 21 日上午 00:31
Brian Leany

这意味着我将不再使用 Firefox。连续两个版本，现在日常网站都无法加载，只有 Firefox 无法加载。我需要一个可靠、稳定、最重要的是可用的浏览器，而不是一个推动议程的浏览器。

2016 年 9 月 22 日上午 06:49
1. mitaylor@mozilla.com
  
  恕我直言，我认为你错过了这篇文章的重点。
  
  2016 年 9 月 22 日上午 07:19
walt

我们运营着一个体育留言板，大多数成员都是老 Firefox 用户。几天前，我升级到了 49.0 版。我们所有其他网站都正常工作，除了留言板。它无法加载文本和工具栏菜单项。它让我们的留言板无法使用。我已经尽一切努力找出问题所在。所有升级到这个版本的用户，以及使用 iPhone 或平板电脑的用户，都遇到了同样的问题。

我回到 48 版，就没事了。此外，Chrome、Opera、IE 等所有其他浏览器都能正常加载我们的网站，没有任何问题。

我不想使用其他浏览器，但也许不用放弃 Firefox。

2016 年 9 月 24 日下午 16:35
1. Dan Callahan
  
  你能提供一个 URL，以便我们调查吗？
  
  2016 年 9 月 26 日上午 09:17
2. Justin Crawford
  
  听起来是 https://webcompat.com/ 的工作！去那里，提交一个错误报告，有人会深入调查并尽力帮助你。
  
  2016 年 9 月 26 日上午 09:29
Andy Gongea

我认为这是错误的。这样做会让 Firefox 变成 IE。
所以，开发者/设计师是否测试和编写适用于所有浏览器的网站并不重要，Firefox 仍然会正确地渲染它。

2016 年 9 月 25 日上午 01:17
Firefox 用户

好吧，至少 Mozilla 正在投资真正推动浏览器向前发展（即使这意味着停止试图让懒惰的开发者行动起来），而不是将资源浪费在开发 Pocket/Hello 这种荒谬的扩展程序上。

2016 年 9 月 25 日下午 17:19
Nicolas Chevobbe

您好，

有没有办法让 Firefox 忽略 -webkit-* 属性？
我们的一款应用在 Firefox 48 中可以正常使用，现在却无法使用，因为 `display: -webkit-box` 被解释了，即使我们在同一个选择器中声明了标准的 `display: flex` 规则

“`
.x-layout-box {
display: flex;
display: -webkit-box;
}
“`

开发工具确实显示 `display: flex` 被忽略了（它被划掉了）。

我知道 -webkit-box 已经很旧了，但我们必须为用户使用的旧 iPad 保留它。

如果存在一些元标记，可以用来防止 Firefox 使用这些 -webkit-* 前缀，我将不胜感激（更重要的是，如果这个错误能够修复）。

2016 年 9 月 26 日上午 03:19
1. Justin Crawford
  
  > 开发工具确实显示 `display: flex` 被忽略了（它被划掉了）。
  
  如果你将 -webkit-box 声明放在 flex 声明之上，问题是否仍然存在？
  
  在 Firefox 中有一个设置可以切换此行为。将以下内容放入 URL 栏，并将设置更改为 false：about:config?filter=layout.css.prefixes.webkit
  
  2016 年 9 月 26 日上午 09:27
  1. Daniel Holbert
    
    Nicolas：正如 Justin 所建议的，你应该交换这些“display”声明的顺序——你希望将现代 display 值放在*最后*（这样它就可以“胜出”，而不是旧的/粗糙的/模拟的但可能不完美的“-webkit-box” display 模式）。
    
    希望这能解决你网站上的问题。
    
    不过——理想情况下，这种 Firefox 更改应该使情况严格变得更好。如果你有一个已损坏页面的公共 URL 示例，请在 http://webcompat.com/ 提交它，或者在这里粘贴一个 URL，以便我们查看一下，看看为什么它没有正常工作。
    
    2016 年 9 月 26 日下午 14:59
JB

评论中有很多仇恨，我不明白为什么。
当然，我们都应该保持纯洁，而且我们不应该容忍松懈的行为，但现实情况是，大多数开发者不像那些可能会对 Mozilla 此举感到愤怒的人那样注重标准。

毕竟 Mozilla 是一家公司，他们对自己的市场份额有既得利益。如果他们的市场份额因网站损坏而受到损害，他们有权采取行动。

2016 年 9 月 26 日上午 08:58
Jan-Peter Holmström

2016 年 9 月 24 日，我的电脑自动更新到了 Firefox 49.0.1 版。我使用的是 Windows Vista Home Premium。更新后，Firefox 和所有其他 Windows 应用程序中的 Windows 工具栏和任务栏都消失了，只有桌面例外。我尽一切努力找出问题所在，但不得不放弃。我将系统还原到之前的日期，然后无法让 Firefox 正常工作。我不得不撤消系统还原，然后卸载 Firefox 49。现在我重新进行了系统还原，然后安装了 Firefox 48。工具栏和任务栏回来了，但我发现瑞典语有一些错误。当我右键单击时，显示的是英文文本。我不得不将 Firefox 更新标记为“永远不要检查更新”。这不好。
瑞典的 J-P Holmström

2016 年 9 月 26 日下午 13:30
1. mitaylor@mozilla.com
  
  嗨，Jan-Peter！
  
  这听起来像是一个错误，但与这篇文章中描述的更改无关。你可以在 https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Untriaged 提交一个错误报告吗？谢谢！
  
  2016 年 9 月 26 日下午 14:42
约翰

我很久以前就意识到，许多网页开发者倾向于专注于最流行的浏览器，并为其开发。Chrome 显然在全世界范围内几乎都占据主导地位，因此如果您希望网站具有最大的兼容性，那么 Chrome 将是您要使用的浏览器。其他所有浏览器都需要真正努力才能达到这种兼容性。它成为了标准，即使它实际上并非如此。

2016 年 10 月 6 日下午 4:19

本文评论已关闭。

Hacks

作者：Mike Taylor，Justin Crawford

关于 Mike Taylor

关于 Justin Crawford

32 条评论

Firefox 49 修复了针对 WebKit 设计的网站，以及更多

作者：Mike Taylor，Justin Crawford

关于 Mike Taylor

关于 Justin Crawford

探索 Web 开发的优秀资源

谢谢！请检查您的收件箱以确认您的订阅。