Firefox 4 Beta 2 est de sortie.

Trois semaines après la Beta 1 voici que la Beta 2 de Firefox pointe le bout de son nez. Voyons quelles sont les plus à noter :

Intégration des Transformations et Transitions CSS 3

Elle permettent d’appliquer des effets vraiment intéressant (rotation, décalage, zoom, déformation, perspective) sur les éléments HTML. Voici un petit exemple à tester avec FF 4 beta 2 ou Chrome (sous Ubuntu ça s’est très bien passé)

Exemple

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ultrices lorem at blandit. Aenean vel mauris pharetra mauris adipiscing viverra in sit amet magna. Integer ultrices fermentum fringilla. Praesent rhoncus pharetra turpis id varius. Sed vitae elit nulla. Morbi fermentum auctor ligula vitae rutrum. Nam erat nunc, pretium ac dictum id, adipiscing id lectus.

Le code CSS correspondant à l’exemple :

#victim {
  text-align:justify;
  padding:5px;
  margin:15px auto;
  width:50%;
  background-color: yellow;
  color: black;
  transition-duration: 2s;
  transform: rotate(3deg);
  -moz-transition-duration: 2s;
  -moz-transform: rotate(3deg);
  -webkit-transition-duration: 2s;
  -webkit-transform: rotate(3deg);
  -o-transition-duration: 2s;
  -o-transform: rotate(3deg);
}
#victim:hover {
  background-color: red;
  color: white;
  transform:  rotate(350deg) scale(1.4) rotate(-6deg);
  -moz-transform:  rotate(350deg) scale(1.4) rotate(-6deg);
  -webkit-transform:  rotate(350deg) scale(1.4) rotate(-6deg);
  -o-transform:  rotate(350deg) scale(1.4) rotate(-6deg);
}

Temps de démarrage amélioré

C’est ce que nous indique Mozilla mais personnellement ce n’est pas ce que j’ai constaté.

Interface

Je suis sous Linux (Ubuntu et Debian, les deux ça fait beaucoup oui je sais) et je ne peux donc pas vous le confirmer. Windowsiens, vous pouvez toujours essayer !

Ch’tite vidéo à destination des développeurs Web, in english of course…

Liens

Bon ben, bon test !

WebPetit