SleT
23/03/2009, 13h03
Tags : navigateurs (http://www.alsacreations.com/search/tag/navigateurs), internet explorer (http://www.alsacreations.com/search/tag/internet_explorer), web (http://www.alsacreations.com/search/tag/web) http://www.alsacreations.com/xmedia/doc/medium/ie8logo.png Internet Explorer 8 (http://www.microsoft.com/windows/Internet-explorer/download-ie.aspx) sort aujourd'hui officiellement en version finale pour Windows XP et Windows Vista. Succédant à la version 7, il est attendu au tournant par de nombreux développeurs et designers qui espèrent un meilleur rendu des pages web. Cette version n'est pas compatible avec Windows 7 beta et remplace les précédentes versions.
http://www.alsacreations.com/xmedia/doc/full/ie8.png
Quelles sont les nouveautés ?
Un moteur de rendu réactualisé pour "mieux" supporter les standards
La navigation privée "sans laisser de traces"
http://www.alsacreations.com/xmedia/doc/full/ie8_inprivatebrowsing.jpg
Les web slices, qui découpent une zone de contenu dans une page et préviennent de sa modification éventuelle
Les suggestions améliorées lors de la recherche
http://www.alsacreations.com/xmedia/doc/full/ie8_searchsuggestion.jpg
Le bloquage des sites malveillants
http://www.alsacreations.com/xmedia/doc/full/ie8_smartscreen.jpg
Les accelerators, sortes de raccourcis vers les services proposés par Microsoft (Live, Maps, Encarta, Mail...) ou des tiers (eBay, Facebook...) selon le contenu de la page
http://www.alsacreations.com/xmedia/doc/full/ie8_accelerators.jpg
Un certain nombre d'extensions disponibles via IEaddons.com (http://ieaddons.com/fr/)
La restauration des onglets après un crash
L'indépendance des onglets : si l'un d'eux plante (malencontreusement), les autres ne devraient pas être affectés
Le tout est présenté en vidéos (http://www.microsoft.com/windows/internet-explorer/beta/videos.aspx?vindex=3) (attention cette page est contaminée par Silverlight). Au niveau du support CSS, le test Acid2 se déroule correctement puisque le but affiché était de supporter totalement CSS 2.1, mais on peut remarquer que dans les dernières versions RC1 le test Acid3 n'est pas concluant (même si, notons-le, ce type de test n'est pas représentatif à 100% de la qualité d'un navigateur). Le point des performances sur lequel communiquent maintenant la plupart des éditeurs de navigateurs est aussi défendu par Microsoft qui revendique la première place, mais il a déjà été mis à mal par la réactivité des concurrents.
http://www.alsacreations.com/xmedia/doc/full/download.png (http://www.microsoft.com/windows/Internet-explorer/)
Quelles sont les nouveautés CSS ?
Il n'y a plus de fonctionnalité Haslayout, les flottants ont été améliorés
La fusion des marges (margin collapsing) est désormais conforme aux spécifications CSS 2.1
Les pseudo-éléments :before et :after permettant d'ajouter du contenu avant et après un élément sont reconnus
La pseudo-classe :focus est reconnue
La pseudo-classe :lang() est reconnue
La prise en compte de toutes les valeurs CSS 2.1 pour list-style-type, background-position, font-weight, white-space, word-spacing, border-collapse, border-style, et empty-cells
Le support de border-spacing
La propriété outline qui permet d'ajouter une bordure sans affecter la taille de l'élément, avec ses dérivés outline-color, outline-style, et outline-width
Le support de quelques propriétés pour le media print, avec page-break-inside (comment un saut de page doit se comporter s'il survient dans la boîte de rendu d'un élément) ; widows, orphans, @page avec les sélecteurs :first, :right, :left ; et les valeurs avoid, left et right pour page-break-before et page-break-after
Les valeurs display:table et display:table-cell, ce qui va modifier de façon significative la façon de concevoir le positionnement.
Le support des data URI pour inclure du contenu directement dans le code (par exemple de petites images)
La fin des Expressions CSS (propriétés dynamiques)
Quelles sont les nouveautés HTML/DOM ?
Le placement des citations <q> entre guillemets
La distinction des propriétés et attributs dans la manipulation du DOM
De nouvelles fonctions telles que hasAttribute, ownerElement, contentDocument
document.getElementById() est désormais sensible à la casse - ce n'était pas le cas dans IE7
Un meilleur support des tags <object data="..."> qui permettent l'inclusion d'images à l'instar de <img src="..."> et une arborescence de ces objets pour une meilleure dégradation en cas de non-support :
<code><object data="..." type="silverlight" >
<object data="..." type="windows media file">
<object data="..." type="image/png">
Décidément, votre navigateur ne supporte aucun de ces formats...
</object>
</object>
<object> Un mode de compatibilité avec IE7 est conservé et activable par l'utilisateur avec la possibilité de mémoriser ces préférences pour des sites spécifiques.
http://www.alsacreations.com/xmedia/doc/full/ie8_compat_view.jpg
http://www.alsacreations.com/xmedia/doc/full/ie8_screenshot_compatsettings.jpg
Un élément meta est utilisable par les développeurs dans la section head pour activer par défaut le mode de rendu (http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx) sur la page visitée, valeur qui peut être vérifiée en JavaScript avec document.documentMode :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> Il est malheureusement possible que cette simple fonction soit exploitée en masse par les administrateurs de sites qui ne voudront pas réactualiser des développements actuellement incompatibles car testés pour IE7.
Qu'est-ce qu'Internet Explorer ne supporte toujours pas ?
Le SVG et Canvas
Les instructions de transparence CSS opacity et les valeurs RGBA
XForms, WebForms, VoiceXML, MathML
CSS 3 (à l'exception de certaines propriétés)
Pour le développement...
Un outil ressemblant très fortement à Firebug est disponible dans le menu Outils > Outils de développement (touche de raccourci : F12).
http://www.alsacreations.com/xmedia/doc/full/ie8_debug_1.png
http://www.alsacreations.com/xmedia/doc/full/ie8_debug_2.png
C'est un vrai bol d'air, avec tout ce qu'il faut pour activer/désactiver des règles CSS, mettre en surbrillance les blocs, désactiver les images, agir sur le DOM, consulter les valeurs des marges et déboguer les scripts.
Screenshots d'installation
http://www.alsacreations.com/xmedia/doc/full/ie8_install1.png
http://www.alsacreations.com/xmedia/doc/full/ie8_install2.png
http://www.alsacreations.com/xmedia/doc/full/ie8_install3.png
http://www.alsacreations.com/xmedia/doc/full/ie8_install4.png
http://www.alsacreations.com/xmedia/doc/full/ie8_install5.png
http://www.alsacreations.com/xmedia/doc/full/ie8_install6.png
http://www.alsacreations.com/xmedia/doc/full/ie8.png
Quelles sont les nouveautés ?
Un moteur de rendu réactualisé pour "mieux" supporter les standards
La navigation privée "sans laisser de traces"
http://www.alsacreations.com/xmedia/doc/full/ie8_inprivatebrowsing.jpg
Les web slices, qui découpent une zone de contenu dans une page et préviennent de sa modification éventuelle
Les suggestions améliorées lors de la recherche
http://www.alsacreations.com/xmedia/doc/full/ie8_searchsuggestion.jpg
Le bloquage des sites malveillants
http://www.alsacreations.com/xmedia/doc/full/ie8_smartscreen.jpg
Les accelerators, sortes de raccourcis vers les services proposés par Microsoft (Live, Maps, Encarta, Mail...) ou des tiers (eBay, Facebook...) selon le contenu de la page
http://www.alsacreations.com/xmedia/doc/full/ie8_accelerators.jpg
Un certain nombre d'extensions disponibles via IEaddons.com (http://ieaddons.com/fr/)
La restauration des onglets après un crash
L'indépendance des onglets : si l'un d'eux plante (malencontreusement), les autres ne devraient pas être affectés
Le tout est présenté en vidéos (http://www.microsoft.com/windows/internet-explorer/beta/videos.aspx?vindex=3) (attention cette page est contaminée par Silverlight). Au niveau du support CSS, le test Acid2 se déroule correctement puisque le but affiché était de supporter totalement CSS 2.1, mais on peut remarquer que dans les dernières versions RC1 le test Acid3 n'est pas concluant (même si, notons-le, ce type de test n'est pas représentatif à 100% de la qualité d'un navigateur). Le point des performances sur lequel communiquent maintenant la plupart des éditeurs de navigateurs est aussi défendu par Microsoft qui revendique la première place, mais il a déjà été mis à mal par la réactivité des concurrents.
http://www.alsacreations.com/xmedia/doc/full/download.png (http://www.microsoft.com/windows/Internet-explorer/)
Quelles sont les nouveautés CSS ?
Il n'y a plus de fonctionnalité Haslayout, les flottants ont été améliorés
La fusion des marges (margin collapsing) est désormais conforme aux spécifications CSS 2.1
Les pseudo-éléments :before et :after permettant d'ajouter du contenu avant et après un élément sont reconnus
La pseudo-classe :focus est reconnue
La pseudo-classe :lang() est reconnue
La prise en compte de toutes les valeurs CSS 2.1 pour list-style-type, background-position, font-weight, white-space, word-spacing, border-collapse, border-style, et empty-cells
Le support de border-spacing
La propriété outline qui permet d'ajouter une bordure sans affecter la taille de l'élément, avec ses dérivés outline-color, outline-style, et outline-width
Le support de quelques propriétés pour le media print, avec page-break-inside (comment un saut de page doit se comporter s'il survient dans la boîte de rendu d'un élément) ; widows, orphans, @page avec les sélecteurs :first, :right, :left ; et les valeurs avoid, left et right pour page-break-before et page-break-after
Les valeurs display:table et display:table-cell, ce qui va modifier de façon significative la façon de concevoir le positionnement.
Le support des data URI pour inclure du contenu directement dans le code (par exemple de petites images)
La fin des Expressions CSS (propriétés dynamiques)
Quelles sont les nouveautés HTML/DOM ?
Le placement des citations <q> entre guillemets
La distinction des propriétés et attributs dans la manipulation du DOM
De nouvelles fonctions telles que hasAttribute, ownerElement, contentDocument
document.getElementById() est désormais sensible à la casse - ce n'était pas le cas dans IE7
Un meilleur support des tags <object data="..."> qui permettent l'inclusion d'images à l'instar de <img src="..."> et une arborescence de ces objets pour une meilleure dégradation en cas de non-support :
<code><object data="..." type="silverlight" >
<object data="..." type="windows media file">
<object data="..." type="image/png">
Décidément, votre navigateur ne supporte aucun de ces formats...
</object>
</object>
<object> Un mode de compatibilité avec IE7 est conservé et activable par l'utilisateur avec la possibilité de mémoriser ces préférences pour des sites spécifiques.
http://www.alsacreations.com/xmedia/doc/full/ie8_compat_view.jpg
http://www.alsacreations.com/xmedia/doc/full/ie8_screenshot_compatsettings.jpg
Un élément meta est utilisable par les développeurs dans la section head pour activer par défaut le mode de rendu (http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx) sur la page visitée, valeur qui peut être vérifiée en JavaScript avec document.documentMode :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> Il est malheureusement possible que cette simple fonction soit exploitée en masse par les administrateurs de sites qui ne voudront pas réactualiser des développements actuellement incompatibles car testés pour IE7.
Qu'est-ce qu'Internet Explorer ne supporte toujours pas ?
Le SVG et Canvas
Les instructions de transparence CSS opacity et les valeurs RGBA
XForms, WebForms, VoiceXML, MathML
CSS 3 (à l'exception de certaines propriétés)
Pour le développement...
Un outil ressemblant très fortement à Firebug est disponible dans le menu Outils > Outils de développement (touche de raccourci : F12).
http://www.alsacreations.com/xmedia/doc/full/ie8_debug_1.png
http://www.alsacreations.com/xmedia/doc/full/ie8_debug_2.png
C'est un vrai bol d'air, avec tout ce qu'il faut pour activer/désactiver des règles CSS, mettre en surbrillance les blocs, désactiver les images, agir sur le DOM, consulter les valeurs des marges et déboguer les scripts.
Screenshots d'installation
http://www.alsacreations.com/xmedia/doc/full/ie8_install1.png
http://www.alsacreations.com/xmedia/doc/full/ie8_install2.png
http://www.alsacreations.com/xmedia/doc/full/ie8_install3.png
http://www.alsacreations.com/xmedia/doc/full/ie8_install4.png
http://www.alsacreations.com/xmedia/doc/full/ie8_install5.png
http://www.alsacreations.com/xmedia/doc/full/ie8_install6.png