Jy[B]log

Daniel demande si on aimerait avoir des propriétés d'animations en CSS^[1]. Les développeurs de webkit proposent en effet une spécification pour pouvoir faire des animations en CSS.

Il faut savoir qu'en SVG, nous avons de quoi faire des animations. Une partie de ces balises et attributs proviennent d'ailleurs du langage SMIL, avec quelques trucs en plus.

Alors, pour faire des animations, CSS ou SMIL ?

Avantages de CSS

• ça a l'air plus simple à écrire, c'est moins verbeux.
• on peut utiliser la cascade CSS pour redéfinir des propriétés d'animations. Cette redéfinition peut être utile aussi dans les feuilles de style utilisateurs.
• en théorie, cela fonctionne pour n'importe quel langage XML, puisque CSS n'est pas dédié uniquement à (x)HTML, bien que SMIL 3.0 le permette plus ou moins, mais c'est plus intrusif.

Avantages de SMIL^[2]

• les séquences de transformation et d'animations peuvent être modifiées dynamiquement, de manière plus simple je trouve, puisqu'il suffit d'utiliser les fonctions DOM classiques. Tandis que pour CSS, faut se coltiner le DOM CSS qui n'est pas très pratique je trouve.
• SMIL est beaucoup plus riche et plus précis (en tout cas,par rapport à l'état actuel de la spécification de webkit)
• SMIL est du contenu XML, donc utilisable par autre chose qu'un navigateur graphique. Au niveau accessibilité donc, il apporte des informations, permettant de retranscrire l'animation oralement par exemple (même si ça doit être difficile à écouter :-))

Conclusion

Je pense que les animations CSS ont leur place, surtout pour les petites animations qui sont purement décoratives. Pour les animations qui ont plus de sens, une animation dans un tutoriel par exemple, montrant vraiment quelque chose d'informatif, on préférera SMIL. C'est un peu la même chose entre choisir background-image et l'élément HTML img pour afficher une image.

Donc je dis oui aux animations CSS :-)

Ce week-end, l'implémentation des propriétés de transformations CSS ont été incluses dans la version de développement de Firefox 3.1 (proposé par David Hyatt dans webkit il y a un an, et en partie au CSS working group, il y a 10 ans).

La propriété transform permet d'appliquer des transformations sur un élément : rotation, décalage, zoom, déformation, perspective. Je me suis amusé donc à faire quelques essais.

Je veux placer ce titre verticalement à gauche de la page :

Voici alors les styles appliqués :

 position: absolute;    /* pour sortir l'élement du flux normal */
 top:0; left:0;   /* on le place tout en haut à gauche */

 /* on fait une rotation de -90 degré, suivi d'une translation vers la gauche de 10em 
   10em étant à peu prés la longueur du texte */
 -moz-transform: rotate(-90deg) translate(-10em,0);

/* le centre de rotation se situe en haut à droite de la boite h1 */
 -moz-transform-origin: top right;

Et le résultat :

Imaginons maintenant que je veuille mettre une belle icône "nouveau" sur un article, en travers du titre de cet article. Plutôt que de faire une image comme on doit le faire dans les navigateurs actuels, faisons tout ça en CSS/HTML. Le HTML est le suivant:

 <h2><span>Nouveau ! </span>Lecteur MP3 Syno XZ-789</h2>

Appliquons maintenant le style de transformation :

 -moz-transform: rotate(-20deg);
 -moz-transform-origin: center center;

On obtient ceci :

Habillons le maintenant en utilisant border-image et cette image

 border-width: 15;
 -moz-border-image: url(etoile.png) 15 15 15 15 round round;

Et voici notre super logo :

Vous remarquerez qu'il apparaît de fines lignes blanches en pointillé, je suppose que c'est un bug qui j'espère n'existera plus dans Firefox 3.1 :-)

J'ai essayé rapidement aussi d'avoir des en-tête de colonnes obliques dans un tableau :

Mais ça ne donne pas un résultat vraiment interressant. Déjà la taille des colonnes restent les mêmes, mais aussi les bordures entre cellules ne sont pas prisent en compte...Il faudrait que je triture un peu plus la feuille de style je pense...

• Annonce de l'implémentation sur Mozilla Web-tech
• Brouillon des spécifications par l'équipe de webkit
• CSS3 transform au W3C (pas encore de spécification à ce jour)

Après les améliorations qui viennent d'être apportées sur le moteur Javascript qui fait repasser Gecko 1.9.1 devant Webkit au niveau des performances de l'execution des scripts JS, voici que Neil Deakin (développeur Mozilla de son état), vient de terminer l'implémentation de l'API drag and drop de HTML5.

On peut donc apporter des fonctions de drag'n'drop dans une page web, tout aussi facilement que ce que l'on peut faire avec des bibliothèques comme jQuery. Sauf qu'il n'y a plus besoin de charger des kilos de scripts JS :-)

Bon bah ça y est, plus besoin de recourir à des divs dans tout les sens pour utiliser des images pour décorer les bordures des éléments HTML. Le support du style CSS3 border-image vient d'être intégré dans la version de développement de Firefox 3.1 :-) Voir une présentation de border-image sur css3.info. Comme la spécification au W3C est encore en brouillon, il faut utiliser -moz-border-image.

Firefox rattrape son petit retard sur l'implémentation de styles CSS3 par rapport à d'autres navigateurs :-)

Pendant qu'on en parle, au niveau du test acid3, il en est à 81/100.

PS : un post de John Resig qui explique un peu le fonctionnement

Firefox 3 est sorti, le record de téléchargement en 24 h a été officiellement établi. Mais ce n'est pas pour ça qu'il faut se reposer sur les lauriers. Après tout, la version 3.1 est prévue pour la fin de l'année, avec des choses sympas comme la balise <video> ou le style border-image. D'ailleurs, le trunk était à peine ouvert pour le développement de la 3.1, que pas mal de patchs ont été intégré, comme le support complet des sélecteurs CSS3, le support de text-shadow, des corrections pour le test ACID3 (ils en sont à 80% contre 70% pour Firefox 3), et plein d'autres "bug fix".

Mais ce n'est pas tout, il faut bien s'amuser aussi un peu, et donc certains expérimentent des petites choses. Roc par exemple, vient de faire un patch pour pouvoir utiliser du SVG avec background-image. Mais aussi <canvas> avec background-image.

 background: url(#truc);

où truc est l'id d'un morceau de SVG ou d'un canvas dans le document. Cela permet de faire des petites choses comme ça. Et bien sûr, on peut appliquer les autres styles background : background-position, background-repeat etc..

Pour l'instant, pas sûr que ce soit intégré dans Firefox 3.1. Patience donc :-)

Sur son billet "utiliser les regex avec modération", Jérôme explique que substr est plus rapide qu'utiliser preg_match. Mon commentaire sur son billet n'est apparement pas encore passé^[1], je me permet donc de répondre ici, car sa comparaison est faussée.

  $extractedString = substr( $exampleString, 1, -1 );

n'est absolument pas équivalent à

   preg_match( '#^\[(\w+)\]$#', $exampleString, $matches );

En effet, dans le premier cas, il n'y a aucune vérification que le premier caractère est bien [ et le dernier ], ni que la chaine à l'intérieur des crochets ne contient que des caractères alphanumérique, contrairement à ce qui se passe dans le deuxième cas avec l'expression régulière.

Aussi, pour avoir une comparaison équitable, il faudrait faire dans le premier cas, au moins ceci :

  if(substr($exampleString, 0, 1) =='[' &&  substr($exampleString, -1) == ']')
      $extractedString = substr( $exampleString, 1, -1 );

En conséquence, les résultats des temps d'exécution sont tout autre : le premier cas est de 2 à 5 fois plus long que l'usage de l'expression régulière. Et encore, là, je n'ai pas ajouté de vérification sur le contenu de $extractedString, pour s'assurer qu'il s'agit bien uniquement que de caractères alphanumériques (je vous laisse imaginer le code qu'il faudrait développer sans l'usage d'une expression régulière).

À la limite, l'expression régulière équivalente au premier cas, serait

 preg_match( '#^.(.+).$#', $exampleString, $matches );

Et là, effectivement, preg_match est plus lent, mais c'est ici une mauvaise utilisation de preg_match. Pourquoi utiliser une expression régulière si on ne cherche pas à vérifier la syntaxe du contenu ?

Conclusion : n'hésitez pas à utiliser les expressions régulières ^[2] quand vous voulez extraire des données d'une chaîne et en même temps vérifier l'intégrité du contenu ;-).

Je réagis à certains billets comme celui de nexen qui annoncent que in_array est lent, comme si c'était un scoop.

Franchement, tout développeur ayant un minimum d'experience en programmation (niveau IUT première année, premiers cours en algorithmie), sait que faire une recherche séquencielle dans un ensemble de valeur est plus lent que faire une recherche en passant par un index. Ce n'est pas un scoop. C'est mathématique.

Maintenant on n'utilise pas in_array pour faire la même chose qu'avec des isset. C'est comme si on s'aperçevait sur un circuit que la 2CV est plus lente qu'une formule 1. Bah oui mais la 2CV n'est pas conçu pour aller sur un circuit.

Bref, l'auteur du billet original n'a pas choisi les bonnes fonctions pour coder son truc, et il s'étonne ensuite que c'est lent. Normal quoi.

Conclusion : in_array n'est pas lent. Il fait ce qu'il doit faire. Il n'est lent que si on l'utilise dans des situations inadaptées. point.

Allez ! Hop Hop Hop ! Testeurs de tout poils, courrez télécharger Firefox 3.0RC1 ! Dernière ligne droite pour cette version dont le développement dure depuis plus de deux ans. Pleins de nouveautés, tant pour les utilisateurs, que pour les développeurs.

Si vos extensions favorites ne sont pas à jour, harcelez leurs auteurs !

Firefox 3.0 est une belle avancée. Avec quelques bémols :

• gecko 1.9 ne passe pas le test acid3 (mais l'utilisateur "normal" s'en fout comme de sa première chaussette)
• il y a un bug super génant (au moins sous linux) : le scroll de certains sites est affreusement lent, et il semble que ce soit du à certaines utilisations des bordures en CSS (je n'ai plus le numéro du bug en tête, surtout qu'en fait il y en a plusieurs). Et ce bug m'embête profondement, puisqu'il apparait en particulier quand je vais sur linuxfr.org. Je sens que les trolleurs vont s'en donner à coeur joie sur ce site...

Bon mais cela reste une très très bonne version.

Et ce n'est pas tout : Firefox 3.1 est prévu pour la fin de l'année (oui, si vite), avec, si tout va bien plein de petits trucs sympas (mais à prendre avec des pincettes, rien n'est figé) :

• XmlHttpRequest cross site
• binding JSON-DOM
• encore des améliorations sur les performances
• encore des améliorations sur la barre url
• la balise <video>
• et des améliorations spécifiques pour la version mobile de Firefox !

Et mon petit doigt me dit qu'il y aurait aussi des améliorations dans CSS. Par contre on ne sait pas encore lesquelles seront incluses dans Firefox 3.1. Ce qui est sûr, c'est qu'ils y travaillent en ce moment et il y a des patchs en cours de réalisation, voir presque prêt, dont par exemple :
** les bordures en images
** le text-shadow
** les pseudo-classes :nth-*(), :first-of-type, :only-of-type, :last-of-type...
** @font-face
** media queries CSS3
** ...

Que du bon !

Vous en avez rêvé ? Daniel et David vont l'ont fait : Les variables CSS. Pour l'instant, ce n'est que le brouillon d'un brouillon d'une future recommandation, mais les commentaires sont les bienvenu. Vous pouvez les faire sur le blog de Daniel ou ici, je transmettrai ;-).

En gros, comment ça fonctionnera (en faisant l'hypothèse que la spec ne changera pas trop :-) ) :

@variables {
 CorporateLogoBGColor: #fe8d12;
}

div.logoContainer {
 background-color: var(CorporateLogoBGColor);
}

Les variables sont définies dans un bloc d'une règle @variables. Ici la variable CorporateLogoBGColor est déclarée avec la valeur #fe8d12. Ensuite, pour l'utiliser dans les propriétés de style, on utilise l'instruction var() avec le nom de cette variable.

Alors attention, il s'agit bien d'une variable, et non pas d'une constante, puisque, cerise sur le gâteau, on peut modifier sa valeur via le DOM style. Vouloir modifier la variable CorporateLogoBGColor reviendra à faire ça :

 document.styleSheets[0].cssRules[0].variables.setVariable('CorporateLogoBGColor', '#000');

PS: je vais proposer à Daniel une manière plus simple de modifier une variable, par exemple :

 document.styleSheets[0].setVariable('CorporateLogoBGColor', '#000');