Internet Explorer 10 Platform Preview 2 : quelles sont les nouveautés ?

Jeudi a été annoncé la disponibilité de la seconde Platform Preview d’Internet Explorer 10 sur le site Internet Explorer 10 Test Drive.

Rappel : le concept de Platform Preview est arrivé avec les premières versions d’IE9 divulguées lors de la Microsoft Professional Developper Conference 2009. L’idée est de proposer pour les développeurs Web une préversion du (des) moteur(s) présents dans la prochaine version d’Internet Explorer. Une Platform Preview n’est pas une beta dans le sens où aucune interface utilisateur (barre d’adresse, boutons…) ou mécanismes de sécurité (Filtre Smartscreen, Application reputation…) ne sont disponibles. Donc je me répète : une Plateform Preview est réservée aux testeurs et développeurs Web

Alors quelle sont les nouveautés de cette nouvelle Platform Preview d’IE 10 ?

Comme toute bonne Platform Preview, cette nouvelle version intègre le support de nouveaux éléments d’HTML5 et technologies associées :

Nouvelles spécifications HTML5 supportées :

• Asynchronus Script Execution
  • L’attribut async dans HTML5 permet d’améliorer le chargement des pages (dont le chargement peut être bloqué tant que des scripts ne sont pas exécutés)
  • Démo : http://ie.microsoft.com/testdrive/Performance/AsyncScripts/Default.html

• Drag and Drop
  • Spécification W3C : http://www.w3.org/TR/html5/dnd.html
  • Cette Preview d’Internet Explorer 10 ajoute le support de l’attribut draggable à tout élément et le support en drag and drop d’un ou plusieurs fichiers depuis le bureau vers une page Web
  • Informations complémentaires : http://msdn.microsoft.com/en-us/ie/hh272905#_HTML5DragDrop
• File API  
  • Spécification W3C : http://www.w3.org/TR/FileAPI/
  • Cette API permet de gérer des objets de type fichier dans les applications Web
  • Démo : http://ie.microsoft.com/testdrive/Graphics/MagneticPoetry/Default.html

• Forms Validation
  • Spécification particulièrement intéressante : les Forms validation permettent de valider le contenu ou le type d’un champs dans un formulaire (ex: le type date, code postal…).
  • Démo : http://ie.microsoft.com/testdrive/HTML5/Forms/Default.html

• HTML5 Sandbox
  • L’attribut sandbox ajoute des restrictions de sécurité pour les élements iFrame contenant du contenu qui n’est pas reconnu (trusted)
  • Spécification W3C : http://www.w3.org/TR/html5/the-iframe-element.html
  • Plus d’informations : http://msdn.microsoft.com/en-us/ie/hh272905#_HTML5Sandbox
  • Démo : http://ie.microsoft.com/testdrive/HTML5/sandbox/Default.html
• Web Workers 
  • Spécification du W3C : http://dev.w3.org/html5/workers/
  • Ces API permettent d’éxécuter des scripts en arrière plan. Cela permet de parallélliser l’exécution sur plusieurs threads indépendants de l’UI
  • Plus d’informations : http://msdn.microsoft.com/en-us/ie/hh272905#_HTML5WebWorker
  • Démo : http://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/Default.html

Nouvelles spécifications CSS3 supportées :

• CSS3 Flexible Box (“Flexbox”) Layout 
  • Spécification W3C :  http://www.w3.org/TR/css3-flexbox/
  • Les flexbox layout permettent de mieux gérer l’espace disponible et les espacements entre différents boites
  • Plus d’informations : http://msdn.microsoft.com/en-us/ie/hh272902#_CSSFlexBox
  • Démo : http://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html

• Positioned floats
  • Spécifications : http://www.interoperabilitybridges.com/css3-floats/
  • Permet de définir des éléments qui peuvent être entourés de texte tout en spécfiant une zone d’espace minimum entre l’élément et le texte. Idéal en combinaison de CSS Grid, CSS Multi-column et CSS FlexBox pour des applications Web destinées à des tailles d’écrans très différentes (du smartphone à la TV)
  • Plus d’informations : http://msdn.microsoft.com/en-us/ie/hh272902#_CSSFloats
  • Démo : http://ie.microsoft.com/testdrive/HTML5/PositionedFloats/Default.html

• CSS3 Gradients (dans toutes les propriétés acceptant des images)
  • Spécifications du W3C : http://www.w3.org/TR/css3-images/
  • Les gradients (dégradés) sont des images où il y a une transition d’une couleur vers une autre. Internet Explorer 10 supporte les dégradés linéaires, circulaires ou elliptiques. Cette propriété est préfixée (-ms)
  • Plus d’informations : http://msdn.microsoft.com/en-us/ie/hh272902#_CSSGradients

• CSS3 Grid Alignment 
  • Spécification : http://www.interoperabilitybridges.com/css3-grid-align/
  • La grille (Grid) permet de diviser l’espace d’une page Web en différente zone don’t le positionnement pourra changer en fonction de la résolution d’écran ou de la taille de la fenêtre du navigateur. Cela permettant donc un usage optimal de l’écran disponible.
  • Plus d’informations : http://msdn.microsoft.com/en-us/ie/hh272902#_CSSGrid
  • Démo : http://ie.microsoft.com/testdrive/HTML5/GridSystem/Default.html
  • Démo2 (que je trouve plus parlante) : http://david.blob.core.windows.net/html5graphics/SimpleCSS3GridDemo.html
• CSS3 Multi-column Layout 
  • Spécification du W3C :  http://www.w3.org/TR/css3-multicol/
  • Cette spécification permet la gestion de contenu par colonne (ex: du texte), très utile pour afficher correctement le contenu sur des écrans / devices de taille différentes
  • Plus d’informations : http://msdn.microsoft.com/en-us/ie/hh272902#_CSSMultiCol
  • Démonstration : http://david.blob.core.windows.net/html5graphics/SimpleCSS3MultiColumn.htm
• Removal of style sheet limits
  • Plus d’informations : http://msdn.microsoft.com/en-us/ie/hh272902#_CSSRemoveLimits

Nouveautés DOM :

• Advanced Hit testing APIs
  • Plus d’informations : http://msdn.microsoft.com/en-us/ie/hh272903#_DOMHitTesting
• CSSOM Floating Point Value support
  • Plus d’informations : http://msdn.microsoft.com/en-us/ie/hh272903#_DOMFP
• Media Query Listeners
  • Plus d’informations : http://msdn.microsoft.com/en-us/ie/hh272903#_DOMMediaQuery 
  • Démo : http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html

Support d’ECMAScript 5 (ES5) :

• The strict variant of ECMAScript (“ES5 strict mode”)
• Suite de tests officielle de l’ECMA : http://test262.ecmascript.org/

API Web Performance : http://msdn.microsoft.com/en-us/ie/hh272906#_Perf

• requestAnimationFrame 
  • Démo : http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/Default.html
• Page Visibility API
  • Démo : http://ie.microsoft.com/testdrive/Performance/PageVisibility/Default.html
• setImmediate API
  • Démo : http://ie.microsoft.com/testdrive/Performance/setImmediateSorting/Default.html

Egalement à tester : une démonstration utilisant l’accélération matérielle (utilisation du GPU) : Fireflies

http://ie.microsoft.com/testdrive/Performance/Fireflies/Default.html –> à tester avec vos navigateurs modernes. Attention ça consomme de la ressource 

Téléchargement d’Internet Explorer 10 Platform Preview 2 : http://ie.microsoft.com/testdrive/Info/Downloads/Default.html

Informations complémentaires :

• Internet Explorer Platform Preview Guide for Developers
  http://msdn.microsoft.com/en-us/ie/gg192966.aspx

- Stanislas Quastana -

Comments

• Anonymous
  July 11, 2011
  Nouveauté,.... mouaip rien te tel que Chrome

• Anonymous
  February 18, 2012
  The comment has been removed

• Anonymous
  February 20, 2012
  J'ai decouvert plein d'infos interessantes et utiles sur ton blog. Un plaisir de lire tes posts. :)

• Anonymous
  June 25, 2012
  Bonjour, et merçi pour ces infos, notamment celle sur la seconde Platform Preview d’Internet Explorer 10. A propos d'IE 10, quelqu'un peut-il me dire, et si le temps me donner le lien vers le site de téléchargement d'IE 10 fonctionnel? D'avance, merçi.Cordialement. Laurent