新版火狐 拖 功能_Firefox 35的新功能

新版火狐 拖 功能

Here we are again. Firefox 35 was released on January 13, 2015. Few users will notice any differences but there are some exciting new features for web developers lurking under the hood of the unusually large 46MB update (on Windows). If you haven’t upgraded, select Help > About Firefox from the menu or head over to firefox.com.

我们又来了。 Firefox 35于2015年1月13日发布。很少有用户会注意到它们之间的差异，但是对于潜伏在非凡大的46MB更新(在Windows中)的Web开发人员来说，还有一些令人兴奋的新功能。 如果尚未升级，请从菜单中选择“ 帮助” >“ 关于Firefox” ，或转到firefox.com 。

CSS3过滤器属性 (CSS3 filter Property)

The filter property allows you to apply Photoshop-like filters on images or any element in the DOM. The effects include:

filter属性允许您在图像或DOM中的任何元素上应用类似于Photoshop的滤镜。 效果包括：

• blur(radius) — applies a Gaussian blur

  blur(radius) -应用高斯模糊

• brightness(percent) — changes the brightness. 100% is unchanged, over 100% makes the element brighter and under 100% makes it darker (0% is complete black).

  brightness(percent) —更改亮度。 100％不变，超过100％会使元素变亮，而低于100％会使元素变暗(0％是纯黑色)。

• contrast(percent) — changes the contrast. 100% is unchanged, over 100% gives less contrast and under 100% gives more contrast (0% is complete black).

  contrast(percent) —更改对比度。 100％不变，超过100％会使对比度降低，而低于100％会使对比度更高(0％是纯黑色)。

• grayscale(percent) — converts a color image to grayscale. 0% is unchanged and 100% is full grayscale.

  grayscale(percent) —将彩色图像转换为灰度。 0％不变，而100％为全灰度。

• sepia(percent) — converts a color image to sepia. 0% is unchanged and 100% is full sepia.

  sepia(percent) —将彩色图像转换为棕褐色。 0％不变，而100％为全棕褐色。

• drop-shadow(offsetx, offsety, blur, spread, color) — similar to the standard box-shadow effect except the shadow will apply to non-rectangular images with an alpha mask applied.

  drop-shadow(offsetx, offsety, blur, spread, color) -与标准的box-shadow效果相似，不同之处在于阴影将应用于带有alpha蒙版的非矩形图像。

• hue-rotate(angle) — changes the colors by the number of degrees around the color circle.

  hue-rotate(angle) -通过围绕色环的度数更改颜色。

• saturate(percent) — saturates the colors. 100% is unchanged.

  saturate(percent) —饱和颜色。 100％不变。

• invert(percent) — inverts the colors. 0% is unchanged and 100% creates a full negative image.

  invert(percent) —反转颜色。 0％不变，而100％则创建完整的负像。

• opacity(percent) — identical to the CSS opacity property although some browsers will provide hardware acceleration for improved performance.

  opacity(percent) —与CSS opacity属性相同，尽管某些浏览器将提供硬件加速以提高性能。

• url(file.svg#target) — specifies an SVG filter

  url(file.svg#target) -指定SVG过滤器

Any number of effects can be applied in the same declaration, e.g.

可以在同一声明中应用任意数量的效果，例如

.element {
	filter: blur(2%) grayscale(50%) brightness(10%);
}

All browsers other than Internet Explorer now support filters so I’m expecting to see an exponential increase in usage — especially when combined with animations. For more information and examples, refer to the MDN filter reference.

除Internet Explorer之外的所有浏览器现在都支持过滤器，因此我希望使用率呈指数级增长，尤其是与动画结合使用时。 有关更多信息和示例，请参考MDN过滤器参考 。

CSS列表符号属性 (CSS List symbols Property)

There’s no need to use boring numeric or alphabetic lists any longer! The list-style property can be passed a symbols value which defines of any sequence of characters or icons you desire. For example:

不再需要使用无聊的数字或字母列表！ 可以向list-style属性传递一个symbols值，该值定义所需的任何字符或图标序列。 例如：

ul {
	list-style: symbols(cyclic 'x', 'y', 'z');
}

will present unordered lists with the first item as ‘x’, the second as ‘y’ and the third as ‘z’. The cyclic parameter specifies that the symbols repeat so the fourth item is ‘x’ again.

将显示无序列表，其中第一项为“ x”，第二项为“ y”，第三项为“ z”。 cyclic参数指定符号重复，因此第四项再次为“ x”。

For more information and examples, refer to the MDN symbols reference.

有关更多信息和示例，请参考MDN符号参考 。

JavaScript更新 (JavaScript Updates)

There have been a number of JavaScript enhancements and additions including:

JavaScript进行了许多增强和添加，包括：

• element.closest(selector) returns the closest ancestor (parent, grand-parent, etc.) to the element which matches the selector (it’s identical to jQuery’s API)

  element.closest(selector)返回最接近祖先(父，祖父母等)的元素到与选择器匹配的元素(与jQuery的API相同)

• The Resource Timing API allows you to analyze download statistics for all resources in your document. For more information, refer to Aurelio De Rosa’s Introduction to the Resource Timing API.

  Resource Timing API使您可以分析文档中所有资源的下载统计信息。 有关更多信息，请参阅Aurelio De Rosa的Resource Timing API简介 。

• You can now reference CSS styles using array-like notation such as element.style['background-image'] as well as the usual element.style.backgroundImage property. This brings Firefox in-line with Chrome’s implementation.

  您现在可以使用类似数组的符号(例如element.style['background-image']以及通常的element.style.backgroundImage属性)来引用CSS样式。 这使Firefox与Chrome的实现保持一致。

• Redefining variables using let or referencing them before a let statement now throws an error.

  现在，在let语句引发错误之前，使用let或引用它们来重新定义变量。

开发人员工具更新 (Developer Tool Updates)

You can inspect pseudo-elements added in CSS using ::before and ::after. The implementation is a little different to other tools because elements are shown in the DOM tree rather than CSS properties — which actually makes more sense. Click an element to view its styles.

您可以使用::before和::after来检查CSS中添加的伪元素。 该实现与其他工具略有不同，因为元素显示在DOM树中而不是CSS属性中，这实际上更有意义。 单击一个元素以查看其样式。

CSS source maps are now enabled by default for preprocessors such as Sass and LESS (presuming your compiler offers the facility). Ensure “Show original sources” is set in the Inspector or Style Editor configuration — you’ll then be able to link to the pre-compiled code rather than the generated CSS.

现在默认情况下为Sass和LESS等预处理器启用CSS源映射(假定编译器提供了该功能)。 确保在“检查器”或“样式编辑器”配置中设置了“显示原始资源”，然后您就可以链接到预编译的代码，而不是链接到生成CSS。

Finally, you can view a list of node DOM properties by selecting it, opening the split console, and entering inspect($0). That’s a little cumbersome so I hope the feature will become a panel like Firebug offers.

最后，可以通过选择节点DOM属性，打开拆分控制台并输入inspect($0)来查看节点DOM属性的列表。 这有点麻烦，所以我希望该功能将成为Firebug提供的面板。

杂项更新 (Miscellaneous Updates)

Other random updates include:

其他随机更新包括：

• The CSS mask-type property is enabled by default. It defines whether an SVG <mask> element is a luminance or alpha mask.

  CSS mask-type属性默认情况下mask-type启用状态。 它定义SVG <mask>元素是亮度还是alpha蒙版。

• WOFF2 fonts are supported.
  支持WOFF2字体。
• Image resizing performance has been improved.
  图像调整大小性能已得到改善。
• Hello — Firefox’s native Skype-alike video chat system — now features conversation rooms.
  您好-Firefox的本机类似Skype的视频聊天系统-现在具有对话室。
• The search bar interface has been improved. I couldn’t see any difference but it may only apply to certain locales such as the US.
  搜索栏界面已得到改进。 我看不出有什么区别，但可能仅适用于某些地区，例如美国。

• A new Apps Tool menu and icon allows quick access to the Firefox Marketplace. Many of apps only work on Firefox OS but you’ll find many for the mobile and desktop browser.

  新的Apps Tool菜单和图标可快速访问Firefox Marketplace 。 许多应用只能在Firefox OS上运行，但您会发现许多用于移动和桌面浏览器的应用。

• The PDF rendering system has been upgraded.
  PDF渲染系统已升级。
• Nine security vulnerabilities have been fixed.
  修复了九个安全漏洞。

Version 35 is another good improvement although I’m surprised the upgrade size was so large?

版本35是另一个不错的改进，尽管我很惊讶升级大小如此之大？

Firefox has a healthy market share and remains a great option for web developers and power users who require a highly customizable application. However, usage has been dropping slowly.

Firefox具有良好的市场份额 ，对于需要高度可定制应用程序的Web开发人员和高级用户而言，Firefox仍然是一个不错的选择。 但是，使用率一直在缓慢下降。

The browser doesn’t suffer the problems and high memory usage of historical versions but it struggles to match the speed and stability of Chrome and Opera. I hope Mozilla can entice users back to Firefox but it’s going to take considerable effort.

该浏览器不会遇到历史版本的问题和高内存使用情况，但很难与Chrome和Opera的速度和稳定性相提并论。 我希望Mozilla能够吸引用户重新使用Firefox，但这将需要付出巨大的努力。

If you’ve switched to Chrome as your primary browser, what would make you consider using Firefox?

如果您已将Chrome切换为主浏览器，那么您会考虑使用Firefox的原因是什么？

翻译自: https://www.sitepoint.com/whats-new-firefox-35/

新版火狐 拖 功能