Discussion :

[Bovino]

Bonjour,

Les principaux navigateurs sortent actuellement leur dernière version. Chacun annonce une amélioration du moteur JavaScript.
Cela implique à la fois de nouvelles fonctionnalités et des comportements potentiellement différents.

Je vous propose donc de lister ici toutes ces différences que vous aurez pu constater en utilisant ou testant le plus récentes versions des navigateurs.

Merci de bien penser en début de post s'il s'agit d'une astuce, d'un comportement inattendu (gestion inhabituelle de propriété par rapport aux précédentes version par exemple) ainsi que le navigateur dont il s'agit.

ATTENTION, il ne s'agit pas ici de lancer des débats pour savoir ce que l'on pense des évolutions des navigateurs ni de les comparer entre eux !
Il faut plutôt voir cette discussion comme une boite à outil permettant de lister tous les points auxquels il faut (faudra) faire attention dans nos futurs développements.

d'avance pour votre participation !

[nod__]

Passionne pas les foules on dirait

querySelector() et querySelectorAll()
Deux nouvelles méthodes pour l'utilisation des selecteurs CSS
(8) (3.5) (10) (4)

Ce qui permet d'utiliser «tous» les selecteurs CSS pour récupérer des élements du DOM. La possibilité de l'utiliser est toute récente et je ne connais pas les problèmes de compatibilité entre les différentes implémentations mais un test plus bas les montre. L'interêt c'est que comparé aux getElement* ça trace, a mort.

Par contre IE8 a déjà décidé de ne pas supporter les pseudo-classes :visited et :link.

querySelector() retourne le premier noeud qui répond au selecteur, querySelectorAll() retourne tous les noeuds concernés.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var premiereAlerte = document.querySelector("div.alerte"); 
var toutesLesAlertes = document.querySelectorAll("div.alerte");

Sur le type de données renvoyés et sur les objets DOM ayant cette méthode c'est la même chose que getElementsByTagName("").

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var liensEtrangers = document.querySelectorAll("a[hreflang]");
var getElementById = document.querySelector("#idFixe"); // aucune idée des performances relative à la méthode traditionnelle.
 
//etc.

Pour voir des exemples de selecteurs, cette page de tests est assez sympa : SlickSpeed ou chez ejohn qui est vraiment très complet.

• Spec de l'API
• Doc msdn
• Doc MDC
• Post pour webkit (c'est tout ce que j'ai trouvé)

J'utilise l'icone de safari pour désigner webkit c'est pas top mais bon…

[Bovino]

Effectivement, il y a encore peu d'interventions

J'espère que cela viendra au fur et à mesure que l'utilisation de ces navigateurs se généralisera !

[SpaceFrog]

Plus que les nouveautés des navigateurs, je suis un peu hors sujet, mais
j'ai lu un article sur une nouvelle balise <video> qui remplacerait <embed> et <object> ça nous simplifierait la vie ...

autre nouveau que je viens de croiser jsTestDriver pour tester votre code js sur tous les navigateurs simultanément ...

[Bovino]

Oui Spaffy, FF 3.5 (au moins) implémente les balises <audio> et <video> prévues dans le HTML 5.
Malheureusement, les formats supportés sont assez limités (wave et ogg).