Clearideaz » ie

Internet Explorer 9 sur la bonne voie

Olivier G. — Thu, 24 Jun 2010 04:31:18 +0000

Des débuts (très) difficiles

Internet Explorer a (très) souvent été la cible de critiques passionnées. En cause, son moteur de rendu (Trident) non conforme aux standards du web définis par le W3C et ses nombreux bugs.
La version 6 s’imposait de nombreuses années au sein du système Windows XP.

Microsoft décide de publier la version 7 de son navigateur qui sera en série sur le tout nouveau système, Windows Vista. Les améliorations sont nombreuses mais la firme Redmond persiste dans sa volonté d’imposer ses « standards ». Il intègre toutefois de nouveaux pseudo-sélecteurs CSS (IE6 ne supportant que les pseudo-sélecteurs affectés aux liens) et supporte enfin le format PNG alpha.
Problème, la plupart des utilisateurs de Windows XP ne migrent pas vers Vista, le système ayant une mauvaise réputation en terme de stabilité et d’ergonomie. Le passage vers IE7 prendra beaucoup de temps et encore aujourd’hui, IE6 dispose d’une part importante dans le pourcentage des navigateurs utilisés. Cette lente migration s’explique également par le fait qu’Internet Explorer 6 ne dispose d’aucun système de mise à jour automatique (à contrario de Firefox par exemple).

Un semblant de renouveau

IE8 succède à la version 7. Les effets d’annonce de cette version n’attenueront pas les critiques de la communauté web. Microsoft fait encore une fois cavalier seul. Son navigateur, en dépit de quelques améliorations ergonomiques, ne parvient pas à séduire le public de connaisseurs.
Ce navigateur met en place un nouveau principe : la définition du mode de rendu. Il est possible en effet de choisir entre le mode de rendu IE7 et celui d’IE8 via une balise meta. Ce principe va à l’encontre du concept d’amélioration progressive. On ne devrait pas choisir de développer pour un ancien navigateur.
Autre problème, le support du PNG pourtant bien géré sur IE7 est défaillant sur cette version.

Une lueur d’espoir

Intervient le projet IE9 mené par une équipe renouvelée et des consultants plus jeunes ! À l’heure où je publie cet article, cette version est encore à l’état de développement.
Première nouveauté : Microsoft communique largement sur le projet et encourage fortement la communauté à effectuer des retours.
Seconde nouveauté : IE9 se veut respectueux des standards du web. Microsoft se retrouve désormais contributeur actif du W3C. Ils insistent sur l’obligation de rendu unique sur l’ensemble des navigateurs.
Troisième et dernière nouveauté : L’équipe d’IE9 a fait beaucoup d’efforts pour améliorer les performances de son navigateur. Il dispose aujourd’hui d’un des plus puissants moteur Javascript (en comparaison avec les moteurs en version définitive et publiés avec des navigateurs stable, hein !).

Mais ce qui est surtout le plus excitant, c’est le support de nouvelles technologies web. La liste est longue : support de CSS3 (on peut enfin utiliser border-radius, ouais !), moteur de rendu capable d’interpréter HTML5 ainsi que son API (balise video, audio, geolocalisation, webworkers…), implémentation de font-face, mise en conformité de l’interpréteur javascript avec les standards, support de SVG…
Et dernièrement, le blog du navigateur Microsoft a annoncé le support de canvas ainsi que la prise en charge du format libre WOFF, on y croyait vraiment plus !

Chose étonnante, le futur navigateur suscite l’enthousiasme des professionnels (Andy Clarke, Zeldman ou encore Jason Cube de Six Revision).

Et finalement…

C’est donc une grande avancée et on s’imagine déjà développer des sites internet sans avoir à le tester sur 36 navigateurs ! Mais malgré tout, ne fantasmons pas trop vite, le chemin sera encore long et il faudra je pense attendre encore 10 ans avant de pouvoir utiliser pleinement les nouvelles possibilités offertes par HTML5 et CSS3.

Edité le 25 juin 2010 à 9 h 33 min : Ajout d’une petite phrase au sujet de l’intérêt suscité par le navigateur auprès de professionnels

Un semblant de renouveau

Une lueur d’espoir

Chose étonnante, le futur navigateur suscite l’enthousiasme des professionnels (Andy Clarke, Zeldman ou encore Jason Cube de Six Revision).

Et finalement…

Edité le 25 juin 2010 à 9 h 33 min : Ajout d’une petite phrase au sujet de l’intérêt suscité par le navigateur auprès de professionnels

Un semblant de renouveau

Une lueur d’espoir

Chose étonnante, le futur navigateur suscite l’enthousiasme des professionnels (Andy Clarke, Zeldman ou encore Jason Cube de Six Revision).

Et finalement…

Edité le 25 juin 2010 à 9 h 33 min : Ajout d’une petite phrase au sujet de l’intérêt suscité par le navigateur auprès de professionnels

Les hacks c’est pas bien !

Olivier G. — Thu, 24 Apr 2008 13:35:00 +0000

La tentation de recourir à des hacks est grande lorsque l’on commence à se lancer dans l’intégration d’un site web. Lorsque l’on s’aperçoit que la page développée s’affiche différemment d’un navigateur à l’autre, on se dit très souvent que c’est le navigateur (Internet Explorer pour ne pas le citer) qui interprète le code ou la feuille de style n’importe comment.

Cette réaction est plus ou moins justifiée. Nous sommes tous conscients des lacunes du navigateur Microsoft et plus particulièrement des versions antérieures à la 7. Toutefois, ce n’est pas une raison pour charger sa feuille de style de propriétés invalides en prenant comme bouc émissaire le navigateur de Monsieur Redmond.

Une feuille de style doit, au même titre que le document XHTML, passer l’épreuve du validateur W3C. Ce n’est pas en insérant des « _width: » ou encore de « %margin: » dans votre CSS que vous pourrez vous vantez de faire un site au codage propre. J’irais même jusqu’à dire que les hacks sont bons pour les fainéants la plupart du temps.

Dernièrement, j’avais fais remarquer à un intégrateur remonté contre IE que notre boulot perdrait de l’intérêt sans ces soucis de compatibilité. Même si j’affirmais cela ironiquement, je trouve passionnant de découvrir pourquoi telle propriété ne fonctionne pas de la même manière d’un navigateur à l’autre et surtout, comment y remédier.

Les hacks que l’on pourrait éviter

Les images PNG

Prenons l’exemple du PNG. Beaucoup de webmasters s’extasient devant les possibilités de ce format d’image. L’utilisation des différentes couches alpha de transparence offre effectivement de nombreuses possibilités. Seulement voilà, ce format n’est pas pris en charge par les anciennes versions d’IE. Le hacker en herbe viendra me faire remarquer que l’on peut remédier à ce problème en utilisant la propriété CSS DX.Transform dans la feuille CSS ou dans un fichier .htc. Cette utilisation pose plusieurs soucis :

La feuille de style n’est pas valide W3C.
La feuille CSS n’est pas censée intégrer ce genre de propriétés ou faire appel à des fichiers chargeant du JavaScript.
Ce hack fait appel au moteur Direct X et selon la version, une simple image peut faire bugger le système d’exploitation, ce qui est, vous en conviendrez, un peu gênant…

Si vous souhaitez vraiment utilisez le PNG sur Internet Explorer, appelez plutôt un fichier JavaScript pur pour arriver à vos fins.

Parfois, un simple découpage de l’illustration au format GIF ou même une image JPEG placée intelligemment peut offrir au visiteur le même effet. Le PNG n’est pas une fin en soit.

Les pseudo-classes

Concernant les pseudo-classes, évitez également de passer par un fichier .htc dans votre feuille de style pour intégrer le :hover sur une balise div ou un :target sur une tout autre balise. Encore une fois, si cette utilisation est requise, passez par de pures fonctions JavaScripts.

Un problème de taille !

Arrêtons de nous prendre le chou avec les débats philosophiques sur le model box ou autre double-margin. Ces problèmes peuvent être aisément contournés. De plus, vous le verrez par vous même, quand on commence avec des hacks de placement ou d’ajustement de dimension, on en finit plus. Les hacks attirent les hacks

Comme vous pourrez le constater sur l’exemple suivant, les soucis de padding ou de margin peuvent parfois être causés par une simple propriété qui n’a pas lieu d’être. Pour être certain de contrôler pleinement votre mise en page, efforcez-vous de tester plusieurs méthodes de positionnement sans passer par les hacks et testez le résultat sur différents navigateurs. Il y aura toujours une méthode qui fasse plaisir à tout le monde

Pour résumer

Avant de se décider à utiliser un hack, il faut d’abord se questionner sur les autres alternatives valables. Dénigrer IE sans chercher plus loin n’amènera rien de bon. N’intégrez pas de fonctions JavaScripts dans votre feuille de style par le biais de fichiers .htc mais préférez un fichier JavaScript pur. N’abusez pas du format PNG et ne l’utilisez qu’en dernier recours. Privilégiez l’utilisation de « !important » aux notations bidons telles que « _width: » ou encore « %padding: ». Les hacks CSS c’est taboo, on en viendra tous à bout.

Quelques précisions s’imposent

Au regard de cet article, on peut se demander ce qui est à ranger dans la catégorie des hacks ou non. Si je voulais résumer, j’engloberais les éléments qui ne valident pas la feuille CSS mais voici une petite liste détaillées :

Dans un premier temps, j’inclus l’ensemble des propriétés mal orthographiées : « _width: », « %padding: » par exemple.
Les inclusions de fichiers .htc pour faire appel à du javascript par exemple.
Les propriétés CSS non reconnues par le W3C tel que « opacity ».
Les propriétés en double pour une même classe ou ID (deux propriétés de taille pour un même bloc).
Les appels à Direct X dans la feuille de style.

Et voici ce que je ne considère pas comme des hacks :

Les sélecteurs non reconnus par tous les navigateurs mais valides W3C tel que « div > p » (logique non?).
Les propriétés non reconnues par tous les navigateurs mais valides W3C. « min-height » en est un exemple.
Les feuilles de style appelées par des commentaires conditionnels (même si on s’en passerait bien…)

Dean Edwards a refait des siennes

Olivier G. — Tue, 15 Jan 2008 09:00:00 +0000

Actuellement très occupé sur divers projets web, je n’ai pas eu beaucoup de temps à accorder à mon blog. Je voulais juste vous signaler que Dean Edwards venait de publier une nouvelle classe javascript permettant de pallier les faiblesses de IE 6 mais également de IE 7. Elle ne pèse que 38 Ko et n’utilise aucun module complémentaire. En réalité, il a implémenté les nouvelles possibilités que devrait offrir IE 8, le navigateur qui intégrera (théoriquement) CSS 3.

Je précise que cette classe js est en cours développement et qu’elle contient encore quelques bugs. Pour l’avoir déjà utilisé, je peux déjà vous en citer quelques uns :

Difficulté à gérer les classes pouvant posséder plusieurs propriétés (ex : #accueil .conteneur {}, #article .conteneur {})
Certaines propriétés telle que la pseudo-classe :first-child ne fonctionnent pas si on utilise une feuille de style externe

La classe est à télécharger sur la page de Projet Google de Dean Edwards

Améliorer Internet Explorer (toutes versions)

Olivier G. — Fri, 14 Dec 2007 09:02:00 +0000

Dean Edwards est un génie. Internet Explorer a toujours été réputé pour être un navigateur très en retard sur les autres. Un grand nombre de sélecteurs et de propriétés CSS ne fonctionnent tout simplement pas sous les versions inférieures à IE7. C’est là que Dean Edwards entre en jeu. Ce programmeur a conçu une véritable librairie permettant d’émuler par le biais de fonctions javascript, les fonctionnalités CSS 2 absentes de IE. A l’origine, son objectif était de contrer la pratique des hacks CSS qui rendent les feuilles de style invalides. Mais il ne s’est pas arrêté là en implémentant certains sélecteur CSS 3 dans le navigateur certifié Windaube. La dernière version sortie date de août 2005 donc je n’apporte pas une nouveauté, mais ce genre de trésor peut en intéresser un très grand nombre

Vous pouvez télécharger l’ensemble des fichiers sur son site internet personnel.