Font Inspector and and elements – Firefox Development Highlights

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.

image

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

We have implemented support for two new elements:

<time> element

The HTML time element (

Example:

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>

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:

<data id="user" value="humphd">David Humphrey</data>
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.

View full post on Mozilla Hacks – the Web developer blog

Leave a Reply