Après avoir tenu ce discours : «Non les formulaires, on ne peut pas les styler, désolé» pendant des années, les webdesigners les plus tenaces sont revenus avec des exemples de sites en nous disant : «Tu me dis que c’est pas possible, mais là sur tel site, ils l’ont fait.»”

Ok, reprenons : styler des éléments de fomulaire html, ça ne donne pas un résultat terrible, mais… avec javascript on arrive à voir un résultat plutôt satisfaisant. La question est : faut-il utiliser du JS pour faire de la cosmétique ? Parce que la seule chose qu’on fait avec JS ce n’est pas styler des éléments de formulaires, mais au mieux cacher des éléments de formulaires (ou les rendre invisibles) pour leur substituer des éléments graphiques, au pire remplacer des éléments de formulaires par d’autres balises html qui elles pourront être stylées avec CSS. Par exemple, remplacer un select par une liste non ordonnée. Est-ce que le jeu en vaut la chandelle ? Est-ce qu’on va alourdir les pages et retarder leur affichage pour quelques effets que l’utilisateur ne remarquera même pas ?

La question que tout le monde se pose (ou peut-être qu’il n’y a que moi qui me la pose), c’est pourquoi on ne peut pas styler les éléments de formulaire ? Ok pour les input de type texte (et encore pas avec tous les navigateurs), mais pourquoi pas les listes déroulantes de type select, les cases à cocher ou autres boutons radio ? Y-a-t-il une raison à ça ou les fabricants de navigateurs, se sont dit : «oups, on a oublié les formulaires !» «Laisse tomber on va dire que c’est fait exprès.»

Argumentons dans le sens où c’est fait exprès : les internautes ont l’habitude de leur système d’exploitation, du coup ils vont toujours identifier ces éléments quelque soit le navigateur dans lequel ils sont, et ça en terme d’utilisabilité c’est imbattable ! Mouais, pas vraiment convaincant tout ça…

Est-ce qu’on se posait la question avant ? «Fais moi ça en flash c’est plus joli». Ce serait de la faute de flash, alors ? Toujours est-il qu’on trouve de plus en plus de plugins qui permettent de faire ça facilement, tentant, non ? J’en ai essayé deux ou trois, je vous donne mon avis :

jQuery UI selectmenu

Pas des plus facile à manipuler, mais très complet, il couvre largement le spectre des utilisations de menus avec des listes déroulantes. Trop de styles inline qui complique le skinning des css externes. A noter que ce plugin utilise les attributs ARIA pour l’accessibilité.

jQuery UI checkbox

Simplissime. Par exemple pour une case à cocher il suffit d’initialiser le script de cette façon $('input').checkBox();
Et la case à cocher est remplacée par un span avec la classe “ui-checkbox”, il ne reste plus qu’à appliquer les CSS.

jQuery Stylish select

Je ne l’ai pas testé personnellement, mais ça a été utilisé sur un projet récent dans ma boîte. Complètement customisable en CSS et ultra light.

Uniform

Je suis tombé sur celui-ci il y a quelques jours, il me parait assez complet et facilement skinnable, une image sprite pour tous les éléments (vous pouvez créer des thèmes et les proposer sur le site), une fois les éléments stylés la navigation au clavier me parait correcte, reste juste à mettre plus en avant le focus sur les éléments.

Après c’est vous qui voyez… Personnellement, je ne trouve pas ça indispensable, mais pourquoi pas si les contraintes de conception ne sont pas trop draconiennes.

Bon je repose ma question aux concepteurs de navigateurs : Pourquoi les éléments de formulaire ne peuvent être stylés de la même façon que les autres balises html ?

Pour un code html donné :

<div id="container">
    <div class="level1">
        <div class="level2">
            Texte centré en hauteur<br />
            sur plusieurs lignes
        </div>
     </div>
</div>

Appliquons un code css qui va permettre de considérer la div contenant le texte comme une cellule de tableau :

div{width:500px;}
#container{height:80px;background-color:red;display:table;}
.level1{display:table-cell;vertical-align:middle;}

Le conteneur (#container) est considéré comme étant l’élément table (cette ligne n’est pas obligatoire comme nous l’avons vu dans un autre article des Intégristes qui explique le fonctionnement du display:table), la div qui a la classe level1 est considérée comme étant une cellule de tableau et se comportera de la même manière. Pour centrer le texte en hauteur on lui applique le couple propriété/valeur vertical-align:middle.

Un petit tour des navigateurs les plus communément utilisés, nous permet de nous rendre compte que cette solution ne convient pas à Internet Explorer (6 et 7). Nous allons nous servir de la div.level2 qui n’avait aucune utilité dans l’exemple précédent pour appliquer le code CSS suivant uniquement à Internet Explorer en utilisant les commentaires conditionnels HTML :

<!--[if IE]>
<style type="text/css" media="screen">
div{width:500px;}
#container{height:80px;position:relative;background-color:red;}
.level1{position:absolute;top:50%;}
.level2{position:relative;top:-50%;}
</style>
<![endif]-->

Pour que le code css précédemment créé et qui fonctionne dans les navigateurs hors IE ne s’applique pas à IE, nous allons ajouter, les commentaires suivants :

<!--[if !IE]>-->

<!--<![endif]-->

Ce qui donne

<!--[if !IE]>-->
<style type="text/css" media="screen">
div{width:500px;}
#container{height:80px;background-color:red;display:table;}
.level1{display:table-cell;vertical-align:middle;}
</style>
<!--<![endif]-->

Vous allez certainement me poser ma question : pourquoi ne pas appliquer la deuxième solution à tous les navigateurs et pas uniqument à IE6 ?
Tout bonnement parce que la deuxième solution ne fonctionne que dans IE !

Plus d’exemples dans ce tutorial vraiment complet du blog In The Woods »

Vous avez certainement lu comme moi, que tout ce que vous saviez sur les css étaient faux en lisant l’article de Digital Web par Rachel Andrew. Je n’ai pas lu le livre, mais à la lecture de l’article j’ai voulu tester une nouvelle manière de mettre en page mon code html. Avec l’arrivée d’IE8, on va pouvoir enfin utiliser les propriétés CSS display:table, display:table-row et autres display:cell. Et je me pose la question suivante : à quoi servent réellement ces propriétés ? Parce que si on a bataillé, argumenté et convaincu des dizaines de personnes que les tableaux c’est mal, c’est pas pour simuler des tableaux en CSS ! Justement l’auteure nous réponds à ce sujet :

L’élément table en HTML est une structure sémantique, il décrit des données. Par conséquent, l’élément table est à utiliser uniquement pour des données tabulaires, par exemple un tableau mettant en forme des informations financières. Ces informations seraient normalement stockées dans une feuille de calcul sur votre ordinateur, il faudrait probablement un tableau pour les présenter en HTML.

La valeur table de la propriété display, d’un autre côté est simplement une indication de la présentation à afficher dans le navigateur – elle n’a pas de signification sémantique. Utiliser un élément table pour votre mise en page donne l’information suivante au user-agent : ces données sont tabulaires. Utiliser plusieurs divs qui ont la propriété display avec les valeurs table ou table cell, ne dit rien de plus au user agent que demander de les rendre visuellement d’une certaine façon, s’il en a la capacité.

Donc pas de problème, du moment que notre code html reste sémantique, on peut y aller ?

Quels sont actuellement les moyens dont nous disposons pour mettre notre code html en forme ?

1. Mise en forme à l’ancienne

   Il y a quelques années (au temps de netscape 4 et IE 5.5), j’aurais fait (à peu près) une mise en forme de ce style :

   Mise en page en tableau

2. Mise en page avec des éléments flottants *

   Pour moi la façon la plus fluide de mettre une page en forme, et qui permet beaucoup de flexibilité.

   Mise en page avec des divs flottants

3. Mise en page avec des éléments en absolu *

   Pratique dans certains cas mais je ne la conseillerais pas, trop figée pour des sites qui évoluent en permanence.

   Mise en page avec des éléments en absolu

4. Mise en page avec des display:table

   L’article de Digital web présente cette façon de faire. En lisant l’article, ça a l’air simple. Bon sang, mais c’est bien sur ! Pourquoi n’avions nous pas pensé à cette façon de faire plus tôt ? Bon, ok, on l’oublie à cause d’IE6, mais parfois on aime bien se projeter dans le futur et essayer de nouvelles choses, juste pour le sport… Je reprends donc mon design minimaliste : un header, une colonne de gauche, une colonne de droite et un footer. Simple. Je me base sur mon intégration old school et essaie d’appliquer la méthode vue dans l’article cité ci-dessus. Pas besoin de reprendre l’intégralité du code des tableaux (thead, tbody, tfoot, tr, etc…) puisque les éléments manquants sont créés virtuellement par le navigateur.

   Une esquisse de résultat…

Essayons maintenant de faire un colspan… hum, comment fait-on ? Puisque les propriétés du tableau sont définies en CSS et pas en HTML ? Après maintes recherches je déclare forfait. Avez-vous la réponse ?

En reprenant l’article, je me rends compte que ce n’est pas évoqué. Les seuls cas envisagés sont simples voire simplistes. Ok pour un site perso, mais ce n’est vraiment pas adapté pour un environnement professionnel. Loin de révolutionner notre façon d’utiliser les CSS, cette démonstration reste pour moi rien de plus qu’un exercice de styles…

On devra certainement attendre longtemps avant de voir arriver des CSS spécialement dédiés à la mise en forme de page web, en attendant vous pouvez toujours aller voir le document de travail Advanced Layout du W3C.

* Des tas d’exemples de mise en page sur les sites suivants :

http://layouts.ironmyers.com/100_percent_Layouts/
http://blog.html.it/layoutgala/
http://sherina.blogsome.com/2008/07/29/10-css-layout-demos/
http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates
http://css-discuss.incutio.com/?page=CssLayouts
http://www.free-css.com/free-css-layouts/page1.php
http://www.code-sucks.com/css%20layouts/faux-css-layouts/
http://www.free-css.com/free-css-layouts/page1.php

Bien qu’incomplètement prise en compte par les différents navigateur, il est possible de l’utiliser avec quelques connaissances supplémentaires, démonstration :

Prenons l’exemple simple d’un formulaire d’inscription, où il faut aligner des label à 150px du bord d’input de type texte :

Pour le code html suivant :

<form action="http://www.example.net/" method="post" id="inscription">
  <fieldset>
    <label for="prenom">Prénom <em>*</em></label>
    <input type="text" id="prenom" /><br />
    <label for="nom">Nom <em>*</em></label>
    <input type="text" id="nom" /><br />
    <label for="email">Email <em>*</em></label>
    <input type="text" id="email" /><br />
    <label for="password">Mot de passe <em>*</em></label>
    <input type="password" id="password" /><br />
    <label for="confirm-password">Mot de passe <em>*</em></label>
    <input type="password" id="password" /><br />
    <input type="submit" value="valider" class="input-submit" />
  </fieldset>
</form>

Je définis le styles des base, auxquels je vais ajouter (en gras) la propriété inline-block et les styles qui vont avec :

#inscription fieldset{border:none;}
#inscription label{display:inline-block;padding:5px 0 0;width:150px;font-weight:bold;}
#inscription input{border:1px solid #666;}

Première constatation : ça fonctionne sur la plupart des navigateurs (IE6, IE7, Opera, Safari) mais pas sur les versions de Firefox antérieures à Firefox 3…

On ajoute alors la propriété display:-moz-inline-box; pour Firefox 2 et les versions antérieures, mais attention, il faut la placer avant display:inline-block, sinon ça ne fonctionne plus pour Internet Explorer et Firefox prend en compte display:-moz-inline-box; au lieu de prendre en compte display:inline-block.

#inscription fieldset{border:none;}
#inscription label{display:-moz-inline-box;display:inline-block;padding:5px 0 0;width:150px;font-weight:bold;}
#inscription input{border:1px solid #666;}

Dans certains cas j’ai constaté des problème de layout avec Internet Explorer, dans ce cas ajouter la propriété display:inline dans une déclaration séparée :

#inscription fieldset{border:none;}
#inscription label{display:-moz-inline-box;display:inline-block;padding:5px 0 0;width:150px;font-weight:bold;}
#inscription input{border:1px solid #666;}
#IE #inscription label,
#IE #inscription .input-submit{display:inline;}

On obtient le résultat suivant, un formulaire structuré sans tableau, sans éléments flottant ou positionnés en dehors du flux html :

Seule limitation constatée, les éléments mis en inline-block dans Firefox se comporte comme ayant une propriété white-space:nowrap appliquée, il n’est pas possible d’avoir des textes sur plusieurs lignes…

La date de sortie de Firefox 3 a été fixée au 17 juin.

Safari 3.1 attend ses nouveaux camarades depuis quelques temps déjà.

Dans quelques jours, les internautes auront à disposition trois navigateurs web d’excellente qualité.

Javascript

Les performances de Javascript sont plus élevées que jamais, et c’est loin d’être fini :

Firefox 4 utilisera le moteur ECMAScript de Flash Player, Tamarin.

Le projet Webkit (le moteur de rendu utilisé par Safari) est lui aussi en train de passer à un nouveau moteur Javascript, SquirrelFish, qui est extrêmement rapide.

Le nom de code de la prochaine version du navigateur Opera est Peregrine, « pèlerin » en français, et il n’a pas été choisi au hasard :

Le faucon pèlerin, ou Falco peregrinus (Tunstall, 1771), est un rapace robuste de taille moyenne, réputé pour être l’oiseau le plus rapide du monde. Les mesures de la vitesse lors de la phase plongeante de l’attaque varient généralement entre 130 et 184 km/h. La vitesse maximale mesurée serait de 390 km/h.

CSS

CSS 2.1 est maintenant correctement supporté dans ces trois navigateurs (Firefox 3 permet enfin d’utiliser la propriété display:inline-block !), et de plus en plus de propriétés CSS 3 (qui n’est pas une recommandation et continue d’évoluer) sont d’ores et déjà implémentées.

Évidemment, Firefox passe avec succès le test Acid2.

HTML

Certains éléments de la future recommandation HTML5 (encore loin d’être finalisé) commencent réellement à être utilisables.

L’élément canvas est en plein explosion. Les exemples suivants utilisent cet élément et fonctionnent sur Firefox 3, Opera 9.5 et Safari 3.1 :

• Canvascape, une démo de moteur 3D de type « Doom-like ».
• Un clone de Mario Bros
• Un clone de Super Mario Kart
• Bomomo, une expérimentation très intéressante
  
• Pixastic, un outil de retouche photo
• Un jeu d’échecs en 3D

Ce n’est qu’un début : l’élément canvas3D devrait permettre d’utiliser l’accélération 3D des cartes graphiques.

Le support de SVG s’améliore encore, et il est maintenant aussi simple d’afficher des images vectorielles que d’afficher une image bitmap (Jpeg, PNG) dans une page. Les nouvelles versions de Safari et d’Opera permettent d’utiliser des images SVG dans la propriété CSS background-image.

Des versions expérimentales de Firefox, Opera et Safari permettent d’utiliser l’élément video défini dans HTML5.

Et Internet Explorer ?

Il semblerait que plus personne n’attende quoi que ce soit de ce navigateur. L’innovation sur le web, longtemps paralysée, est enfin repartie à plein régime, laissant de côté ce navigateur.

Internet Explorer 6 est toujours en circulation, et la plupart des sites se doivent encore de le prendre en compte aujourd’hui, mais on est très loin des méthodes de conception utilisées il y a quelques années : créer différentes versions d’un site par navigateur est non seulement impossible, mais également inadapté au web d’aujourd’hui, standard et universel.

Les méthodes de travail ont changé : un site est d’abord conçu pour les standards, puis adapté pour Internet Explorer, de manière plus ou moins élégante. Des hacks existent pour émuler SVG, l‘élément canvas et CSS2.1. Les exigences pour ce navigateur ont été globalement revues à la baisse : l’essentiel est que l’internaute accède aux informations.

Internet Explorer 8 nous promet de belles choses, mais personne ne l’attend plus. Le choix et l’innovation sur le web sont définitivement de retour, et ils s’en passeront volontiers.

Comment voyez-vous l’évolution du web dans les douze prochains mois ?

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.

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)

Pourquoi utiliser des pop-up ?

Le raisonnement que j’entends souvent est : « le contenu n’est pas assez important pour une nouvelle page ». Ce raisonnement aussitôt contredit par des demandes de pop-up de 650px sur 800 px … Pourquoi tant d’acharnement ??!!

Bien sur je ne parle pas des pop-up non sollicitées qui ne méritent même pas qu’on s’y arrête ne serait-ce qu’un instant, les navigateurs tels que Firefox ou Opéra, nous en débarassent sans que nous ne nous en rendions même compte.

Alors que la plupart des sites a abandonné cette habitude d’un autre temps, certains résistent encore et toujours bien que les arguments contre l’utilisation de ces petites fenêtres ne manquent pas :

Ergonomie :

1. Les utilisateurs en navigant sur leur site préféré ne s’attendent pas à ce que les liens sur lesquels ils cliquent ouvrent une autre fenêtre.
2. Une pop-up peut passer en dessous de la fenêtre principale si on clique malencontreusement sur cette dernière.
3. Si une pop-up est ouverte et se trouve sous la fenêtre principale toutes les pages ouvertes dans la popup (si elle n’est pas nommée ou porte le même nom dans toutes les fonctions d’ouverture de la popup) demeureront invisibles pour l’internaute qui croira se trouver en présence de liens non-fonctionnels.

Accessibilité :

1. L’ouverture d’une pop up perturbe la navigation notamment pour les personnes qui utilisent des aides techniques pour naviguer. En règle générale, l’ouverture d’une nouvelle fenêtre est déstabilisant pour les personnes aveugles.
   Il est de plus impossible de revenir à la page précédente par l’historique du navigateur.
2. Une popup est ouverte par une fonction javascript, sans js la popup ne s’ouvre pas à moins qu’on prenne le soin d’avoir recours à cette technique (ce qui est loin d’être le cas, le plus souvent) :

<a href="page.htm" onclick="window.open(this.href); return false;">

Il existe d’autres solutions beaucoup plus sympa pour afficher des informations sans changer de page à l’aide de javascripts non-intrusifs (il suffit de regarder les scripts et plugins proposés par des bibliothèques comme jQuery ou script.aculo.us)

Crédibilité :

1. les pop-up nuisent à l’image du site qui les utilise et donnent une impression générale d’amateurisme.
2. Les pop-up sont dans la plupart des cas associées à de la pub et bénéficient de moins d’attention de la part des internautes.

Contraintes des navigateurs :

Dans les navigateurs modernes, et ceci pour éviter les abus, il n’est plus possible d’intervenir sur les propriétés des popup (emplacement, redimensionnement, déplacement, etc.)

Conclusion : on ne devrait plus se poser la question, les popup, c’est NON !

Quelques liens pour poursuivre cette réflexion :

• The Jarrett-Zetie Rules of Pop- ups : http://www.ergologique.com/actualites/actus.php?id_actu=123
• Interview Jakob Nielsen sur JDN : http://www.journaldunet.com/itws/it_nielsen.shtml
• Créer des popup intelligentes : http://openweb.eu.org/articles/popup/
• Lazy, stupid and evil design : http://www.guardian.co.uk/technology/2005/jun/23/columnists.comment

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 !

Puisque IE7 est sorti, et que certaines limitations sont encore d’actualités, le script a été scindé en deux parties : IE7.js se limite maintenant aux améliorations d’IE7 qu’il apporte à IE5/6, tandis qu’IE8.js reprend les fonctionnalités d’IE7.js toujours absentes dans Internet Explorer 7.

Un projet a été créé chez Google Code pour l’occasion : http://code.google.com/p/ie7-js/

Voici un bon moyen d’accompagner doucement ce vieux navigateur vers ses derniers instants, tout en profitant des sélecteurs (classes multiples, sélecteurs d’attributs, :hover sur tous les éléments, …) et propriétés (min-height, max-height…) CSS. Sans même utiliser IE8.js, placer IE6 au même niveau que son jeune frérot procure un sacré confort !

Evidemment, cette solution n’est pas parfaite : le style de vos pages sera en partie altéré pour un utilisateur d’IE6 ayant désactivé javascript. Il faut alors s’assurer que chaque page reste bien accessible.