Firefox Development Highlights – H.264 & MP3 support on Windows, scoped stylesheets + more

Time for the first look this year into 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).

H.264 & MP3 support on Windows

Firefox for Android and Firefox OS already support H.264 and MP3. We are also working on bringing these formats to Firefox Desktop. On Windows 7 and above, you can already test it by turning on the preference media.windows-media-foundation.enabled in about:config. Decoding is done on the OS side (no decoder included in Firefox source code, not like WebM or Ogg Theora). For Linux and Mac, work is in progress.

The new Downloads panel has been enabled

We have now enabled the new Downloads panel:

Scoped style attribute

It’s now possible to define scoped style elements. Usually, when we write a stylesheet, we use <style>...</style>, and CSS code is applied to the whole document. If the <style> tag is nested inside a node (let’s say a <div>), and the <style> tag includes the scoped attribute (<style scoped>), then the CSS code will apply only to a subtree of the document, starting with the parent node of the <style> element. The root of the subtree can also be referred via the :scope pseudo-class.

Demo

Scoped style support

Our friends over at HTML5Rocks have also written about it in A New Experimental Feature: scoped stylesheets.

@supports and CSS.supports

In Firefox 17, we shipped the @supports CSS at-rule. This lets you define specific CSS code only if some features are supported. For example:

@supports not (display: flex) {
  /* If flex box model is not supported, we use a different layout */
  #main {
      width: 90%;
  }
}

In Firefox 20, it’s now possible to do the same thing, but within JavaScript:

if (CSS.supports("display", "flex")) {
  // do something relying on flexbox
}

View full post on Mozilla Hacks – the Web developer blog

Leave a Reply