HiDPI 支持、HTML5 通知、并行 JS、asm.js 等 - Firefox 开发亮点

是时候再次关注 Firefox 的最新进展了。这是我们 Bleeding EdgeFirefox 开发亮点 系列的一部分,大多数示例只在 Firefox Nightly 中有效(并且可能发生变化)。

HiDPI 支持

我们很高兴地说,现在支持具有多个图像的 ico/icns:最高分辨率的图标现在将在 HiDPI/Retina 显示器上使用。

Favicon 实现描述在 bug 828508 中,ico/icns 描述在 bug 419588 中。

性能改进/快速响应

已经进行了许多 性能改进,例如更快的启动速度、触摸板上的更好滚动和更流畅的动画。

然而,最重要的改进可能是多线程图像解码器。结果应该是更快的页面加载和标签切换。所有细枝末节都描述在 bug 716140 中。

HTML5

在 HTML5 及其朋友的世界中,我们有一些很好的额外支持

<input type=”range”>

我们现在在表单中支持 <input type="range"> 元素。要对其进行样式设置,可以使用 ::-moz-range-progress

::-moz-range-progress {
    background: #f00;
}


您可以在 <input type=”range”> 演示在 jsFiddle 上的实际效果

HTML5 通知

HTML5 通知现已实现。基本上,您请求权限,然后可以创建通知

function authorizeNotification() {
    Notification.requestPermission(function(perm) {
        alert(perm);
    });
}

function showNotification() {
    var notification = new Notification("This is a title", {
        dir: "auto",
        lang: "",
        body: "This is a notification body",
        tag: "sometag",
    });
}

请参阅 HTML5 通知演示在 jsFiddle 上的实际效果

WebAudio API 默认激活

WebAudio API 在 Firefox Nightly 中已默认激活。欢迎测试人员,尽管在发布之前仍有一些工作要做。

JavaScript

并行 JS

并行 JS 的第一个版本已登陆 Firefox。在 并行 JS 登陆 文章中提供了更多详细信息。

asm.js

我们很高兴地说,asm.js 现在已在 Firefox 中,计划在 Firefox 22 中发布!Luke Wagner 在 Firefox Nightly 中的 asm.js 中写了更多关于它的内容。

ES6 箭头函数语法

我们现在支持 ES6 箭头函数语法

let square = x => x*x;
console.log(square(3));

CSS

@supports 默认激活

我们计划在 Firefox 22 中发布它。关于 @supports 在 MDN 上的更多信息

min-width 和 min-height 'auto' 关键字

min-widthmin-height 'auto' 关键字不再支持。它已从 CSS3 Flexbox 中删除。有关详细信息,请参阅 bug 848539

CSS Flexbox 已重新启用

很高兴告诉您,CSS Flexbox 已在 Firefox 22 中默认重新启用,当前正在 Firefox Aurora 中!

关于 Robert Nyman [荣誉编辑]

Mozilla Hacks 的技术布道者和编辑。就 HTML5、JavaScript 和开放网络发表演讲和博客文章。Robert 是 HTML5 和开放网络的坚定支持者,自 1999 年以来一直从事 Web 前端开发工作 - 在瑞典和纽约市。他还会定期在 http://robertnyman.com 上发布博客文章,并且热爱旅行和结识新朋友。

更多 Robert Nyman [荣誉编辑] 的文章…

关于 Jean-Yves Perrier

Jean-Yves 是 Mozilla 开发者外联团队的项目经理。此前,他是 MDN 技术作家,专门从事 Web 平台技术(HTML、CSS、API),并且多年来一直担任 MDN 内容主管。

更多 Jean-Yves Perrier 的文章…

关于 Paul Rouget

Paul 是 Firefox 开发人员。

更多 Paul Rouget 的文章…


25 条评论

  1. thinsoldier

    您知道 Flexbox 包装何时可用吗?

    2013 年 4 月 25 日 下午 2:10

    1. WulfTheSaxon

      它应该在今天早些时候 dholbert 提及的“近期内”可用:https://bugzilla.mozilla.org/show_bug.cgi?id=702508#c15

      2013 年 4 月 25 日 下午 7:18

  2. Daniel Holbert

    thinsoldier:很难说;希望在几个 Firefox 版本内,可能在 20 多个版本中。您可以在 https://bugzilla.mozilla.org/show_bug.cgi?id=702508 中跟踪进度

    2013 年 4 月 25 日 下午 5:06

  3. Adam Reineke

    您在 ES6 箭头代码示例中显示的是 > 而不是 >

    此外,在这些评论帖子字段中添加 tabindex 属性,以便跳过垃圾邮件陷阱会很好。当我通过这些字段进行制表符操作时,我被卡住了,然后开始输入。:-)

    2013 年 4 月 25 日 下午 10:14

    1. Robert Nyman [编辑]

      是的,不幸的是代码转义了。感谢您提醒 tabindex 问题,我们会看看能做些什么。

      2013 年 4 月 26 日 上午 1:41

  4. Screwtape

    拥有 HTML5 通知很酷,但我有点难过的是它没有与我的操作系统本机通知系统(Linux 上的 GNOME 3)集成。在 Bugzilla 中查看了一段时间后,我找到了 bug 404738,它 *似乎* 在不同错误之间进行调整时,意外地被设置为 WONTFIX。这些错误建议对同一个目标采取不同的技术方法。

    2013 年 4 月 26 日 上午 12:41

    1. Robert Nyman [编辑]

      我相信实现演示仍在讨论中。

      2013 年 4 月 26 日 上午 1:41

  5. Walid Damouny

    HiDPI 支持是一个不错的补充,尽管拥有 SVG 支持将使单个位图格式作为网站图标过时。它还将为视觉上具有吸引力的 Firefox 书签扩展程序和 Firefox OS 应用提供更好的启动器图标。

    2013 年 4 月 26 日 上午 2:23

    1. nemo

      我不同意 SVG 是灵丹妙药。
      如果您看一下,比如 /usr/share/icons/Humanity,您会发现它们有各种尺寸的相同 SVG。
      为什么?因为如果您将高细节 SVG 缩放到 16×16,它看起来无法读取,如果您将低细节 SVG 放大,它看起来很无聊。
      除非 SVG 有一种方法可以根据渲染大小指定某些路径被禁用。也许是嵌入式 CSS 中的媒体查询。所以。基本上让 SVG 支持多个嵌入式图像 :)

      2013 年 5 月 1 日 下午 12:19

      1. Walid Damouny

        您在一件事上是正确的,缩放到 16×16 的 SVG 不好。原因是在如此低的解析度下,图标使用视觉提示和抗锯齿像素来查看图标并感知细节,而这些细节在如此低的像素密度下很难绘制。换句话说,我们有一个截止点,在该截止点下,位图更好,因此需要两种不同的格式来表示不同的解析度,位图用于低像素计数,矢量用于高像素计数。

        为了说明我的观点,请参阅来自上述错误 [https://bugzilla.mozilla.org/show_bug.cgi?id=828508] 的此图像 [https://bug828508.bugzilla.mozilla.org/attachment.cgi?id=699914]。您可以看到,在 HiDPI 监视器上,低解析度图标中的像素更少,但该像素计数在低 DPI 监视器上将不可见。提供 SVG 图标作为选项,就像网站目前为添加到主屏幕的网站提供 iPad 和 iPhone 图标一样,意味着在网页中添加一行 HTML,而不会像添加对具有多个图像的 ico/icns 的支持时那样给浏览器增加太多复杂性。

        2013 年 5 月 1 日 下午 4:43

  6. Fabian

    通知的想法听起来不错,但我担心它会被广告商滥用。我知道您可以拒绝权限,但我担心当通知已集成到浏览器中时,您将不得不不断单击这些权限通知,而只是随机访问页面。好吧,我们可能只能看看结果会如何 :)

    2013 年 4 月 26 日 上午 10:53

    1. Robert Nyman [编辑]

      我同意,存在这种风险。但是,与任何功能或 API 一样,在为用户提供便捷和优秀的功能以及保护他们之间存在微妙的平衡。

      2013 年 4 月 29 日 上午 5:27

  7. xsoh

    范围可以是多值的?我的意思是多个滑块。

    2013 年 4 月 26 日 下午 9:32

    1. Robert Nyman [编辑]

      据我所知,只有一个值。但是,您可以使用相应的属性设置最小值、最大值和步长值。

      2013 年 4 月 29 日 上午 5:26

      1. nemo

        令我失望的是,范围滑块没有明确的方法来设置刻度标记。根据滑块的长度,这使得在范围内选择精确值变得很麻烦。

        我正在尝试使用各种 HTML5 控件来选择一个范围内的数字。数字字段的小型旋转框箭头使用起来太烦人了,并且没有很好地利用水平空间。最后还是使用了它,因为它仍然比范围滑块或普通文本字段更好。我想我可以使用 JS 编写一些自定义的东西,但是……

        2013 年 5 月 1 日 下午 12:22

        1. Robert Nyman [编辑]

          步长属性有助于更容易地在预定义值之间跳转。但是是的,如果任何值都有效,它将无法帮助提高精度。

          2013 年 5 月 2 日 上午 2:10

          1. nemo

            即使有可用的步骤,范围滑块也不包括,例如左侧或右侧显示的数字来指示所选的值(您需要使用 JS 来进行黑客攻击)。而且,如果没有顶部/底部的刻度线和间歇步骤,用户必须不必要地拖动以确定他们应该在哪个位置。

            它太简约了,而且没有配置选项来解决它 :-/

            2013 年 5 月 2 日 上午 7:29

          2. Robert Nyman [编辑]

            是的,这些都是合理的观点。您需要 JavaScript 来正确地向用户提供反馈。

            2013 年 5 月 2 日 下午 1:45

  8. Hanush

    我不明白为什么 Firefox 仍然不支持日期输入字段。这是一个非常有用的字段

    2013 年 5 月 1 日 下午 12:04

    1. Robert Nyman [编辑]

      我不确定目前的状况是什么,但我个人希望我们在 Firefox 中拥有它。

      2013 年 5 月 2 日 上午 2:12

  9. Mathew Porter

    我很高兴 FF 中正在实施对 HTML5 通知 的支持,这样我就可以开始尝试了。

    2013 年 5 月 2 日 上午 10:24

    1. Robert Nyman [编辑]

      很高兴您喜欢它!

      2013 年 5 月 2 日 下午 1:39

  10. Cyril

    通知终于实现了,这是个好消息。然而,我在 W64 和 Linux 上的 FF23 上尝试了 jsfiddle,但没有显示任何内容。是否有隐藏的设置需要设置?

    2013 年 5 月 2 日 下午 10:38

    1. Robert Nyman [编辑]

      我在 Ubuntu 上使用 Xfce 尝试过,运行良好。您尝试过先点击授权按钮吗?

      2013 年 5 月 3 日 下午 1:41

    2. KWierso

      它在我的 Windows 8 上运行良好。通知显示在主显示器上,而不是我目前打开 Firefox 的辅助显示器上。

      2013 年 5 月 16 日 下午 1:01

本文的评论已关闭。