Ok vous vous accrochez à votre vieille deudeuche avec ces sièges en toile tendue, ses vitres à rabat manuel, son toit qui ne supporte pas les intempéries, etc.. mais, vous sentez vous en sécurité ? N’avez-vous pas envie d’arriver plus vite à bon port et surtout avec plus de confort ?

Bon j’arrête là l’analogie, parce que contrairement à votre vieille voiture, on vous échange votre vieille version d’internet explorer contre la toute dernière version de n’importe quel navigateur, au choix : Firefox, Opéra, Safari, Chrome ou même Internet Explorer : les arguments sont plutôt convaincant, jugez plutôt :

• Sécurité accrue,
• vitesse d’affichage plus rapide,
• meilleure prise en compte des standards du web,
• navigation par onglets,
• modules complémentaires,
• personnalisation,
• blocage des fenêtres popup,
• etc. La liste est longue.

Vous pouvez également rejoindre la « IE6 Death March » où des sites aussi célèbres que Facebook ont carrément laissé tomber le suivi d’IE6. Bon sans aller jusque là on peut peut-être accompagner ce vieux monsieur vers une fin progressive en offrant une version dégradée mais fonctionnelle de son site pour IE6.

Et là c’est une nouvelle façon de coder qui s’ouvre à nous, voyons ce que nous allons pouvoir faire, limite ça donne le tournis :

1. Utiliser enfin toutes les possibilités de CSS 2, comme : 

   – le sélecteur d’enfant direct (>)

   Ce fameux sélecteur, qui était utilisé comme hack IE6 pourra enfin être utilisé dans sa fonctionnalité première, c’est à dire que si nous avons par exemple le code : div > p {color:red} les paragraphes qui sont des enfants directs du conteneur div seront en rouge alors que les autres resteront dans leur couleur par défaut.

   – le sélecteur d’élément adjacent direct (+)

   Dans h1 + p{font-style:italic} chaque paragraphe précédé d’un titre de niveau 1 est en italique, les autres paragraphe conservent le style par défaut ou le style défini dans la css.

   – le sélecteur d’attributs [attr]

   C’est de loin un des sélecteurs les plus intéressants puisqu’on peut styler les balises en fonction de leurs attributs.

   Exemple avec les liens :
   a[rel=external]{padding-right:15px;background:url(http://fr.wikipedia.org/skins-1.5/monobook/external.png) 100% 50% no-repeat;}
   Les liens s’ouvrant dans une nouvelle fenêtre auront un style particulier : un petite icône sur leur droite
   Les formulaires :
   input[type="text"]{border:1px solid #666;}
   Les input de type texte auront une bordure grise.
   Je vous laisse trouver toutes les applications que vous pourrez faire avec ce procédé…

   – les classes multiples

   Ok vous pourrez me dire que vous les utilisez déjà et qu’il y a un moyen de détourner les limitations d’IE6. Il n’empêche que sans IE6, vous seriez plus à l’aise pour organiser vos styles.
   Je vous invite à relire le billet de Pierre du25/01/2008 à ce sujet pour vous en convaincre

   – les pseudos-selecteurs :before, :after, :focus et :first-child,

   :before et :after pour générer du contenu en css et pouvoir gérer des éléments flottants sans ajouter de code html, :focus permettra de rendre les formulaires plus conviviaux sans avoir à recourir à du JS et :first-child pour éviter de mettre des classes first un peu partout sur les premiers éléments d’une navigation par exemple.

   – le pseudo sélecteur :hover sur d’autres éléments que le lien

   Pas indispensable mais quand même pratique pour certains menus déroulants. Fini l’utilisation du JS.

   –  min/max width/height,

   Fixer une hauteur/largeur minimale/maximale serait bien pratique non ? Sans avoir recours à des hacks.

2. Commencer à utiliser CSS3

   – le sélecteur d’élément adjacent indirect (~)

   Dans h1 ~ p{font-weight:bold} tous les paragraphes précédés d’un titre de niveau 1 sont en gras contrairement au sélecteur d’élément adjacent direct où uniquement le premier paragraphe est affecté par le style défini.

   – le sélecteur avancé d’attribut [ attr*]

   Même chose que le sélecteur d’attribut mais sur des portions des valeurs définies dans les attributs.

   La question philosophique qui se pose dans l’effervescence, voire l’urgence actuelle des intégrateurs et développeurs à vouloir se débarrasser d’Internet Explorer 6 est : devons-nous faire en sorte que, pour qu’il soit accessible, le web soit consultable par tous les navigateurs encore en activité sur les postes des internautes ou amener progressivement les retardataires à s’équiper des dernières versions et dans ce cas, faut-il intrusivement suggérer à l’utilisateur comme le fait le script de « Save the developpers » de changer son moyen de naviguer sur la toile ?

Pour cela, il existe plusieurs solutions.

Eviter les embrouilles

Avec la pratique, un certain nombre de réflexes se mettent en place, et on anticipe immédiatement les problèmes.
Un float:left, avec une marge sur sa gauche ? Un display:inline placé dans la même déclaration permet d’éviter le bug de la double marge. Tous les navigateurs ignorent ce display:inline, car la propriété float est prioritaire. C’est toujours ça de pris.

Malheureusement ça ne suffit pas toujours, et il n’y a parfois d’autre solution que de déclarer une propriété spécialement pour IE.

Le bon vieux hack

Allons-y joyeusement, il faut résoudre un bug sur IE6, et les hacks semblent pratiques et simples à utiliser.
Allez, au hasard… Le sélecteur d’enfant : html > body

IE6 ne comprend pas le sélecteur « > ». Il donc est possible de profiter de ce bug pour cibler IE6, de cette façon :

.my_element{margin-left:5px;} /* Cette déclaration est interprétée par tous les navigateurs */
html > body .my_element{margin-left:8px;} /* ... Puis est écrasée par la suivante, sauf pour IE6 qui ne comprendra pas cette déclaration. */

C’est pratique. Seulement IE7 ne corrige pas le bug pour lequel nous devions corriger la propriété margin. Pour le sélecteur d’enfants, pas de problème, IE7 l’interprète. Logiquement, le bug réapparaît.

En suivant la même méthode, il faut donc trouver un nouveau bug de sélecteur dans IE7, et revoir la CSS. Il arrive également que IE7 ne doive pas recevoir la même correction. Il faut donc trouver un bug qui s’applique à IE7 mais pas à IE6.
Et comment être sûr de ne cibler qu’IE6 ? Un autre navigateur ne prenant pas en charge ce sélecteur pourrait exister.

Il nous faut une autre solution, permettant de cibler efficacement Internet Explorer.

Les commentaires conditionnels

Microsoft a ajouté quelque chose de formidable à Internet Explorer : les commentaires conditionnels.

Ils permettent de ne servir un contenu qu’à Internet Explorer en général, ou à une de ses versions, en utilisant une syntaxe particulière à l’intérieur de commentaires HTML.

Ils n’ont certainement pas être prévus pour ça au départ, mais ils sont aujourd’hui principalement utilisés pour corriger les bugs de ce navigateur.

Il est donc possible d’utiliser le code suivant :

<!--[if IE 6]> <link rel="stylesheet" href="styles/internet-explorer-6.css" type="text/css" media="screen" /> <![endif]-->

Pour un navigateur suivant la spécification HTML4.01, la balise <link> est simplement ignorée car elle est placée dans un commentaire, mais pas pour Internet Explorer. Il va lire ce commentaire, et si une condition est déclarée, et qu’elle correspond au navigateur utilisé, le code sera tout de même interprété.

Cette solution est fiable, car il n’existe aucune raison pour qu’un autre navigateur interprète, dans le passé ou l’avenir, un commentaire de ce type.

Il est donc possible de créer une CSS pour IE6, une autre pour IE7 au cas où, et allez, encore une pour les versions d’IE inférieures à 8, histoire de cibler toutes les version passées de ce vieil ami.

Nous voici donc avec notre feuille de style, et une, deux voire trois nouvelles pour Internet Explorer. Si les CSS du site sont réparties sur plusieurs fichiers, il va falloir créer autant de nouveaux ensembles de fichiers « IE », ou les utiliser de manière globale en prenant le risque d’appliquer à certaines pages des styles qui ne leur sont pas destinés.

Avec le temps, cette solution est beaucoup moins pratique : il faut jongler avec plusieurs fichiers, se souvenir que la déclaration de la ligne 310 du fichier « home.css » est corrigée à la ligne 14 du fichier « internet-explorer-6.css », mais aussi à la ligne 8 du fichier « internet-explorer-7.css ».

Il se pourrait aussi qu’un jour cette correction provoque un effet indésirable, placée dans un certain contexte. Il faudrait alors se souvenir que cet élément a été corrigé dans l’autre CSS, et que cette correction peut être la cause du dysfonctionnement.

Mais existe-t-il une méthode fiable et pratique ? P’t’êt’ bien, ouais.

Les commentaires conditionnels, en plus malin

Il s’agit avec cette technique d’utiliser les commentaires conditionnels non pas pour appeler une feuille de style, mais pour entourer la page d’un conteneur qui prendra comme attribut « id » IE6, IE7, IE ou encore NOTIE.

Cet identifiant permettra de cibler précisément une version d’Internet Explorer, dans une CSS « normale ».

Le code se présente sous cette forme :

<body>
<!--[if IE 6]><div id="IE6"><![endif]-->

Et avant la balise de fermeture </body> :

<!--[if IE 6]></div><![endif]-->
</body>

Pour les navigateurs « normaux » et un outil de validation html, il s’agit de commentaires html tout à fait classiques, et sont ignorés.

De cette manière, il est aussi possible d’ajouter le support d’IE, en ajoutant une balise d’ouverture <div id="IE7"> en haut et en modifiant la condition du bas pour cibler IE6 et IE7 à la fois.

Nous pouvons aussi utiliser des conditions de type « n’est pas », ce qui permet de cibler tous les navigateurs sauf IE.

Voici le code modifié :

<body>
<!--[if IE 6]><div id="IE6"><![endif]-->
<!--[if IE 7]><div id="IE7"><![endif]-->
<!--[if (IE) & (!IE 6) & (!IE 7)]><div id="IE"><![endif]--> <!-- Pour les anciennes et prochaines versions d'Internet Explorer (autres que 6 et 7) -->
<!--[if !IE]>--><div id="NOTIE"><!--<![endif]--> <!-- Le commentaire est fermé, puis rouvert -->

<!-- Structure HTML de la page -->

</div> <!-- Une simple fermeture de balise à la fin, car tous les navigateurs sont ciblés. -->
</body>

Il suffit ensuite d’utiliser ces sélecteurs de la même manière qu’un hack, mais plus clairement, plus facilement et surtout de manière fiable :

.mon_element{margin-left:2px;}
#IE .mon_element{margin-left:3px;}
#IE6 .mon_element{margin-left:4px;}
#IE7 .mon_element{margin-left:5px;}
#NOTIE .mon_element{margin-left:6px;}

Evidemment l’exemple est stupide, puisqu’il n’y a aucune raison de cibler tous ces éléments à la fois.

Les avantages sont nombreux :

• C’est fiable : une nouvelle version d’Internet Explorer sera considérée comme « standard » (mais attention à l’utilisation de #NOTIE, qui ne sera vraisemblablement pas reconnue par les futures version d’Internet Explorer)
• Une seule CSS à maintenir
• Le code HTML et CSS reste parfaitement valide
• La déclaration a du sens, il n’est pas utile de commenter ceci : #IE6 .mon_element{margin:-3px;}
• Lors de la sortie d’une nouvelle version d’IE, il suffit de lister les bugs qui n’ont pas été corrigés, et d’ajouter une nouvelle déclaration (IE8) pour ceux-ci.

A vous ensuite de composer avec ces différents exemples pour créer une structure adaptée à vos besoins : l’utilisation des éléments <div id="IE6"> et <div id="IE7"> devraient suffire à la majorité des cas.

En mode quirks, les navigateurs se comportent de la façon suivante, bien que tous les navigateurs ne présentent pas toutes ces caractéristiques :

• Le modèle de boîte est incorrect (différent des spécifications CSS bien que peut-être intuitivement plus naturel). Cela veut dire que les propriétés de largeurs et de hauteurs, donnent les dimensions de l’élément »boîte » dans son intégralité incluant les marges intérieures (padding) et les bordures et non juste le contenu de l’élément. (Demo plus loin dans ce document)
• Les dimensions des éléments inline (par exemple les éléments span par défaut) prennent en compte les propriétés de largeur et de hauteur spécifiées (alors que d’après les spécifications CSS, elles doivent être ignorées).
• Les hauteurs en pourcentage pour les éléments (par exemple
<table style="height: 100%;" border="0"> en HTML ou table { height: 100% } en CSS) sont appliquées en utilisant la taille disponible à titre de référence, même si le bloc conteneur a sa hauteur fixée à auto (valeur par défaut). Dans le mode standard, la hauteur est déterminée par les exigences du contenu, mais la hauteur en pourcentage marche quand le bloc conteneur a une valeur spécifique comme hauteur.
• Overflow provoque l’agrandissement de la boite. Quand le contenu d’un élément ne rentre pas dans les dimensions spécifiées (explicitement ou implicitement), overflow:visible (valeur par défaut) veut dire que le contenu dépasse des dimensions définies de la boîte. En mode quirks, les dimensions changent, ça peut être vu facilement par exemple si la boîte à une couleur d’arrière plan ou une bordure.
• Les marges intérieures (padding) pour les images sont ignorées lorsqu’elles sont définies en CSS pour l’élément img ou l’élément input de type image.
• La marge horizontale par défaut d’une image flottante est de trois pixels (au lieu de zéro). Ce qui veut dire que si l’élément img a les attributs align= »left » ou align= »right » ou se voit appliquer les règles CSS float:left ou float:right, le navigateurs se comporte comme si l’image avait l’attribut hscpace= »3″ (ou que sa marge de gauche ou de droite avait une valeur de 3px). Ceci ne s’applique qu’à IE; dans les autres navigateurs, le mode quirks provoquera cette marge d’un seul côté de l’image et sa largeur sera de 2 pixels au lieu de 3.
• L’alignement vertical d’une image se fait sous certaines conditions sur le bas de la boite conteneur, et non sur la ligne de base du texte. Cela arrive quand l’image est le seul contenu à l’intérieur d’un élément, typiquement une cellule de tableau. Ceci veut dire que par exemple, une image dans une cellule de tableau est par défaut en bas de la cellule en mode quirks (ce qui est souvent ce que veut l’auteur) quand en mode standard il y a quelques pixels d’espacement en dessous de l’image (à moins qu’on indique, par exemple vertical-align:bottom pour l’élément img).
• Centrer un bloc en utilisant par exemple margin: 0 auto ne marche pas.
• Les propriétés de font ne sont pas héritées de l’élément body pour les éléments inclus dans les tableaux. Ceci arrive surtout pour font-size mais peut également se produire pour font face, color et line-height. Par exemple, si vous mettez : body{font-family: arial}, il est possible que la police dans le tableau reste celle du navigateur par défaut.
• Pour la propriété font size dans une cellule de tableau, un pourcentage est interprété comme relatif à la taille de base de la police du navigateur, et pas à la taille de police qui est appliquée à l’élément conteneur (la ligne du tableau) par les CSS.
• Les valeurs de taille de police ne sont pas interprétées correctement, la taille medium est plus grande que la taille de police de base du navigateur et small est de la même taille. De la même manière, toute l’échelle, xx-small, x-small, small, large, x-large, xx-large, est systématiquement mal interprétée : chaque valeur est interprétée une taille plus grande qu’elle ne devrait l’être.
• Les valeurs incorrectes des propriétés sont souvent interprétées comme des devinettes, par exemple margin: 10 pour margin: 10px et color:ffffff pour color:#ffffff. Cette erreur de traitement imposée viole les règles des CSS : une règle utilisant une valeur syntaxiquement incorrecte doit être ignorée.
• La casse des lettres n’est pas prise en compte lors l’interprétation des sélecteurs de classe et d’id en CSS. Ainsi, le sélecteur .foo correspond à un élément ayant la classe class= »foo » ou class= »FOO ». Selon la spécification CSS, la casse des sélecteurs de classe ou d’id doit être prise en compte.
• Les noms incorrects sont acceptés dans les classes et sélecteurs d’id. Plus précisément les noms commençant par un point ou un nombre (par exemple, les sélecteurs .123a et #42) sont acceptés.
• La déclaration white-space: pre est ignorée.
• La position fixed n’est pas supportée : la déclaration position: fixed est traitée comme position: static (dans IE7)
• De nombreux ajouts au support des CSS ( comme la propriété max-width et les sélecteurs d’attribut) dans IE7 ne sont pas utilisables en mode quirks. Ce qui veut dire que beaucoup de caractéristiques css n’étaient pas supportées dans IE6 et le sont dans IE7, mais seulement en mode standard. Voir le blog de Microsoft pour les détails sur les modifications CSS pour IE7.
• Interprétation de soupe de balise. Par exemple, si un document contient le code : <p>text<table>...</table>, Firefox traite l’élément p comment étant le conteneur de l’élément table en mode quirks. Dans le mode standard, l’élément ouvrant de table ferme implicitement l’élément p. La différence peut être vue, quand par exemple on met une bordure sur l’élément p. De même, Firefox, accepte un élément ul à l’intérieur d’un élément font. IE suit des règles fausses dans ce genre de cas, même en mode standard, mais un comportement conforme aux standards peut être obtenu en utilisant du code valide et en utilisant explicitement des balises fermantes comme </p> même quand elles sont facultatives.
• Les espaces blancs entre les éléments peuvent être significatifs. Par exemple, disons que vous ayez une liste de liens. Normalement vous écririez le code avec des sauts de lignes entre les éléments de la liste, les éléments li (ce qui est entre les balises </li > et <li>)
  

  <ul>
  <li><a ...>...</a></li>
  <li><a ...>...</a></li>
  ...
  </ul>

  
  Cependant, si vous indiquez display: block et une bordure pour les liens, vous vous retrouvez avec des écarts verticaux (des lignes vides) entre les éléments. Ceci arrive dans IE7 en mode quirks et toujours dans les versions précédentes d’IE.

• Les formulaires ont une marge (margin-bottom) de 1em dans les navigateurs Mozilla. (Dans IE, il y a cette marge dans les deux modes). Ceci est apparemment destiné à poursuivre la tradition des navigateurs web de laisser autant d’espace sous un formulaire. C’est une question fréquemment posée : comment se débarasser de la ligne vide sous un formulaire.
• Les marges verticales sont supprimées dans certains contextes. Par exemple quand un élément p est le premier élément d’un élément td. Ceci est plus ou moins un comportement habituel dans les navigateurs et est présent dans IE dans les deux modes.
• Les navigateurs Mozilla (comme Firefox et Seamonkey) ont des caractéristiques supplémentaires, documentés dans le fichier quirk.css. Par exemple, la couleur par défaut des bordures de tableau est gris (gray) (comme dans la plupart des autres navigateurs), contrairement à l’utilisation de la couleur de premier plan en mode standard. Dans ces cas, le mode quirks est vraiment juste un mode différent de compatibilité. NB : Les paramètres de ce fichier ne s’appliquent pas à toutes les versions de Mozilla.

La liste n’est probablement pas exhaustive. Elle se réfère principalement à IE7. Les autres navigateurs peuvent avoir un mode quirks qui ne simulent les anciennes versions de IE dans la même mesure.

Démo simple

Les images suivantes montrent une des nombreuses différences entre le mode quirks et le mode standard dans Internet Explorer, à savoir le modèle de boîte. Voici les présentations du code suivant dans les deux modes :

<div style="border: solid 2px #006; width: 8em; padding: 0 2em">stuff</div>

(Mode quirks)

(Mode standard)

Voilà l’élément rendu par votre navigateur actuel, pour une vérification rapide :

L’explication est qu’en mode quirks, la propriété width est comprise (incorrectement) comme étant la largeur totale de la boîte, 8em dans ce cas. En mode standards, elle est comprise comme étant le total des éléments de la boîte, soit 12em (plus la largeur des bordures). La largeur totale inclut les marges intérieures (padding) gauche et droite, chacune d’une valeur de 2em.

Dans Firefox, le modèle de boîte correct est appliqué dans les deux modes. Cependant, on peut simuler le modèle de boîte incorrect utilisé par IE en mode quirks en utilisant la commande CSS/ utiliser le mode « border-box » dans l’extension « Web Developper » (Qui est un outil très utile pour toute les questions relatives aux CSS et beaucoup d’autres choses)

Vérifier le mode

Pour vérifier dans quel mode est un navigateur (quirks contre standards),

Dans Firefox, utiliser la commande Outils/Informations sur la page (et regarder l’onglet général); ou si vous avez l’extension « Web Developer », aller dans information/informations sur la page.

Pour IE, taper javascript:alert(document.compatMode) dans la barre d’adresse, et vérifier si la fenêtre d’alerte renvoit alors CSS1Compat (indiquant qu’il s’agit du mode standard) ou BackCompat (indiquant qu’il s’agit du mode quirks); autre alternative,télécharger et installer le Bokmarklet « Quirks or Standards Mode ».

Habituellement faire cohabiter deux versions d’IE suffit, mais étant donné qu’une partie encore importante des internautes se cramponne au vieux navigateur IE6, il est souhaitable de pouvoir tester ses pages dans les trois dernières version du navigateur.

1ère étape : Installer Internet Explorer 8 version beta.

Pour celà aller sur le billet de Pierre du 6 mars dernier ou encore plus rapide : ici.

Une fois que c’est fait le navigateur installé, vous pouvez passer à l’étape 2.

2ème étape : Installer les précédentes versions d’IE

Il y a une solution que j’avais adopté pour la version précédente (la 7) : multiple IE, le soucis c’est que ça ne fonctionne pas avec Windows Vista. Si vous avez Windows XP, c’est nickel, mais le problème c’est que vous n’aurez pas IE7 puisque multiple IE s’arrête à IE6.

La deuxième solution consiste à installer IE7 en version standalone. Pour les infos : c’est ici ou encore ici.

Une fois avoir installé IE7, on va essayer d’installer multiple IE, mais auparavant on va voir si IE8 et IE7 s’entendent… D’après mes tests, ça marche pas trop mal, mais il ne faut pas être gêné par les messages d’erreurs. J’ai principalement ce message au chargement de la première page dans IE7 :

L'ordinal 14 est introuvable dans la bibliothèque de liaisons dynamiques iertudil.dll

On peut ensuite installer Multiple IE. D’après mes test cette solution n’est pas pleinement fonctionnelle. Je n’ai pas pu accéder au champs de recherche de Google, impossible de prendre le focus…

Si vous n’avez pas XP mais Vista, vous allez forcément opter pour la troisième solution : installer un émulateur de PC pour faire tourner windows… sous windows. Virtual PC est disponible sur le site de Microsoft, mais je n’ai pas réussi à l’installer jusqu’au bout, il est vrai que je dispose de la version light de Vista, la home premium*, donc si vous êtes comme moi, vous allez plutôt vous porter sur mon deuxième choix : Virtual Box. Là pas de problème l’install se passe sans encombre. Il ne reste plus qu’à installer la version native d’IE6 ou IE7 en téléchargement sur le site de Microsoft. Après, à vous de voir : soit installer multiple IE ou IE7 en version standalone, soit opter pour une version différente par PC virtuel…

Vous avouerez que ça fait pas mal de soucis pour un navigateur qu’on n’utilise uniquement pour tester ses pages, non ?

* Host operating system: Windows Vista Business, Windows Vista Enterprise, Windows Vista Ultimate, Windows Server 2003 Standard Edition, Windows Server 2003 Standard x64 Edition, Windows XP Professional, or Windows XP Tablet PC Edition (source site microsoft.com)

Un article sur le blog dédié nous en liste les différentes améliorations :

1. La version définitive apportera un support complet de CSS 2.1.
2. Ils ont contribué à la création de plus de 700 tests en collaboration avec le Groupe de travail CSS du W3C, publiés sous licence BSD. Selon l’équipe, la spécification CSS est bien conçue mais pas suffisante, car ambigüe sur de nombreux points. Une suite de tests devrait permettre aux éditeurs de mieux les interpréter, en s’appuyant sur des tests pouvant être suivis par l’ensemble des éditeurs.
3. De meilleures performances pour les scripts. Il s’agit d’un gros enjeu pour les navigateurs ( Firefox 3 sera lui aussi bien plus rapide, et Safari se présente d’emblée comme [Le] navigateur web […] le plus rapide de la planète. ) : les bibliothèques Javascript permettent aujourd’hui de créer de véritables applications en ligne, bien plus complexes et gourmandes qu’il y a quelques années. Le navigateur est allé bien au-delà de son rôle principal : il est devenu une plate-forme de choix pour de nombreuses applications innovantes.
4. Un début de support d’HTML5.
5. La création prochaine d’outils pour débugger les CSS et le Javascript.
6. Une fonctionnalité appelée « Activities » apparaît. Elle permet de mieux intégrer les différents services web au navigateur, comme sélectionner du texte sur une page et l’envoyer vers son blog, ou rechercher directement une adresse sur un service de cartes en ligne. Voici une excellente occasion d’ajouter un support des microformats, mais en fait non. C’est une bonne opportunité pour Microsoft d’amener plus d’utilisateurs vers ses différents services, bien que des concurrents soient également présents, comme Facebook Yahoo eBay. Non, pas Google.
7. Une autre fonctionnalité a été intégrée, appelée « WebSlices« . Globalement, ça ressemble aux Web Clips de Safari, mais ne nous y laissons pas prendre : ce sont les WebSlices, d’Internet Explorer.

Le test Acid2 ne passe pas tout à fait s’il est effectué sur un autre domaine que www.webstandards.org, pour une raison de sécurité. Ce devrait être réglé dans la prochaine beta.

Vous pourrez le télécharger ici : http://www.microsoft.com/windows/products/winfamily/ie/ie8/default.mspx
Tristan Nitot en parle : http://standblog.org/blog/post/2008/03/05/Internet-Explorer-8-et-les-standards-le-retour

Peu de temps après l’abandon in extremis de solutions permettant d’activer le moteur de rendu « moderne » pour finalement l’activer par défaut (il faudra à l’inverse demander explicitement à passer en « mode compatible »), Microsoft semble plus que jamais impliqué dans une nouvelle guerre des navigateurs, mais du côté des standards cette fois.

Qu’en pensez-vous ?

]]> /2008/03/06/internet-explorer-8-beta-1/feed/ 2 /2008/01/25/internet-explorer-6-id-class-et-background/ /2008/01/25/internet-explorer-6-id-class-et-background/#comments Fri, 25 Jan 2008 14:26:08 +0000 /2008/01/25/internet-explorer-6-id-class-et-background/ Puisque notre vieil ami ne semble pas décidé à céder sa place de leader, nous avons largement le temps de nous intéresser à certains de ses comportements si… particuliers.

Internet Explorer 6 ne comprend pas la sélection de classes multiples en CSS : il ne prend en compte que la dernière classe.

Il est néanmoins possible d’utiliser un ID et une classe combinée sans problème :

.uneclasse.uneautreclasse{
  /* IE6 comprendra : .uneautreclasse{} */
}
#fixe.bonbon{
  /* Pas de problème */
}

Mais, d’après ce que je crois avoir compris :

Si un sélecteur « id+class » est utilisé, et qu’un autre sélecteur « id+class » définit la propriété background d’un élément, alors cette propriétée sera ignorée.

Prenons l’élément suivant :

<div id="fixe" class="bonbon"></div>

En appliquant le code CSS ci-dessous :

#fixe{background:url(image.png) no-repeat 0 0;}
#fixe.bonbon{background-image:url(image_2.png);}

L’image de fond de l’élément sera bien « image_2.png ».

Mais en appliquant le code suivant :

#fixe{background:url(image.png) no-repeat 0 0;}
#fixe.abc{}
#fixe.bonbon{background-image:url(image_2.png);}

Ce n’est plus le fond « image_2.png » qui s’affichera, mais… « image.png » !

#fixe.bonbon arrive après #fixe.abc, il n’est plus pris en compte et le premier background défini est affiché, c’est à dire celui de #fixe.

Il est en revanche tout à fait possible de cibler un élément à l’intérieur :

#fixe div{background:url(image.png) no-repeat 0 0;}
#fixe.abc div{}
#fixe.bonbon div{background-image:url(image_2.png);}

J’ai mis un bon moment à me rendre compte du problème, très particulier et (il me semble) ne portant que sur la propriété background.

Edit : rien à voir avec background, c’est juste le sélecteur qui pose problème, quelles que soient les propriétés appliquées.

On en parle ici également : IE6 Multi-Class Bug

Si vous connaissez ce problème, ou avez des précisions à apporter, ça m’intéresse !

]]> /2008/01/25/internet-explorer-6-id-class-et-background/feed/ 5