Internet Explorer 10 Platform Preview 2 : quelles sont les nouveautés ? - Le blog français d'Internet Explorer - Site Home

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