Time for another look at the latest developments with Firefox. This is part of our Bleeding Edge and Firefox Development Highlights series, and most examples only work in Firefox Nightly (and could be subject to change).

Font Inspector

A Font Inspector is now available in the Firefox DevTools.

In the Firefox Inspector, a “Fonts” panel is now available. It exposes different information about the @font-faces used in the page:

• Font name and font family
• Its location (system vs. remote, and URL)
• A preview (you can change it)
• @font-face code

HTML5 and elements support

We have implemented support for two new elements:

<time> element

The HTML time element () represents either time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and timezone information). This element is intended to be used presenting dates and times in a machine readable format. This can be helpful for user agents to offer any event scheduling for the user’s calendar.

Example:

The concert took place on May 15.

More information can be found in the MDN documentation for the <time> element, and in the W3C specification.

<data> element

The data element represents its contents, along with a machine-readable form of those contents in the value attribute. The value attribute must be present and its value must be a representation of the element’s contents in a machine-readable format.

The <data> element adds a new attribute, value, which contains a string representation of the data. In script we can use the .value property to get the reflected value:

Example:

David Humphrey
document.getElementById("user").value; // "humphd"

It’s available in the WHATWG specification, and David Humphrey’s wrote more about it in HTML5 time and data elements in Firefox.