Tous les articles

Firefox 16, qu’y a-t-il pour nous là-dedans ?

Par Pierre Bertet

Firefox 16 est sorti hier ! Voici une sélection des nouveautés qui me semblent intéressantes pour les développeurs Web (si vous êtes très motivé, ruez-vous sur les 1989 améliorations et corrections de cette version). La liste qui suit a été constituée à partir de la page Changes for Web developers du Mozilla Developer Network.

Developer Toolbar

La Developer Toolbar est disponible ! Elle regroupe les outils de développement existants dans Firefox (l’inspecteur, la console Web, le débogueur), auxquels vient s’ajouter une console. Celle-ci peut assez facilement être étendue pour y ajouter de nouvelles commandes : cet outil va certainement se retrouver indispensable d’ici peu de temps.

La nouvelle barre de développement de Firefox 16

HTML

L’élément meter est supporté

Un petit rappel du rôle de cet élément :

The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate. This is also known as a gauge.
The meter element — HTML5

Traduction :

L’élément meter représente une mesure scalaire à l’intérieur de limites connues, ou une valeur fractionnaire. Par exemple : le niveau d’utilisation d’un disque, la pertinence du résultat d’une requête, ou la fraction de votants ayant sélectionné un candidat. Le mot « jauge » peut également définir cet élément.

Je vous invite également à consulter la documentation de l’élément meter sur le MDN, et l’article de HTML5 Doctor. Un petit exemple :

16/30 <meter value="16" max="30" min="10"></meter>
45/50 <meter value="45" max="50" min="0"></meter>

Rendu : 16/30 (meter n’est pas supporté sur votre navigateur), 45/50 (meter n’est pas supporté sur votre navigateur).

Trois pseudo-classes CSS ont également été ajoutées pour nous permettre de styler cet élément : :-moz-meter-optimum, :-moz-meter-sub-optimum et :-moz-meter-sub-sub-optimum.

L’API HTML Microdata est supportée

Quelques liens de référence :

Le champ <input> autorise tous les types MIME

Avant cette version, seules ces valeurs étaient disponibles :

<input type="file" accept="audio/*">
<input type="file" accept="video/*">
<input type="file" accept="image/*">

Il est maintenant possible d’être plus précis :

<input type="file" accept="audio/mpeg">
<input type="file" accept="video/*,image/*">
<input type="file" accept="image/*,.autre-extension">

Pardonnez-moi, mais je me sens obligé de rappeler qu’aucune validation dans le navigateur n’est destinée à remplacer une validation côté serveur. Ça va mieux, merci !

CSS

Adieu préfixes

Beaucoup, beaucoup de préfixes ont été supprimés. Voyez :

Les animations : animation, animation-delay, animation-direction, animation-duration, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, animation-fill-mode.

Les transformations : transform-origin, transform.

Les dégradés : linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient.

La fonction calc(). Le potentiel de cette fonction CSS est énorme (documentation MDN), et une version non préfixée facilitera son utilisation. Seul Opera supporte pas calc() aujourd’hui.

Animations CSS : reverse

Il est maintenant possible d’utiliser les valeurs reverse et alternate-reverse pour la propriété animation-direction (documentation MDN).

Si vous vous souhaitez voir en quoi ces nouvelles valeurs de direction influent sur une animation CSS, je vous ai concocté une petite démonstration. Allez-donc y jeter un œil avec votre Firefox flambant neuf !

box-sizing sur les cellules de tableaux

Cette propriété, devenue récemment assez populaire (voir l’article de Paul Irish), s’applique maintenant correctement aux cellules de tableaux.

Media queries

Le type de donnée resolution (documentation MDN) permet d’utiliser une nouvelle unité, le dppx (dots per CSS pixel). Il s’agit du nombre de points (sur l’écran) par pixel CSS (virtuel).

Les unités dppx, dpi, et dpcm font maintenant référence à des valeurs CSS (virtuelles), et non plus à des valeurs physiques.

Flex Layout

Il est maintenant possible d’utiliser la valeur auto pour les propriétés min-width et min-height (voir la spécification CSS3 Flexbox : Implied Minimum Size of Flex Items).

DOM : adieu préfixes

JavaScript

Trois nouvelles méthodes ont été ajoutées sur l’objet Number : isFinite(), toInteger() et isInteger().

L’opérateur Spread

Il est maintenant possible de convertir un tableau en paramètres de fonction, à l’aide de l’opérateur spread du projet Harmony.

Évidemment, n’utilisez pas cette fonctionnalité pour l’instant pour du Web, c’est totalement incompatible avec les autres navigateurs. Mais si vous développez une commande pour la nouvelle Developer Toolbar de Firefox, il serait dommage de vous en priver !

Un exemple :

// Pour appeler cette fonction
function nousIrons(a, b, c, lieu) {
  var str = a + ', ' + b + ', ' + c + ', nous irons ' + lieu;
  return str;
}

// Avec ce tableau
var data = [1, 2, 3];

// Et ce lieu
var lieu = 'au bois';

// Avant, nous devions faire
nousIrons(data[0], data[1], data[2], lieu);

// Ou encore, avec Array.apply()
nousIrons.call(this, data.concat(lieu));

// Mais maintenant, avec la syntaxe spread
nousIrons(...data, lieu);

// Cool non ?

La conclusion ! La conclusion !

Pour cet article, j’ai essayé prendre les notes de version de Firefox et d’y ajouter, en vrac, des informations complémentaires, quelques démos, et mes réactions. J’espère que le résultat sera plus digeste qu’une simple liste : n’hésitez pas à me faire part de vos impressions dans les commentaires !

Article rédigé par , publié le dans la catégorie Front-end. Vous pouvez suivre les commentaires de cet article en utilisant le flux RSS dédié. Les commentaires sont fermés sur cet article.

12 commentaires

Flux RSS des commentaires de cet article

Je n’avais pas encore entendu parler de la fonction calc() en CSS!! Génial! Combien de fois j’ai grogné qu’un truc aussi simple ne soit pas implémenté!
Merci pour toutes ces infos, moi je n’avais pas vu de différences avec mon firefox tout neuf….

Le 10 Oct. 2012 à 20h12 par Clem

Houla j’étais passer à coté de cet API vibration là, je vais vite lire ça, il y a surement du bon à prendre :)
Merci pour ces infos.

Le 12 Oct. 2012 à 08h23 par Agence cube

Comment tu m’as vendu du rêve avec ton « qu’aucune validation dans le navigateur n’est destinée à remplacer une validation côté serveur. »

Le 18 Oct. 2012 à 23h02 par kaneel

Si je peux me permette, calc() a l’air bien fun mais… maintenant qu’on a les mains dans des pre-proc CSS, ça me parait un peu « too late »

Le 18 Oct. 2012 à 23h06 par kaneel

Les commentaires sont fermés sur cet article.