RPW 24/02/10: tableau support CSS3, perfs manipulation DOM, tuto CSS3 transitions, prefetch DNS

Revue de Presse Web de hier :

• Outils : un tableau de support par browser des propriétés CSS3. Cette développeuse fait un travail assez impressionnant, qui rappelle voire remplace celui que faisait quirksmode. Ce dernier ayant arretté ce genre de tableau comparatif pour se concentrer sur les browser mobiles, il faut donc bien trouver des sources d'information ailleurs. Cela dit, devant la somme de nouvelles informations à avaler, sachant que les IE ne bougeront pas et que les browsers modernes les implémenteront au fur et à mesure, il vaut mieux continuer à développer en progressive enhancement ou rester sur les vieilles techniques CSS2 (la partie supportée par IE6)
• Perfs : un article expliquant le reflow et le repaint des browsers (via @formeolibre) , avec des conseils pratiques pour ne pas tuer les browsers lors des manipulations du DOM (qui sont en général ce qui demandent le plus de ressources, et qui peuvent freezer l'interface) :
  • Manipuler des classes plutôt que des propriétés CSS (impossible dans le cas d'animations)
  • manipuler .cssText plutôt que chaque propriété individuellement (en général les animations sont confiées à une librairie type jQuery ou YUI, il faut donc espérer que c'est ce qu'ils utilisent)
  • sortir du DOM l'élément qu'on manipule : documentFragment (que j'utilise souvent), clone de Node, display:none
  • éviter de demander directement les propriétés d'un node si on le connaît déjà, surtout dans les boucles, car ça oblige le browser à exécuter un repaint pour vous donner la valeur exacte
  • Pour ceux qui veulent aller plus loin, il y a SpeedTracer pour Chrome et DynaTrace pour IE
• CSS3 : tuto pas à pas sur les transitions CSS3. Bon à voir pour l'auto-formation, elles restent tout de même pénibles à implémenter car il faut écrire 4 fois la même propriété avec 3 préfixes différents, tout en sachant que la moitié du marché (les IEs) va ignorer ces effets. Il faut du coup maintenir 2 version différentes et garder cela pour de petits effets visuels d'embellissement (car il ne faut pas que l'interface en dépende).
• Perfs : demander au browser à l'avance de faire des résolutions DNS. Un peu extrême, cette technique s'applique à FF et Chrome (40% du marché) et peut servir à certains sites qui utilisent beaucoup de noms de domaines différents. Ca peut être le cas pour ceux qui stockent les JS/CSS (qui bloquent le rendu de la page tant qu'ils ne sont pas là) des clients Akamaï ou des sites qui utilisent plusieurs noms de domaines pour jouer un maximum sur la parallélisation des téléchargements. (via paul rouget)

Utilisez RSS pour une analyse quotidienne de l'actualité du développement d'applications web OU
Suivez ce compte Twitter pour les liens en quasi temps réel (disponible aussi en RSS)