Cerise sur le gâteau, il est possible de basculer vers les modes d’affichage des anciennes versions IE5, IE7 et IE8. Ce qui devrait permettre de tester ses pages web beaucoup plus rapidement, sous réserve que le IE5 Document Mode affiche bien les pages comme le fait IE6 !

Quelques plantages, mais je dois avouer que la mémoire de mon PC était pleine comme un oeuf lors de mes tests, ceci expliquant (espérons-le) cela…

Comme on peut le voir, ce blog s’affiche correctement dans cette preview d’Internet Explorer 9 : pourvu que ça dure !

css 4 design vu par Internet Explorer Platform Preview. Cliquez pour agrandir l'image.

Les outils pour développeurs de cette preview ne rivaliseront pas avec  Firebug, mais offrent un environnement de débuggage fonctionnel et assez réactif.

Sélection d'un paragraphe à l'intérieur d'un élément de liste avec les outils pour développeurs de IE9

Lire MIX10 : Internet Explorer 9 se dévoile en preview pour plus d’information.

Comment utiliser les hacks CSS ?

Dans l’article Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels, j’utilisais un commentaire conditionnel pour cibler les versions inférieures ou égales à IE7. Toutefois, IE9 est sur les rails et il est temps de le prendre en compte, d’autant plus que Microsoft veut en faire un champion des standards du web en terme de rendu CSS3 et HTML5.

L’idée derrière la feuille de style unique pour IE est de ne pas augmenter inutilement le nombre de requêtes pour charger une CSS pour chaque version d’Internet Explorer. En attendant de voir ce que nous réserve IE9, j’ai décidé de cibler les versions inférieures ou égales à IE8 en espérant que IE9 tienne ses promesses et en attendant de voir s’il va continuer à gérer les commentaires conditionnels (auquel cas nous pourrions cibler les version inférieures à IE9).

Cibler les versions <= à IE8

<!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen,projection" />
<![endif]-->

Note : il existe une forme de commentaires conditionnels qui permet de cibler tous les navigateurs sauf Internet Explorer : <!--[if !IE]> <!--> IE Windows ne lira pas ça <!--> <![endif]-->

Dans cette feuille de style ie.css, si IE6 (et seulement lui) ne se comporte pas comme prévu devant #header { margin-top: 0; }, il suffira d’y ajouter * html #header { margin-top: -5px; } pour régler le problème. Si le problème concerne IE6 et IE7 et que IE8 se comporte de manière standard (c’est à dire que la règle située dans style.css suffit), il faudra utiliser les hacks de la manière suivante :

* html #search .submit { margin-top: -10px; } // IE6
*+html #search .submit { margin-top: -14px; } // IE7

#search .submit { margin-top: -7px; }         //Toutes les versions d'IE
* html #search .submit { margin-top: -10px; } // Surcharge pour IE6 seulement
*+html #search .submit { margin-top: -14px; } // Surcharge pour IE7 seulement

Mettez vos frameworks CSS à jour

Les frameworks CSS proposent souvent une feuille de style spécifique à Internet Explorer. Le plus souvent, le hack utilisé pour cibler IE7 est de la forme html>body qui n’est pas pris en charge par IE6. Or, si l’on cible les versions <= à IE8, ce hack est obsolète puisqu’il est compris par IE8. Pour y remédier, j’utilise *+html qui n’est compris que par IE7.

Ainsi, dans le fichier ie.css de Blueprint, il sera nécessaire de modifier la ligne html>body p code { white-space: normal; } par +html p code { *white-space: normal; } pour éviter que IE8 ne s’emmêle les pinceaux ;)

22 hacks CSS à consommer avec modération

Cette liste de 22 contournements a été compilée par Paul Irish. Elle présente le double intérêt de la quasi-exhausitivité et de distinguer les hacks jouant sur les sélecteurs de ceux qui concernent les attributs.

Hacks sur les sélecteurs

1. IE6 et inférieurs

   * html .test  { color: red }

2. IE7

   *:first-child+html .test { color: red }

3. IE7, Firefox, Safari, Opera

   html>body .test { color: red }

4. IE8, Firefox, Safari, Opera (Tout sauf IE 6,7)

   html>/**/body .test { color: red }

5. Opera 9.27 et inférieurs, Safari 2

   html:first-child .test { color: red }

6. Safari 2 — 3

   html[xmlns*=""] body:last-child .test { color: red }

7. safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:nth-of-type(1) .test { color: red }

8. Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:first-of-type .test { color: red }

9. Safaris 3+, Chrome1+

      @media screen and (-webkit-min-device-pixel-ratio:0) {
               .test  { color: red }
       }

10. iPhone / Webkit mobile

       @media screen and (max-device-width: 480px) {
                .test { color: red }
        }

11. Safari 2 — 3.1

    html[xmlns*=""]:root .test  { color: red }

12. Safari 2 — 3.1, Opera 9.25

    *|html[xmlns*=""] .test { color: red }

13. Tout sauf IE6 — 8

    :root *> .test { color: red  }

14. IE7

    *+html .test { color: red }

15. Uniquement Firefox. 1+

    .test,  x:-moz-any-link  { color: red }

16. Firefox 3.0+

    .test,  x:-moz-any-link, x:default  { color: red }

Hacks sur les attributs

1. IE6

   .test { _color: blue }

2. IE6, IE7

   .test { *color: blue /* or #color: blue */ }

3. Tout sauf IE6

   .test { color/**/: blue }

4. IE6, IE7, IE8

   .test { color: blue\9 }

5. IE7, IE8

   .test { color/*\**/: blue\9 }

6. IE6, IE7 — fonctionne comme !important

   .test { color: blue !ie } /* la chaine après ! peut être n'importe quoi */

Il est bien évident que la question de pose différemment selon que l’on utilise un Mac ou un PC et dans ce dernier cas, c’est encore différent selon que l’on utilise Windows XP, Vista ou Seven. Si vous êtes sous Linux, ma foi, vous devriez être capable de vous en sortir tout(e) seul(e), non ? ^_^v

Installer «Test Drive» (IE9 preview) sur Vista

Note du 16/03/2010 — Microsoft vient de lancer Test Drive pour mettre la version preview d’Internet Explorer 9 en téléchargement. Cette version propose de basculer vers les models de document de IE5, IE7 et IE8 (et bien sûr IE9 par défaut). Ce qui devrait permettre de tester ses pages web beaucoup plus rapidement, sous réserve que le IE5 document mode affiche les pages comme le fait IE6 !

Machine Virtuelle avec Windows XP et IE6

Si comme moi vous utilisez Windows Vista, vous rencontrez peut-être des difficultés pour travailler avec IE6 dans de bonnes conditions. La virtualisation avec Virtual PC ou VirtualBox et l’image disque proposée gratuitement par Microsoft regroupe une version de Windows XP et Internet Explorer 6 et offre un environnement de travail opérationnel.

Une fois l’installation et le paramétrage de la connexion internet de Windows XP effectués, vous pouvez tester votre site sous IE6. Mais c’est très gourmand en ressources et la séance de test se transforme vite en cauchemar à moins d’avoir 4 go de ram et deux écrans (j’ai souvent Photoshop et/ou Illustrator ouverts sans compter les autres logiciels…).

Si votre configuration tient la route, cette solution présente l’avantage de vous permettre de tester votre site avec une vraie version d’IE6, Javascript et commentaires conditionnels en ordre de marche, ce qui n’est pas forcément le cas pour toutes les solutions présentées plus bas.

Quelques conseils pour l’installationde Virtual PC chez xuxu et Comment ça marche.

Logiciels pour tester votre site sous IE

A coté de la virtualisation, il existe des solutions logicielles pour tester son site avec plusieurs navigateurs :

• Si vous êtes sous Windows XP avec IE6, vous pouvez utiliser IE7_standalone pour tester sous IE7. Si vous avez déjà IE7, utilisez Multiple IE pour tester dans IE6 et les versions précédentes. Si vous êtes passé sous Vista, vous pouvez tester IE6 for Vista en version alpha. A noter qu’en désinstallant IE7 sur Windows XP, on retrouve une bonne vieille version d’IE6.
• Dans le même esprit, il existe Internet Explorer Collection qui contient pratiquement toutes les versions d’Internet Explorer : d’IE 1.0 à IE 8.0 ! (Merci à Deloo).
• Si vous utilisez IE8, vous pouvez basculer le moteur de rendu graphique et Javascript dans le mode IE7 ou encore le mode Quirks (IE5) déclenché par IE8 en l’absence de Doctype. Pour cela, rendez-vous dans les outils pour développeurs. Ces outils sont une tentative bienvenue de la part de Microsoft pour offrir des outils de débuggage comme Firebug pour Firefox. Plus d’information sur la prise en charges des CSS, Javascript et documentMode dans IE8.
• IE Tab est une extension Firefox qui utilise le moteur de rendu d’Internet Explorer (IE7 ?) dans un onglet Firefox. C’est surtout utile lorsqu’un site vous annonce qu’il n’est pas compatible avec votre navigateur préféré. Le rendu ressemble vaguement à IE7 mais avec des variantes, notamment en ce qui concerne les comportements Javascript.

IETester

Pas convaincu par les logiciels précédents ? Installez donc IETester qui vous permettra de tester votre site avec la majorité des versions d’Internet Explorer. Toujours en version Alpha, la v0.42 propose des options pour développeurs comme l »activation ou la désactivation du Javascript.

IETester est un peu instable, mais relativement confortable pour des séances courtes.

Tester votre site dans IE5.5, IE6, IE7, IE8 avec IETester. Cliquez pour agrandir l'image.

La communauté autour de IETester semble assez active et vous trouverez de  l’aide sur le forum.

Captures d’écran en ligne

Si les solutions précédentes ne vous conviennent pas, vous pouvez vous tournez vers les services en ligne pour obtenir des captures d’écran sous différentes combinaisons de navigateurs et de systèmes d’exploitation :

• BrowserShots — Pratiquement tous les navigateurs sur la plupart des systèmes d’exploitation,
• BrowsrCamp — Capture d’écran sous Mac OS X,
• Scapture — Capture d’écran sous Linux,
• Netrenderer — de IE5.5 à IE8,
• lynxview — Tester votre site sous Lynx (N’oubliez pas de créer le fichier delorie.htm à la racine de votre site pour que ça fonctionne),
• Browsera — Service payant permettant de tester l’ensemble d’un site (à partir de 29$/mois).
• browsercam — Un autre service payant pour tester sur plus de 400 combinaisons de navigateurs/OS  (à partir de 39.95$/mois pour 3 mois ou 19.95$ pour la journée)

Browser Sandbox

Browser Sandbox est un bac à sable pour navigateurs à mi-chemin entre les solutions logicielles et la virtualisation via une extension pour Firefox ou un plugin (.exe) pour Internet Explorer.

Le résultat s’affiche sous la forme d’une instance du navigateur que vous avez choisi parmi IE8, IE7, IE6, Firefox 3.5, Firefox 3, Firefox 2; Apple Safari 4 et 3, Google Chrome ou encore Opera 9 et 10 pour finir.

A noter qu’à l’instar d’IETester, l’affichage des polices de caractère n’est pas identique au vrai IE6 et bénéficie plutôt du rendu de la version d’Internet Explorer installée sur votre système.

Browser Sandbox fonctionne bien malgré des plantages inopinés qui surviennent de temps à autre.

Affichage du site dans dans Internet Explorer 6 avec Browser Sandbox de Spoon. Cliquez pour agrandir l'image.

NetBook ou Portables

La solution qui a ma préférence, c’est le NetBook sous Windows XP et IE6. C’est presque trop beau pour être vrai : pour moins de 300€ on s’offre la même configuration que les moins bien lotis de nos visiteurs : faible résolution d’écran, petit processeur et navigateur obsolète… le rêve, je vous dis !

Depuis que j’ai eu l’occasion d’admirer mon blog dans la résolution moyenne de ces Netbook (1024 par 600), je fais en sorte d’avoir du texte à lire dans cette zone en dehors du logo et de la baseline.

Essayez, et vous serez surpris par le nombre de sites ou de blogs qui ne proposent rien à lire dans cette zone primordiale des 500 premiers pixels (oui, il faut retrancher quelques précieux pixels occupés par les barres d’adresse et d’outils de votre navigateur).

Des modèles comme le Asus EeePC 1005HA ou 1008HA, le Samsung N140 ou encore le HP Compaq Mini 311c sous Windows XP sont de bons candidats. Tout autre portable sous Windows XP fera bien entendu l’affaire.

Adobe Browserlab

Oui, mais voilà, vous voudriez également savoir à quoi ressemble votre site chez le Mac Addict qui ne jure que par Mac OS X. Dans ce cas-là Browserlab est fait pour vous. Non seulement il vous permettra de tester votre site sous Firefox et Safari pour Mac OS X, mais en prime vous aurez la possibilité de voir ce que ça donne dans IE6 et IE7 pour Windows de manière à la fois fluide et rapide.

L’affichage des capture est assez rapide et il est possible de comparer plusieurs versions.

Comparer son site : IE6 sous Windows et Safari 3.0 sous Mac OS X. Cliquez pour agrandir l'image.

Internet mobile

Avec des chiffres estimés à plusieurs millions d’utilisateurs, il est important de vérifier que son site web s’affiche correctement sur les petits écrans des périphériques mobiles.

Plus d’information sur MobiReady dans l’article Votre blog sur un téléphone portable, really ready ?

N’oubliez pas de proposer un menu skip links à vos visiteurs mobiles !

Testez votre site web dans plusieurs téléphones portables avec Mobi Ready. Cliquer pour agrandir l'image.

Pour conclure

Cet article fait rapidement le tour des solutions que j’ai eu l’occasion de tester de manière plus ou moins approfondie pour tester mes pages web avec IE6, sachant que j’utilise Vista au quotidien. Si dans votre environnement professionnel les pages web doivent s’afficher correctement partout, il vaut mieux utiliser de vraies machines sous Mac OS X, Windows Vista, XP, Linux, etc.

Il s’agit de la seule manière de pouvoir compter sur le moteur de rendu graphique et Javascript et des éventuels outils d’aide à l’intégration et au développement… Le débuggage d’une page web ne se réduit pas à recaler une barre latérale qui passe sous le contenu principal !

Par ailleurs, il est toujours très intéressant de voir le rendu de son site sous une autre configuration (taille d’écran et résolution différentes, autres polices de caractère  installées, etc). Ça calme !

Références diverses pour les balises HTML5 et les propriétés CSS selon les navigateurs

• The Future of HTML5 — Les spécifications de HTML 5 s’appelaient à l’origine Web Applications 1.0. La plupart des observateurs ont focalisé sur la création des nouveaux marqueurs HTML comme header, nav, aside ou footer alors que cette nouvelle version recèle des trésors fabuleux : 1) Images dynamiques et graphiques avec canvas ; 2) Validation des formulaires améliorées avec webforms 2.0 ; 3) base de données locales pour enregistrer les données ; 4) Géolocalisation et 5) Création de barres d’outils et de menus.

• HTML5 Cheat Sheet — 4 pages en PDF pour connaitre toutes les balises disponibles dans HTML5 (y compris celles qui étaient déjà présentes dans HTML4). Par exemple :

  Tag	Information	Version	Attributes
  blockquote	Long quotation	4/5	cite
  dialog	dialog, conversation	5	global attributes
  section	section	5	cite

• Prise en charge des CSS selon IE6, IE7 et IE8 — Excellente mise au point des différences de prise en charge des sélecteurs et propriétés CSS selon les différentes versions d’Internet Explorer. Pouvons-nous utiliser body>p, a[href] ou encore position: fixeddans IE7 ? Toutes les réponses à ces questions — et à bien d’autres — sur une page claire et concise.

• CSS Compatibility and Internet Explorer — Je devrais y penser plus souvent : le réseau Microsoft pour les développeurs est plein de ressources pour faire le point sur la prise en charge des sélecteurs ou des attributs CSS disponibles dans les différentes versions d’Internet Explorer. Merci Josselin :)

• Web browser CSS support — Spécifications et prise en charge des propriétés CSS 2.1 et CSS3 selon les navigateurs. Possibilité de choisir parmi 14 agents utilisateurs : IE 4, IE 5, IE 5.5, IE 6, IE 7, IE 8, Firefox 1, Firefox 1.5, Firefox 2, Firefox 3, Opera 8.5, Opera 9, Konqueror 3.5 et Safari 2. Via les Carnets de La Grange.

• Browser support for CSS3 and HTML5 — Tableaux synthétiques pour connaitre le degré de prise en charge de HTML5 et CSS3 par les principaux navigateurs du marché : Safari 4 (Win), Firefox 3.5 (Win), Google Chrome (Win), Opera 10 (Win) et Internet Explorer 6, 7 & 8. Les propriétés les plus largement supportées (dans une optique d’amélioration progressive) sont : rgba(), hsla(), opacity(), border-radius (except Opera) et canvas.
  

• Pour finir cette rubrique, je vous propose de lire ou relire HTML5 et l’avenir du web de Tim Wright (traduit par Goulven Champenois) qui fait le point sur les avancées technologiques apportées par la nouvelle version de HTML.

Typographie : au-delà des polices installées chez l’utilisateur

• Utiliser n’importe quelle police sur un site web — L’article fait rapidement le point sur les différentes manières d’utiliser les polices de caractères sur son site web et présente la directive CSS3 @font-face qui commence à faire parler d’elle.

  Pour que vos fontes puissent être intégrées à Internet Explorer, il faudra convertir les polices du format TTF (TrueType Font) vers le format EOT (Embedded OpenType) avec TTF to EOT Font Converter.

  Si vous n’avez pas de belles fontes libres de droits sous la souris, je propose aux cinq premiers d’entre vous qui en feront la demande dans les commentaires, une invitation pour tester TypeKit. Grosso modo, une fois inscrit, vous pourrez faire une sélection de polices de caractère parmi près de 70 fontes classées par style (Serif, Sans Serif, Script et Exotic) ou par tag (clean, geometric, futuristic, grunge, gothic, etc.). Merci à bibinou pour l’invitation.

Framework CSS sans stress

• My Simple Framework — Ce framework fera plaisir à tous ceux qui trouve que la rigidité des grilles entravent leur créativité. A la place, ce framework se distingue avec plus de 1 600 feuilles de style prêtes à l’emploi pour subvenir à vos besoins en matière de mise en page web : 840 CSS en 960 pixels avec par exemple head-nav-3col(1-2-3)-4col(3-4)-960px.css et 840 CSS liquides avec head-nav-2col(1-2)-4col(2-3-4)-liquid.css.

• oocss — Framework CSS à la mode de la programmation objet. A ce sujet, je suis assez d’accord avec Grégoire pour dire que la POO c’est du pipeau — ou du moins pas indispensable en développement web — car la programmation procédurale en a encore sous la botte… Ceci dit, il y a toujours de bonnes idées à prendre dans les frameworks, donc, enjoy!

• Reset CSS spécial HTML5 — Un bon reset CSS c’est le début d’un framework ! Cette remise à zéro des styles par défaut des balises HTML est inspiré par le Reset CSS d’Eric Meyer auquel Richard Clark a ajouté les éléments spécifiques à HTML5 : article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video. Via Blog-html5.

Pour avoir une liste plus conséquente de frameworks CSS et une analyse plus touffue, je vous invite à lire :

• Framework CSS — mettez vos grilles au pas !,
• Frameworks CSS + Reset CSS : design from scratch,
• Framework CSS sémantique ? Comment je vois les choses.

CSS Float

Avoir les pieds dans la float n’est pas toujours agréable, alors voici quelques liens qui devraient vous aider à vous en sortir :

• Understanding CSS Floats — La propriété float expliquée en texte, code et illustration. Des explications claires et didactiques en anglais.
• CSS Float Theory — Dans la même veine que le lien précédent, en plus complet peut-être. Ce tour d’horizon sur float contient également une palanquée de liens qui valent également le coup d’oeil.
• Floatutorial — Si je devais partir sur un ile déserte avec un seul site sur float, c’est certainement celui-ci que j’emporterais avec moi, ne serait-ce que pour les nombreux exemples concret mettant en oeuvre la propriété float.

Allez, encore un effort pour en savoir davantage sur cette propriété CSS passionnante (en français) :

• Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?,
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire.

Miscellanées

Last but not least, je termine cette revue de presse avec ces liens qui viennent de me tomber sous la souris :

• Intégrateurs, montez au front — Voici le résumé de la conférence donnée par Stephane Deschamps à Paris-Web 2009. Cette intervention aurait pu s’appeler L’intégrateur, cet inconnu. Ce métier est mal connu, sans doute à cause de l’étendue des techniques et des savoir-faire qu’il faut connaitre et maitriser si possible.

DOM vs Namespace html:

1. Le DOM pour créer from scratch ex nihilo les balises manquantes. Cette méthode préconisée notamment par John Resig consiste à créer les éléments dont nous avons besoin via Javascript :

   
       <!--[if IE]>
           <script type="text/javascript">
               document.createElement("header");
               document.createElement("footer");
               document.createElement("nav");
               document.createElement("article");
               document.createElement("section");
           </script>
       <![endif]-->
   

   Pour automatiser la création des éléments présents dans HTML5, Remy Sharp nous propose HTML5 enabling script :

   
      <!--[if IE]>
          <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
   

2. Le préfixe html: pour déclarer l’élément dans son namespace :

   
   <html:header>Ceci est un header</html:header>
   

Pour faire le point sur les avantages et inconvénients de ces deux techniques, voici l’excellent article How to get HTML5 working in IE and Firefox 2 suggéré par Adrien Leygues dans le fil de discussion en question.

Un script PHP à écrire…

Pour réunir le meilleur des deux mondes, Yves Van Goethem propose de servir les éléments HTML avec ce préfixe uniquement pour IE, le code serait réécrit par un moteur en back-end pour obtenir un script côté serveur (et non plus dépendant de Javascript) pour automatiser la prise en compte des balises HTML5 par IE, ce qui permettrait d’utiliser les nouvelles balises HTML5 dès avant-hier ! N’hésitez pas à vous manifester si vous avez déjà développé un script ou simplement si vous avez des idées sur la question.

En attendant Godot 2022 ^_^v

Voici un exemple de page HTML5 valide proposée par Remy Sharp dans HTML 5 Boilerplates utilisant le script html5.js :

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=utf-8 />
            <title>HTML 5 complete</title>
            <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->
            <style>
                article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
            </style>
        </head>
        <body>
            <p>Hello World</p>
        </body>
    </html>

Notez le display: block pour déclencher la prise en compte des éléments HTML and the cat’s in the bag!.

Links for Free

• http://html5doctor.com/html-5-boilerplates
• http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2
• http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web
• http://groups.google.fr/group/webdevfr
• http://ejohn.org/html5-shiv
• http://remysharp.com/2009/01/07/html5-enabling-script
• http://viralpatel.net/blogs/2009/05/html-5-the-new-html-kid-on-the-block.html
• http://www.alistapart.com/articles/previewofhtml5
• http://bbxdesign.com/2009/06/08/introduction-au-html-5
• http://www.iheni.com/html5-tips-structure-doctype-aria

L’idée, c’est de ne prévoir qu’une seule feuille de style pour IE pour placer les déclarations spécifiques aux versions 6 et à 7 :

Dans ie.css

Pour s’adresser à IE6 :

* html div {
blablabla
}

html>body div {
blablabla
}

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
<![endif]-->

Idée inspiré par l’organisation des feuilles de style du framework CSS Blueprint que j’ai eu l’occasion de présenter dans cette traduction. Sans oublier le billet de Country qui a déclenché l’envie d’en faire un billet ;)

Pour « clearer » les « float », j’utilise désormais en première intention un overflow: hidden dont j’applique soigneusement la pommade sur le bloc qui contient les éléments flottants de manière à créer un contexte de formatage, le tout agrémenté d’une pincée de Ouidzzz !, de Zzoum ! ou de Héiiiitt… pour IE6 qui a besoin d’un petit câlin pour déclencher son fumeux fameux hasLayout sur lequel vous trouverez tout ce qu’il faut savoir chez blog-and-blues qui a mené de nombreux tests XHTML et CSS sur le sujet.

Voici quelques exemples de code que j’utilise pour rétablir le flux :

Avec overflow: hidden

.container-with-overflow {
    overflow: hidden;
    height: 1%;
}

Avec la pseudo-classe :after

.container-with-generated-content {
    height: 1%;
}


.container-with-generated-content:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Vous avez remarqué que le height: 1% (ou zoom: 1) est toujours nécessaire pour déclencher le hasLayout chez IE 6 et IE 7 (et oui, ce dernier ne « comprend » pas la pseudo-classe :after…

Pourquoi présenter deux méthodes ? Simplement parce que si on utilise overflow: hidden pour déclencher le contexte de formatage, il ne pert pas pour autant sa fonction première : masquer le contenu qui dépasse d’un bloc. C’est souvent très pratique, par exemple lorsqu’on ne veut pas trop se soucier de la largeur des images, mais parfois très ennuyeux lorsque le bloc en question doit inclure un menu déroulant, car ce dernier risque d’être masqué lui aussi…

En faisant flotter le container lui aussi !

Une troisième méthode consiste à donner une largeur de 100% à l’élément container et à le faire flotter lui aussi :

.container-with-float {
    float: left;
    width: 100%;
}

Est-ce la fin des anciennes méthodes ? C’est bien possible, même si dans la plupart des cas, le clear: both appliqué à une balise hr ou br peut se justifier, vu que généralement lorsqu’on a besoin de rétablir le flux, c’est qu’il y a une légère rupture sémantique qui peut être rendu par une ligne horizontale (peut-être moins un br, mais bon…). Disons que le test est simple : si en l’absence de CSS, les lignes hr ont l’air d’être posées comme un cheveu sur la soupe, c’est qu’il n’y en a pas besoin ;)

Pour en savoir plus sur les avantages et inconvénients de ces trois techniques, je vous invite à jeter un oeil chez Robert Nyman et chez Florent Verschelde pour tout savoir sur les marges et contexte de formatage.

Quelques liens

• Très bonne analyse de Florent Verschelde en quatre parties sur les problèmes liés à l’utilisation des flottants. De nombreux exemples avec capture d’écran pour montrer les problèmes rencontrés sur les différents navigateurs :
  1. Exposé du problème
  2. Exemples avec un élément parent de largeur fixe, et exposé des solutions disponibles
  3. Exemples avec un élément parent sans largeur fixe (non doté du layout)
  4. Pour IE Win : divers moyens de doter l’élément parent du layout
• Clearer des floats sans élément superflu
• How to clear CSS floats without extra markup – different techniques explained — Le site sur lequel j’ai copié-collé les exemples pour illustrer cet article. Des explications concises et efficaces.
• Methods for Containing Floats — Contient des tableaux récapitulatifs des différentes méthodes de clearing et leur support par les navigateurs. Un must-read.
• How To Clear Floats Without Structural Markup
• Containing Floats
• IE/Win: relatively positioned parent and floated child – disappearance
• New clearing method needed for IE7?

Pour la route…

J’en profite pour vous annoncer que la première partie de ce billet est également disponible sur le portail developpez.com, dans la rubrique CSS \o/

Developpez.com, c’est LE site de référence pour tout ce qui concerne les techniques de programmation. Je vous conseille tout particulièrement l’excellent outil XHTML développé par giminik (Matthieu Petiot) pour connaitre la hiérarchie des éléments et les imbrications autorisées par les spécifications.

Si le premier groupe nous donne satisfaction, il faut bien reconnaitre que le second reste scotché près du radiateur dès qu’on parle d’overflow, de min-height, de positionnement implicite avec right, bottom ou left ou encore d’interactivité avec :hover sur autre chose qu’une ancre a…

Bref, toutes ces petites choses très utiles au cours de l’intégration CSS qui manquent cruellement à Internet Explorer. Sans parler de la prise en charge inexistante de certains sélecteurs CSS qui seraient très pratique pour éviter de spécifier une classe chaque fois que l’on veut atteindre un élément en fonction de sa position dans le DOM.

Dans la suite de cet article nous verrons que la bibliothèque Javascript IE7 peut nous aider à travailler plus efficacement avec Internet Explorer pour faciliter la mise en œuvre de « composés » HTML / CSS cross-browser.

Est-ce vraiment nécessaire d’avoir un affichage identique quelque soit le navigateur ?

Dans le flux de production habituel, la production d’un site web passe par la conception d’une charte graphique dont il conviendra de découper et d’agencer les morceaux à coup de balises HTML et de déclarations CSS.

L’image servant de référence quasi-absolue, il devient très difficile de défendre auprès de son commanditaire le point de vue selon lequel la sacrosainte charte graphique puisse présenter des différences — même minimes — d’un navigateur à l’autre, fut-ce d’un pixel !

Pour parvenir à ses fins, l’intégrateur web dispose de deux armes : le code HTML qui — s’il suit une ligne sémantique de bon aloi — devrait garder la même structure d’un bout à l’autre du projet, et les CSS qui servent de variable d’ajustement jusqu’à la fin.

Reste à trouver une méthode de travail qui limite à la fois les différences de rendu et le nombre de lignes de code à produire :

• Les visionnaires conseillent de faire un site conforme aux standards en prenant un navigateur comme Firefox ou Opera comme référence pour le rendu CSS, et d’utiliser au maximum les possibilités offertes par…
  • les sélecteurs CSS,
  • la transparence PNG en 256 niveaux,
  • le calcul des largeurs minimales et maximales,
  • etc,
  …puis de faire au mieux pour les navigateurs non conformes. Cette approche, pour intéressante qu’elle soit, n’est pas possible dans un contexte commercial car seule une poignée de visiteurs verrait le site web dans toute sa splendeur, tandis que la majorité n’en aurait qu’une version dégradée, fut-ce gracieusement…
• Les réalistes proposent de n’utiliser que les propriétés disponibles sur la majorité des plate-formes, en prenant pour chaque fonctionnalité, le plus petit dénominateur commun en fonction du projet. Cette approche permet de concilier le respect des standards (même s’il ne s’agit pas des toutes dernières recommandations) avec un rendu uniforme des pages en contrepartie d’une éventuelle limitation des fantaisies graphiques souhaitées par le client. En effet, selon la maquette, le fait de ne pas pouvoir utiliser la transparence PNG, par exemple, peut avoir une incidence sur la rigidité de la structure HTML / CSS à cause des découpes d’images : on sera enclin à réunir plusieurs partie d’image en une seule, alors qu’avec la gestion de la transparence, il est sera plus souvent possible de « granulariser » les découpes.
• Une troisième approche réalistico-visionnaire que l’on retrouve parfois sous l’acronyme MOSe (Mozilla, Opera, Safari enhancement) mélange les deux premières approches en cherchant le plus petit dénominateur commun pour assurer une large compatibilité, puis en introduisant des améliorations visibles uniquement dans les navigateurs modernes. Cette dernière approche est celle qui offre une plus grande cohérence à vos pages web dans le temps, puisque qu’en suivant les recommandations au plus près, plus le temps passe et plus le souvenir des mauvais navigateurs s’estompe. (Ceci est à rapprocher de l’annonce de la nouvelle balise meta mise en place à l’occasion de la sortie prochaine d’IE8 qui réintroduirait dans l’écosystème du web un pis-aller dont on commençait à peine à se débarrasser : la détection du navigateur pour savoir s’il doit basculer en mode standard ou non. Voir ma petite note sur le sujet.)

IE7.js : ce n’est pas de la magie, c’est de la technologie ! »

Ce qui est surprenant, c’est que le glissé-déposé d’onglets fonctionne également depuis Firefox (ou Flock) vers Internet Explorer 7.

En revanche, si IE7 accepte les câlins, ce n’est pas le cas de FF qui refuse toute tentative de rapprochement de la part de son rival.

Bref, si Firefox et Internet Explorer parlent « onglets » c’est à sens unique pour l’instant. Peut-être que Firefox 3 sera un peu plus sociable… ^_^v

Edit du 14/01/2007 à 10:32

A la lumière des commentaires Eclairés de mes pairs, Mon jugement je révise Et déclare qu’IE7 Ne vaut pas tripette Qu’on se le dise

Firefox, un renard qui s’apprivoise

Firefox a ma préférence depuis longtemps en raison de sa simplificité et de son « extensabilité », d’une part, mais surtout grâce à son moteur de rendu qui, l’air de rien, rend les pages web plus équilibrées et plus belles, notamment en ce qui concerne la taille des textes par défaut, leur agrandissement, le rendu des éléments de formulaires, les options disponibles pour l’affichage des onglets, et bien sûr les moults modules externes qui satisfont les besoins les plus fous !

Deux problèmes cependant (qui sont certainement liés) : la consommation mémoire et l’instabilité du logiciel. Lorsque j’utilisais Firefox rempli de plugins jusqu’à la gueule, et qui plus est sous Windows 2000, je battais ma coulpe en maudissant ma frilosité et mon attachement à Photoshop qui m’empêchaient de passer sous Ubuntu ou de changer de matériel pour installer un Windows XP ou Vista pour entrer d’un coup dans la modernité…

Internet Explorer 7 à prouver

… Et un jour je suis passé sous Vista (même pas mal). J’ai très vite réinstallé Firefox pour m’apercevoir que les plantages continuaient. Pas toutes les cinq minutes, certes, mais suffisamment pour que je me tourne vers IE7 la larme à l’oeil.

IE7. Ne plante pas. Très rapide (beaucoup plus de Firefox qui, pour une étrange raison met presque autant de temps à afficher une page présente dans l’historique qu’une nouvelle…). Mais avec une ergonomie générale venue d’un autre monde.

Bien sûr, avec un peu d’habitude on s’y fait ; je m’étais bien habitué aux inconsistances de Firefox. (Tiens, à ce propos, j’aimerais savoir si je suis vraiment le seul à rencontrer des problèmes avec le Renard de feu ou si tout le monde fait semblant). Bon, vous remarquerez que parler de IE7 me ramène au Panda roux.

Ceci dit, par rapport à IE6, la dernière version a fait des progrès sensibles, tels que l’affichage de pointillés qui ressemblent vraiment à des pointillés, la prise en compte de la transparence du format PNG en 24 bits, etc…

Toutefois, je regrette le petit retour en arrière sur le zoom de la page qui semble avoir remplacé l’agrandissement de la taille du texte. A moins d’avoir un écran 24 pouces, je ne vois pas trop à quoi ça sert.

IE7 serait très bien pour le surf quotidien mais la gestion des onglets est perfectible. Sous Firefox, il est facile de demander l’affichage des liens dans un nouvel onglet de la même fenêtre alors que IE7 a tendance à ouvrir des nouvelles fenêtres qui encombrent rapidement l’espace de travail.

Sur un air d’Opera

Du coup, je me suis intéressé à Opera. C’est un très bon logiciel rapide et stable, connu pour son support étendu des CSS. Le seul problème que je lui trouve, c’est le manque de fiabillité quant à l’affichage de certaines pages web que j’utilise régulièrement.

Dès qu’Ajax entre en jeu, des bugs d’affichage surviennent, en particulier dans Google Reader et parfois dans Gmail. Il s’agit peut-être d’une mauvaise implémentation de Javascript dans Opera ou une mauvaise utilisation de Javascript de la part des développeurs de chez Google, mais bon…

Dans la série des bugs étranges et venus d’ailleurs, il y a celui qui affecte le texte saisi dans l’éditeur visuel de WordPress : l’attribut href passe en majuscule et des espaces multiples apparaissent dans l’éditeur, mais également dans le billet publié :

Remarquez la ligne blanche après « Klein » qui apparait lors d’une simple saisi de texte dans l’éditeur visuel de WordPress…

Et voici le résultat lors de la prévisualisation du billet

En bref

En pesant le pour et le contre de chaque logiciel, l’expérience la moins désagréable reste celle procurée par Firefox : tant qu’il ne plante pas, c’est parfait… Vivement la version 3 ;)