新版火狐 拖 功能

tech2023-05-16  97

新版火狐 拖 功能

July 2nd saw the release of Firefox 39. (The release was delayed a few days because of some last-minute stability issues.) Firefox has a lot to offer, but has slowly been slipping in popularity over recent years, so it's always interesting to see what Mozilla is offering to try to win us back!

7月2日看到了Firefox 39的发布。(由于最后一分钟的稳定性问题,发布推迟了几天。)Firefox提供了很多功能,但是近年来它的普及率一直在缓慢下降 ,因此,看看Mozilla提供了什么来尝试赢回我们!

In this article, I'll just highlight a few items that stood out for me.

在本文中,我将重点介绍一些对我来说比较突出的项目。

CSS滚动捕捉点 (CSS Scroll Snap Points)

Firefox is the first browser to fully support CSS Scroll Snap Points. This property provides the ability to snap elements smoothly while scrolling to specific points along an axis—something that otherwise has to be handled with JavaScript.

Firefox是第一个完全支持CSS滚动捕捉点的浏览器。 通过此属性,可以在沿轴滚动到特定点时平滑地捕捉元素,而这在某些情况下必须由JavaScript处理。

This property also works in IE 10+ with prefixes. (You can check out the status of the other browsers on the caniuse site.)

此属性也可在带前缀的IE 10+中使用。 (您可以在caniuse网站上查看其他浏览器的状态。)

Here is a CodePen demo that shows it in action (remember that it only works in Firefox at the time of publication):

这是一个CodePen演示,可以演示它的运行情况( 请记住,它仅在发布时才在Firefox中起作用 ):

See the Pen CSS Scroll Snap Points by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen CSS滚动捕捉点 。

列表样式类型的字符串 (List-style-type Strings)

Of the other CSS enhancements in Firefox 39, this one caught my eye. The list-style-type property now supports the <string> type. This means you can now use the following CSS snippet:

在Firefox 39中的其他CSS增强功能中,这一功能引起了我的注意。 现在, list-style-type属性支持<string>类型。 这意味着您现在可以使用以下CSS代码段:

.asterisk { list-style-type: '*'; }

This also works with the list-style shorthand property. Here’s a little demo (which, again, will only make sense in Firefox 39+ at this stage):

这也适用于list-style简写属性。 这是一个小示例(同样,在现阶段, 仅在Firefox 39+中才有意义 ):

See the Pen List-style-type Strings by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的笔列表样式类型的字符串 。

支持切换,预连接和提取 (Support for Switch, Preconnect and Fetch)

Firefox now supports the new ARIA switch role. Switch plays a similar role to the checkbox and toggle button, but is more suited to a UI element representing an on/off switch. The extra aria-checked attribute of a switch indicates whether the input is on (true) or off (false).

Firefox现在支持新的ARIA 切换角色 。 开关与复选框和切换按钮的作用相似,但更适合于表示打开/关闭开关的UI元素。 开关的额外的aria-checked属性指示输入是打开(true)还是关闭(false)。

预连接 (Preconnect)

Firefox 39 also includes support for <link rel="preconnect">, which allows the anticipation of a future connection without revealing any information.

Firefox 39还包括对<link rel="preconnect"> ,该支持允许预期将来的连接而不会泄露任何信息。

(Fetch)

The Fetch API has also been enabled for network requests from dedicated, shared and service workers. This API provides an interface for fetching resources from, let's say, across the network. It is similar to XMLHttpRequest, but provides a more powerful and flexible feature set.

还为来自专用,共享和服务工作者的网络请求启用了Fetch API 。 这个API提供了一个接口,用于从整个网络中获取资源。 它类似于XMLHttpRequest ,但是提供了更强大和灵活的功能集。

动画和CubicBézier编辑器 (Animation and Cubic Bézier Editor)

Firefox 37 introduced a new feature called animation inspector. If the selected element was animated, the animation tab provided additional information about the animation with play and pause buttons. Firefox 39 has taken this a step further, enabling you to rewind, fast-forward or jump to a specific point in the animation's timeline.

Firefox 37引入了一项称为动画检查器的新功能。 如果选定的元素已设置动画,则“动画”选项卡通过播放和暂停按钮提供有关动画的其他信息。 Firefox 39更进一步,使您可以快退,快进或跳到动画时间轴上的特定点。

While creating CSS animations, you need to specify a timing function. This can be accomplished with a cubic Bézier curve. From Firefox 39 onwards, the cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out". You can also try out these animations right away. Here is a screen shot:

创建CSS动画时,需要指定计时功能。 这可以通过三次贝塞尔曲线来完成。 从Firefox 39开始,立方Bézier编辑器包括许多预设,分为“ Ease-in”,“ Ease-out”和“ Ease-in-out”两类。 您也可以立即尝试这些动画。 这是一个屏幕截图:

开发人员工具的变更 (Changes in Developer Tools)

There have been a lot of other improvements regarding the developer tools.

有关开发人员工具的许多其他改进。

拖放 (Drag and Drop)

You can now move elements around a web page using using drag and drop. All you have to do is click and hold the element and then drag it to its new location. This might come in handy in situations where you want to experiment with the layout of a web page and help in rapid prototyping.

现在,您可以使用拖放功能在网页上移动元素。 您所要做的就是单击并按住该元素,然后将其拖动到新位置。 在您想尝试网页布局并帮助快速制作原型的情况下,这可能会派上用场。

控制台历史 (Console History)

In the past, whenever you closed the console in DevTools, Firefox cleared your console history. Now, the history persists across sessions. The recent commands you entered are now accessible even if you open the console in another tab or restart Firefox. Moreover, there is now a console command named clearHistory available. This command will allow you to clear the history of entered console commands.

过去,每当您在DevTools中关闭控制台时,Firefox都会清除您的控制台历史记录。 现在,历史在各个会话之间都存在。 即使您在另一个选项卡中打开控制台或重新启动Firefox,现在也可以访问您输入的最新命令。 而且,现在有一个名为clearHistory的控制台命令可用。 该命令将允许您清除输入的控制台命令的历史记录。

辅助指令 (Helper Command)

To further assist you with development, a new helper command $_ has been added. Using this command, you can retrieve the value of last evaluated expression—even if you haven't stored it in a variable.

为了进一步帮助您进行开发,已添加了新的帮助程序命令 $_ 。 使用此命令,即使没有将其存储在变量中,也可以检索上一次求值的表达式的值。

For example, type 8+8 then enter/return, producing 16. Then type $_ and enter/return, and the console will again print 16.

例如,键入8+8然后输入/返回,生成16。然后键入$_ ,然后输入/返回,控制台将再次打印16。

将鼠标悬停在内联元素上 (Hovering over Inline Elements)

When you hover over an element in the inspector, the box model for the element is shown overlaid on the page. In Firefox 39, if this element is inline and spans over multiple lines, the box is shown for each individual line. Here is a screenshot:

将鼠标悬停在检查器中的某个元素上时,该元素的框模型将显示在页面上。 在Firefox 39中,如果此元素是内联的并且跨越多行,则会为每一行显示该框。 这是屏幕截图:

通过WiFi调试Firefox OS (Debugging Firefox OS Over WiFi)

From Firefox 39 onwards, WebIDE—a tool for creating, editing, running and debugging web applications on Firefox OS devices and simulators—will support debugging Firefox OS over WiFi.

从Firefox 39开始,WebIDE(一种用于在Firefox OS设备和模拟器上创建,编辑,运行和调试Web应用程序的工具)将支持通过WiFi调试Firefox OS。

This method is not dependent on ADB, and is probably more reliable that the USB method. (In case you're not familiar with ADB, it's a command line tool that lets you communicate with an emulator instance or connected Android-powered device. It's normally used with a device connected over USB.)

此方法不依赖ADB ,并且可能比USB方法更可靠。 (如果您不熟悉ADB,它是一个命令行工具,可让您与仿真器实例或已连接的Android驱动的设备进行通信。通常与通过USB连接的设备一起使用。)

你好和你的社交网络 (Hello and Your Social Networks)

You can now invite people in your social network to a Firefox Hello conversation. The aim of this feature is to make it easier for you to connect with your friends. To use this feature you will have to click on the Hello button. From the conversation window you can click on share link and choose the social network of your choice. More details can be found on the Mozilla site.

现在,您可以邀请社交网络中的人加入Firefox Hello对话。 此功能的目的是使您更轻松地与朋友联系。 要使用此功能,您必须单击“ Hello”按钮。 在对话窗口中,您可以单击共享链接,然后选择所需的社交网络。 可以在Mozilla网站上找到更多详细信息。

读者观点 (Reader View)

Though it was released with Firefox 38.0.5, Reader View is worth mentioning here. Reader View is similar to Safari's Reader Mode (albeit not as pretty). It allows readers to view a clutter-free version of a page—stripping away buttons and other distracting elements from the web page. It also changes the page's text size, contrast and layout to provide a better reading experience.

尽管它是与Firefox 38.0.5一起发布的,但在这里值得一提的是Reader View 。 Reader View与Safari的Reader Mode相似(尽管不那么漂亮)。 它使读者可以查看页面的整洁版本-从网页上剥离按钮和其他分散注意力的元素。 它还可以更改页面的文本大小,对比度和布局,以提供更好的阅读体验。

If it's available for a given page, you'll see a small open book icon in the URL bar. Simply click it to enable Reader View, and click again to return to normal:

如果给定页面可用,则您会在网址栏中看到一个小的打开的书本图标。 只需单击它即可启用Reader View,然后再次单击以恢复正常:

结语 (Wrapping Up)

I've covered some of the more noteworthy changes in Firefox 39 in this article, but you can read more about all the changes in the official release notes. For developer-oriented changes in version 39, you can head over to Developer Release Notes.

我已经在本文中介绍了Firefox 39中一些更值得注意的更改,但是您可以在官方发行说明中阅读更多有关所有更改的信息。 对于版本39中面向开发人员的更改,您可以转到开发人员发行说明 。

Out of all the changes in Firefox 39, it's probably the improved developer tools that stand out for me. How about for you? Is there something new that you're excited about, or have you been left disappointed? Are there any changes here that might win you back over to Firefox? If not, what would it take to draw you back?

在Firefox 39的所有更改中,对我而言,可能是经过改进的开发人员工具。 那你呢 您是否对某些新事物感到兴奋,还是感到失望? 此处是否有任何更改可能会使您重新使用Firefox? 如果没有,将如何吸引您?

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

新版火狐 拖 功能

最新回复(0)