css 4 design » Commentaires conditionnels

Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)

Bruno Bichet — Thu, 01 Apr 2010 20:46:19 +0000

Toujours dans ma recherche de solution pour servir des déclarations CSS uniquement à Internet Explorer, je suis tombé sur une technique que j’appellerais «classification» sélective du body (ou de la balise html) en fonction du navigateur. Une fois encore, les commentaires conditionnels serviront à détecter Internet Explorer pour ajouter une classe à la balise html pour éviter de créer une feuille de style dédiée à IE.

Reste à utiliser ce sélecteur .ie dans votre feuille de style pour cibler IE toute version confondue. Rien n’empêche d’utiliser plusieurs commentaires pour cibler différentes versions, comme le suggère Yves Van Goethem (dont le code source de la page personnelle – http://yves.vg – a fourni la matière première de ce billet).

Cibler chaque version d’Internet Explorer

Internet Explorer ne tiendra pas compte de la première ligne. Ensuite, on fait un premier tri pour mettre de côté les versions inférieures ou égales à IE6. Plus loin, on isole IE7, et pour finir on cible les versions supérieures ou égales à IE8.

Et le prochain IE9 ?

Si IE9 utilise les commentaires conditionnels de la même manière, il sera toujours temps de modifier la dernière ligne et d’en ajouter une :

Exemple d’utilisation

Dans la feuille de style, on pourra utiliser (au hasard) :

#sidebar { width: 200px; }
.ie6 #sidebar { margin-left: -3px; }

Mise à jour (17/02/2011)

Voici les commentaires conditionnels utilisé par le framework HTML5 Boilerplate :

Articles sur le même sujet

Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

Bruno Bichet — Sun, 14 Mar 2010 20:38:27 +0000

Les hacks CSS sont une utilisation peu conventionnelle des sélecteurs CSS pour s’adresser à un ou plusieurs navigateurs quand on doit servir une propriété ou une valeur CSS spécifique à un ou plusieurs navigateurs. Si IE6 fait la fine bouche devant sa soupe de balises, il peut être intéressant de lui servir le même plat mais dans une assiette différente (la comparaison est bancale). Ces hacks s’utilisent souvent pour cibler des versions spécifiques d’Internet Explorer (généralement IE6 et IE7). Toutefois, il en existe pour Firefox, Opéra, Safari, iPhone, etc. Par ailleurs, je n’utilise pas ces hacks CSS dans ma feuille de style principale, mais uniquement dans une CSS réservée à IE via les commentaires conditionnels.

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

De cette manière, les règles CSS placées dans ie.css s’adressent uniquement à Internet Explorer ; les autres navigateurs considèrent ces commentaires conditionnels comme de simples commentaires HTML. Ça va sans dire mais encore mieux en le disant : les déclarations situées dans style.css s’appliquent aussi à Internet Explorer ce qui implique que l’appel à ie.css doit se situer après style.css pour surcharger les déclarations qui posent problème.

Note : il existe une forme de commentaires conditionnels qui permet de cibler tous les navigateurs sauf Internet Explorer : IE Windows ne lira pas ça

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

En revanche, si vous avez également besoin d’une valeur différente pour IE8, il faudra prendre soin d’ajouter la règle CSS #search .submit { margin-top: -7px; } au-dessus des deux autres, soit :

#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 ;)

24 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

IE6 et inférieurs
```
* html .test  { color: red }
```
IE7
```
*:first-child+html .test { color: red }
```
IE7, Firefox, Safari, Opera
```
html>body .test { color: red }
```
IE8, Firefox, Safari, Opera (Tout sauf IE 6,7)
```
html>/**/body .test { color: red }
```
Opera 9.27 et inférieurs, Safari 2
```
html:first-child .test { color: red }
```

Safari 2 — 3

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

safari 3+, Chrome 1+, Opera9+, Firefox 3.5+
```
body:nth-of-type(1) .test { color: red }
```
Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+
```
body:first-of-type .test { color: red }
```

Safaris 3+, Chrome1+

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

iPhone / Webkit mobile

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

Safari 2 — 3.1

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

Safari 2 — 3.1, Opera 9.25
```
*|html[xmlns*=""] .test { color: red }
```
Safari — Chrome
```
.test { [color: #000000; }
```
Tout sauf IE6 — 8
```
:root *> .test { color: red  }
```
IE7
```
*+html .test { color: red }
```
Uniquement Firefox. 1+
```
.test,  x:-moz-any-link  { color: red }
```

Firefox 3.0+

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

Hacks sur les attributs

IE6
```
.test { _color: blue }
```

IE6, IE7

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

Tout sauf IE6
```
.test { color/**/: blue }
```
IE6, IE7, IE8
```
.test { color: blue\9 }
```
IE7, IE8
```
.test { color/*\**/: blue\9 }
```

IE6, IE7 — fonctionne comme !important

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

IE8
```
.test { color: #0000FF\0; }
```

Articles sur le même sujet

Feuille de style CSS conditionnelle avec Conditional CSS

Bruno Bichet — Wed, 11 Mar 2009 21:29:37 +0000

Conditional-CSS est un programme écrit en php4 et php5 (au choix) qui permet d’utiliser des commentaires pour cibler une dizaine de navigateurs par leur nom et leur version, à la manière des commentaires conditionnels ciblant les différentes versions d’Internet Explorer.

Les commentaires conditionnels de Conditional-CSS peuvent s’appliquer à l’ensemble d’une règle CSS ou à une seule de ses propriétés. Voici un exemple d’utilisation :

/* Conditional-CSS example */
a.button_active, a.button_unactive {
    display: inline-block;
    [if lte Gecko 1.8] display: -moz-inline-stack;
    [if lte Konq 3.1] float: left;
    height: 30px;
    [if IE 5.0] margin-top: -1px;
    text-decoration: none;
    outline: none;
    [if IE] text-decoration: expression(hideFocus='true');
}

Voici les navigateurs pris en charge par le script :

Internet Explorer
Internet Explorer Mac
Gecko (Firefox etc)
Webkit (Safari etc)
Opera
Konqueror
Safari Mobile (iPhone, iPod)
IE Mobile
PSP Web browser

Même si je ne suis pas fan de ce genre de technique — qui automatise d’une certaine manière les hacks CSS souvent décriés — force est de reconnaitre que l’auteur de c-css à fait du beau travail. Je garde l’adresse sous le tapis de souris : on ne sait jamais ;)

Articles sur le même sujet

Contribution au guide stylistique pour HTML et CSS

Bruno Bichet — Mon, 03 Nov 2008 06:41:34 +0000

Florent Verschelde lance le projet de rédiger un guide stylistique (charte rédactionnelle ou conventions de codage) pour les langages HTML et surtout CSS sous l’égide d’Alsacreations. Une description de ce projet est disponible dans ce document. Voici ma modeste contribution à cette première étape du projet qui consiste en deux séries de questions pour sonder les professionnels du web sur leurs habitudes de travail en matière de mise en forme du code.

Comment j’écris mon HTML

Quelle version de HTML ou XHTML utilisez-vous ?

Même si je m’applique à écrire du XHTML 1.0 strict, j’utilise le doctype XHTML 1.0 Transitional qui permet une certaine souplesse quand on travaille sur des documents susceptibles d’accueillir toutes sortes de fioritures comme des target=_blank ou des iframe en veux-tu en voilà ;)
Respectez-vous des règles strictes pour l’écriture des balises et attributs HTML même en HTML 4.01 ?

Oui, je me conforme aux exigeances imposées par le XHTML strict 1.0 : écriture des balises en minuscules, attributs entre guillemets, attributs selected ou checked doublés (selected="selected" ou checked="checked"), auto-fermeture des balises img, br ou input, etc.
Quel usage faites-vous de la validation du code HTML ?

Je prends soin de valider mes pages web régulièrement dans une optique de débuggage du code plutôt que pour la validation elle-même qui ne garantit pas que le document soit lisible par un être humain.
Quel usage faites vous des commentaires HTML ?
Essentiellement pour mettre en valeur les parties principales de la page et indiquer la fin des blocs structurels. J’utilise aussi les lignes vides pour séparer certaines parties du code pour améliorer la lisibilité :
```
    

        
            bla bla
        


        
            bla bla
        


    
```
Quels sont les éléments HTML que vous utilisez le plus ? Y a-t-il une logique précise pour l’utilisation de tel ou tel élément (un P plutôt qu’un DIV, par exemple) ?

En règle général, j’essaie de suivre la logique interne du contenu pour que la page ressemble à quelque chose même si les feuilles de styles sont désactivées : j’abuse des listes ordonnées ou non, des listes de définition, des paragraphes, etc. L’idée est de donner du relief à la page web pour faire ressortir la structure des idées.

Toutefois, il m’arrive d’utiliser une div à la place d’un p lorsque le texte à baliser ne contient qu’une ligne et/ou qu’il est isolé sémantiquement parlant. C’est le cas de la baseline notamment.
Dans certains cas, il peut m’arriver d’ajouter un span :
```
Ma baseline est top
```
L’avantage ? Dans certaines mises en forme, ça permet de donner une largeur explicite à la balise div, tout en jouant à volonté sur le padding du span sans casser la mise en page à cause d’une mauvaise interprétation d’un modèle de boite pas toujours intuitif.
Quel usage faites-vous des éléments génériques DIV et SPAN ?

Même si cela semble aller à l’encontre de ma réponse précédente, je commence par structurer ma page dans les grandes lignes avec la position des différents « blocs » à l’esprit. Comme il s’agit souvent de découper un template réalisé sous Photoshop, il serait hypocrite de faire comme si seul le sens avait de l’importance… Je place donc mes div dans mon document HTML puis je les reportent dans mon fichier CSS.

Les balises div me servent surtout à diviser le contenu en blocs gérés ensuite via la feuille de style : création de colonnes, application de background, etc. J’essaie de garder une logique « sémantique » à mes découpages, même si la plupart du temps, il faut bien avouer que certains bloc sont réunis uniquement à des fins de présentation ou de position dans le code…

J’utilise assez peu la balise span : elle me sert le plus souvent à donner une couleur différente à une portion de texte ou à intégrer les microformats.
Avez-vous une convention de nommage pour les classes et identifiants ?

Je suis en pleine transition sur cette question. Je me mets doucement à utiliser les futures balises du HTML5 en tant qu’identifiants ou classes pour structurer mes pages web : #header, #footer, .nav, .article, .aside, h1, h2…, .section, etc.

Pour les identifiants ou classes composés de deux termes ou plus, j’utilise le tiret : #sidebar-top ou #main-content-bottom, par exemple.

Comme vous pouvez le remarquer, j’utilise plutôt des termes anglo-saxons, généralement plus concis et surtout sans accent : que donnerait en effet une classe .palais-des-congres ^_^v
Dans quels cas utilisez-vous plutôt les classes ou plutôt les identifiants?
Tout dépend du document, mais je privilégie les classes autant que possible. Ainsi, pour atteindre les élement menu, j’utilise plus volontiers :
```
#header .menu {...}
#sidebar-1 .menu {...}
```
plutôt que :
```
    #menu-1 {...}
    #menu-2 {...}
```
Ce qui permet d’avoir des éléments communs non dupliqués pour la classe .menu. Toutefois, en fonction des projets, la deuxième solution est parfois préférable. Question de souplesse.

Comment j’écris mes CSS

Quel usage faites-vous de la validation CSS ?

Je n’utilise que très rarement la validation pour mes feuilles de styles : les fautes de syntaxes sont généralement rédhibitoires (le comportement voulu n’apparait pas) et je sais généralement quand j’utilise une propriété « propriétaire »…

Comment utilisez-vous les commentaires en CSS ? Avez-vous des «styles» précis pour différents types de commentaires (capitales, étoiles ou autres symboles dans le commentaire, etc.) ?

Un exemple vaut mieux qu’un long discours :

/*-----------------------------------------------------------------------
Nom de la feuille de style : styles.css
Date création : le 02/11/2008
Description : Feuille de style principale pour le projet xxx
Sommaire :
@reset
@utilitaires
@document
-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
                                     @RESET
-----------------------------------------------------------------------*/

@import "css/risette.css";

/*-----------------------------------------------------------------------
                                    @UTILITAIRES
-----------------------------------------------------------------------*/
.prout {
    voice-family: announcer, male;
}

/*-----------------------------------------------------------------------
                                    @DOCUMENT
-----------------------------------------------------------------------*/
#container {
    margin: 0 toto;
}

    #header { /* ie.css */
        height: 75px;
    }
        #logo {
            background: url(img/logo.png) no-repeat;
        }

Utilisez-vous des sélecteurs «verbeux» (le plus précis possibles et reprenant le contexte d’utilisation de l’élément), ou au contraire les plus courts possibles ? Ou bien une solution intermédiaire ?
Quand je ne suis pas le seul à intervenir sur le projet (la plupart du temps) je suis assez « verbeux » :
```
#header #logo h1 {...}
```
ou
```
    h1#logo {...}
```
Voire
```
    #logo {...}
```
plutôt que
```
    h1 {...}
```
Note : pour des questions de performance, il est préférable d’utiliser la forme #h1-logo {...} qui semble la syntaxe préférée des navigateurs.
Comment utilisez-vous les espaces, retours à la ligne, lignes vides et indentations ? Pouvez-vous fournir un exemple-type ?
Voici un exemple assez représentatif de mes habitudes en la matière :
```
#container {
    width: 950px;
    margin: 0 auto;
    font: 1.2em/1.5 Helvetica, Arial, sans-serif;
}

    #header {
        width: 950px;
        height: 95px;
        background: transparent url() no-repeat center;
    }

    #main-content {
        overflow: hidden; /* zoom: 1; dans ie.css */
    }
        #content {
            float: left;
            width: 700px;
            margin-right: 20px;
        }
        #sidebar {
            float: left;
            width: 230px;
        }

    #footer {
        width: 950px;
        clear: both;
    }
```
J’ai pris l’habitude de mettre un espace entre les deux-points et la valeur pour des raisons de lisibilité. Par ailleurs, je laisse toujours le point-virgule à la fin de la dernière déclaration. De nombreux intégrateurs et développeurs trouvent plus lisible d’écrire :
```
#content {float:left;width:700px;margin-right:20px;}
#sidebar {float:left;width:230px;}
```
Leur argument principal est que cette disposition permet de voir plus de sélecteurs et d’économiser des lignes. Je tiens à rappeller que de nombreux logiciels (Dreamweaver, TopStyle Light, etc.) disposent d’une telle vue. Sans compter des services comme cleancss qui le font automatiquement !
Regroupez-vous les blocs de déclarations (sélecteurs + leurs propriétés) de manière logique ou prévisible? Quelle est la logique utilisée, et dans quel ordre les placez-vous ?
J’essaie de suivre au mieux la structure du document HTML lui-même. Comme le montre l’exemple ci-dessus, sauf si je dois regrouper des déclarations pour leur attribuer des propriétés communes. Dans ce cas, je les place comme suit :
```
#header,
#footer {
    width: 100%;
}

#header {
    padding: 3em;
}
#content {
    width: 950px;
}
#footer{
    padding: 1em 3em;
}
```
Utilisez-vous des indentations multiples (jusqu’à plusieurs niveaux d’indentation) pour, par exemple, refléter la structure du code HTML ?

Oui, voir l’exemple donné plus haut ;)
Utilisez-vous les propriétés de raccourci ? Si oui, les utilisez-vous systématiquement et en priorité, ou seulement lorsque cela permet de gagner quelques déclarations (propriété + valeur) ?

j’utilise les raccourcis le plus souvent possible, notamment pour les propriétés font, background, margin, padding, list-style et border.
Respectez-vous un ordre précis pour les propriétés CSS (ordre alphabétique, ordre «logique», etc.) ? Si besoin, pouvez-vous le détailler ?

Je place d’abord les propriétés les plus impactantes sur le design comme float, width, height, etc. et je place ensuite les plus longues à la fin : border, list-style, font, background, etc.

Ca tombe bien, car ces dernières sont souvent des propriétés plus visuelles que structurelles, ce qui permet de séparer le fond de la forme au sein même des déclarations CSS !
Dans une feuille de styles relativement longue (plus de quelques dizaines de ligne, et jusqu’à des centaines ou milliers de lignes), comment organisez-vous les différents styles ?

Si le nombre de page est faible mais que la feuille de style CSS est très longue, j’utilise les commentaires pour séparer les différentes parties.

Si le nombre de page est important, je fais une feuille de style par page après avoir réunis les éléments communs dans styles.css, soit : index.css pour index.php, inscription.css pour inscription.php ou 404.css pour 404.php, etc.
Utilisez-vous plusieurs feuilles de styles pour un projet de «petit» site (moins de dix pages-type). Utilisez-vous plusieurs feuilles de styles pour des projets plus conséquents? Comment séparez-vous les différents styles: par type de propriétés CSS, par type de page, etc. ?

J’ai essayé plusieurs méthodes pour devenir pragmatique : je fais au mieux en fonction du projet, du délai et du nombre de personnes susceptibles d’intervenir sur le fichier. Un découpage des CSS comme typography.css, layout.css, html.css, color.css, etc. suppose des habitudes de travail en commun et des connaissances similaires en CSS, ce qui n’est pas toujours le cas quand on travaille en équipe. De fait, le découpage par page (cf. réponse 9) est souvent mieux compris donc les pertes de temps et les erreurs sont moins nombreuses.
Utilisez-vous des hacks CSS ?

Oui et non. Voir plus bas ;)
Utilisez-vous les commentaires conditionnels pour Internet Explorer? Si oui, comment procédez-vous?

En général, j’utilise un commentaire conditionnel pour cibler les versions inférieures à Internet Explorer 8 :

Ensuite, à l’intérieur de ie.css, j’utilise des hacks CSS pour cibler IE6 ou IE7 :
```
div { Pour s'adresser à toutes les versions inférieures à IE8 }
* html div { Pour s'adresser à IE6 }
html>body div { Pour s'adresser à IE7 }
```
En supposant bien sûr que IE8 se comporte à l’avenir selon les standards du web. Dans le cas contraire, en fonction des cas, il faudra soit mettre à niveau le commentaire conditionnel (lte IE 8) et trouver un hack CSS spécifique à IE8 différent à la fois de IE6 et IE7, soit lier une feuille de style spécifique pour IE8 en plus de celle prévue pour les versions inférieures d’Internet Explorer…

En bref

J’ai pris un réel plaisir à me pencher sur ces questions et comme je ne voudrais pas être le seul à en profiter, je vous invite à participer à ce projet, que vous soyez professionnels ou amateurs éclairés ! L’important est que vous pratiquiez régulièrement les langages HTML et CSS pour avoir développé quelques habitudes et que vous ayez envie de les partager.

Articles sur le même sujet

IE6 — Gérer la transparence du format PNG 24 bits

Bruno Bichet — Mon, 20 Oct 2008 21:38:47 +0000

Le format PNG autorise jusqu’à 256 niveaux de transparence qui ne sont pas pris en charge par Internet Explorer 6. La dégradation grâcieuse n’étant pas toujours possible, je me suis rafraichis la mémoire sur les différentes manières d’utiliser le filtre AlphaImageLoader. J’ai fini par tomber sur une solution globale pour gérer cette transparence même en présence d’un background-repeat ou d’un background-position ! (Cet article est en quelque sorte la suite de Opacité CSS et effet de trame avec GIF/PNG transparent.)

Le format PNG

Le PNG est format d’enregistrement d’image destiné à remplacer le format GIF dans sa version 8 bits. La version 24 bits en RVBa — qui comprend plus de 16 millions de couleurs — autorise jusqu’à 256 niveaux de transparence très utiles en webdesign pour superposer deux images dont celle du dessus laisse transparaitre celle du dessous.

Malheureusement, IE6 ne comprend rien à ces différents niveaux de transparence : il faut ruser, c’est usant. Certains préconisent la dégradation grâcieuse : utiliser la transparence dans les navigateurs qui la prennent en charge et servir autre chose au dernier de la classe : un PNG 8 bits avec une seule couleur de transparence, fusionner les deux images censées se superposer, voire même utiliser une image légèrement différente.

Après tout, les visiteurs ne sont pas toujours des développeurs web utilisant plusieurs versions de navigateurs pour traquer la moindre différence de rendu. Si vous pouvez vous le permettre, foncez ! Dans le cas contraire, il faudra recourir à des solutions plus ou moins fonctionnelles selon que l’image en question se trouve placée en background d’un élément (une div, par exemple) ou dans une balise img. Si votre image transparente est placée sur un fond uni, il reste la possible de modifier l’image par voie logicielle :

Modifier le chunk (segment) bKGD des png

Un image au format PNG est composée de différents segments (chunks) dont le fameux bKGD qui spécifie une couleur de fond par défaut. A noter que les agents utilisateurs (navigateurs, logiciels, etc.) ne sont pas tenus de respecter cette couleur et peuvent en utiliser une autre. Dans IE6, cette couleur se rapproche d’un gris-vert tirant sur le turquoise…

Certains logiciels comme TweakPNG permettent de modifier la valeur de bKGD. Si vous disposez d’un fond de couleur uni, il suffit d’y mettre la couleur du fond sur laquelle est placé votre image contenant des zones transparentes.

Dans le cas contraire, les filtres Microsoft sont nos amis :

Le filtre `AlphaImageLoader` de Microsoft

Internet Explorer (depuis la version 5.5) inclut un mécanisme de filtres propriétaires filter dont AlphaImageLoader qui gère la transparence des png 24 bits. L’utilisation du filtre diffère selon que l’image est appelé via la balise img ou en tant que background d’un autre élément.

Appliqué sur une balise `img`

Applique le filtre sur les images dont la classe CSS est .img_png à l’intérieur d’une feuille de style réservée à IE6 avec les commentaires conditionnels. Il suffit de renseigner la source de monImageTransparente.png dans la variable src :


.img_png {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pix/monImageTransparente.png', sizingMethod='image');
}

Appliqué sur une image en `background`

Pour les navigateurs tenant compte de la transparence, vous aurez la règle CSS :


.div_png {
    width: 100px;
    height: 150px;
    background: url(../pix/monImageTransparente.png) no-repeat;
}

Pour Internet Explorer 6, il faudra utiliser :


.div_png {
    width: 100px;
    height: 150px;
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pix/monImageTransparente.png', sizingMethod='scale');
}

Notez l’attribut sizingMethod qui peut recevoir les valeurs image, scale ou crop (via l’excellente FAQ du forum d’Alsacréations.) :

image – Réduit ou élargit le bloc pour correspondre aux dimensions de l’image (valeur par défaut),
scale – Etire l’image aux dimensions du bloc,
crop — Rogne l’image pour qu’elle tienne dans le bloc.

Quelques contraintes

La source de l’image doit être relative au document HTML qui l’affiche et non à la feuille de style CSS qui la réclame. De sorte qu’une image se trouvant dans un dossier images appelée dans un fichier CSS se trouvant dans un dossier css ne devra plus se trouver sur le chemin ../pix/monImageTransparente.png mais sur pix/monImageTransparente.png.
Les liens contenus dans un élément HTML possédant une images de fond transparente ne sont plus cliquables, les champs input ne sont plus accessibles et le texte n’est plus sélectionnable. Une manière générale d’y remédier est d’ajouter une déclaration du type :
```
.div_png a,
.div_png input {
    position: relative;
    z-index: 1;
}
```
Pour plus d’information sur cette question, lire le fil de discussion paru sur le forum d’Alsacréations et la synthèse rédigée par Frank Galey.
Il n’est pas possible d’utiliser les propriétés background-repeat et background-position avec une image PNG transparente en background.
Il est difficile d’utiliser des événements de style rollover pour permuter des images de fond au passage de la souris.

Passez-moi l’expression !

C’est assez contraignant. Heureusement, le web est rempli de gens de bonnes volonté qui se sont retroussé les manches pour nous offrir des solutions sur un plateau. Voyez plutôt :


* html img,
* html .png {
    position:relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Trouvé sur komodomedia via babylon-design.

Le * html est là uniquement pour cibler IE6. Vous pourrez donc vous en passer si vous utilisez une feuille de style dédiée à ce navigateur. Ne fonctionne pas si Javascript est désactivé. Nécessite une image transparente de 1px de côté (transparent.gif).

Note : il sera peut-être nécessaire d’ajouter un z-index: 1; pour éviter les problèmes de liens, d’éléments de formulaire ou de sélection de texte évoqués plus haut.

Une solution globale avec iepngfix

Il existe de nombreux scripts permettant d’automatiser avec plus ou moins de bonheur cette gestion de la transparence des images PNG. Ils mettent tous en oeuvre le filtre AlphaImageLoader soit dans un fichier Javascript, soit dans un fichier HTC. Parmi tous les scripts existants, j’ai retenu iepngfix de TwinHelix que m’a conseillé Oncle Tom sur Twitter.

Ce composant HTC gère la plupart des contraintes énoncées plus haut, y compris l’absence de prise en compte de background-repeat et background-position dans iepngfix version 2.0 Alpha 3.

Le script est très simple à utiliser :

Copiez les fichiers *iepngfix.htc* and *blank.gif* dans le dossier de votre site web,
Copiez la déclaration CSS suivante dans votre feuille de style ou votre fichier HTML :
```
    img, div {
        behavior: url(iepngfix.htc);
    }
```
Vous pouvez placer dans ce sélecteur CSS toutes les balises HTML, les identifiants ou les classes pour lesquels vous désirer activer la gestion de la transparence des PNG. Séparez-les simplement par une virgule.
N’oubliez pas que le chemin vers les fichiers *iepngfix.htc* et *blank.gif* est relatif au document HTML et non à la feuille de style CSS.
Si votre site est composé de sous-dossier, n’hésitez pas à ouvrir le fichier *iepngfix.htc* dans un éditeur de texte pour modifier la variable `blankImg` afin de la faire pointer vers votre pixel transparent. Par exemple : `IEPNGFix.blankImg = ‘/images/blank.gif’;`

Cette fois encore, le chemin doit être relatif au document HTML. Si vous désirez activer la prise en charge des propriétés *background-repeat* et *background-position* assurez-vous d’inclure le fichier Javascript *iepngfix_tilebg.js* dans votre document HTML :
Dans certains cas, il sera nécessaire d’envoyer le bon type MIME à Internet Explorer 6. L’auteur du script a prévu un fichier *iepngfix.php* qui inclut le fichier *iepngfix.htc* tout en renvoyant le type MIME `text/x-component` associé aux fichiers `.htc` :
```
    img, div, a, input {
        behavior: url(/css/resources/iepngfix.php);
    }
```
Pour améliorer les performances, soyez le plus sélectif possible : préférez un `#img_header` ou un `.img_png` à l’utilisation de la balise `img` seule, sauf bien sûr si toutes vos images ont besoin du script !
Il se peut que le fond gris-vert apparaisse brièvement lors du chargement de l’image. Si vous ne voulez pas ce comportement (notamment sur les grandes images), vous n’aurez qu’à revenir à une utilisation « manuelle » du filtre *AlphaImageLoader* comme indiqué dans la première partie.

N’hésitez pas à consulter le fichier *iepngfix.html* présent dans l’archive *.zip* qui apporte une palanquée d’informations, de trucs et d’astuces pour utiliser le script et remédier aux problèmes d’utilisation.

Une nouvelle solution globale avec DD_belatedPNG

DD_belatedPNG semble faire l’unanimité autour de lui pour sa légèreté et son efficacité, y compris lorsqu’on l’utilise avec background-position ou background-repeat. Le script s’utilise très simplement :

La classe .png_bg n’est qu’un exemple et vous pourrez utiliser un ou plusieurs sélecteurs à votre convenance, tels que :

Conclusion

Ce sujet semble inépuisable, ce qui n’est pas mon cas. Je laisse cet article en version bêta pendant quelques temps histoire de laisser décanter le sujet : il serait étonnant que des erreurs ou inexactitudes ne se soient pas glissées sous le tapis de souris ;)

Ressources externes

Généralités sur le format PNG

Gérer la transparence du PNG par voie logicielle: Ce logiciel permet d’accéder aux informations contenues dans un fichier PNG dont notamment le chunk (segment) bKGD pour modifier la couleur de fond sur laquelle s’applique la transparence (un fond gris/vert/turquoise par défaut dans ie6). Vous trouvez quelques explications concernant son utilisation sur; Logiciel très pratique et simple d’emploi pour améliorer la compression des images au format PNG. Il suffit de faire glisser les images que vous voulez améliorer et le PngOptimizer s’occupe du reste. Possède quelques options pour manipuler les chunks ou garder une version de l’image d’origine.; C’est peu connu, mais les spécifications du format PNG 8 bits autorisent plusieurs couleurs dans le segment Alpha, ce qui permet de spécifier plusieurs couleurs transparentes en utilisant un logiciel approprié comme Fireworks. Voilà une bonne technique pour s’autoriser une dégradation grâcieuse des images transparentes sous Internet Explorer 6 !; Un peu hors-sujet par rapport à la transparence des PNG, je signale l’existence d’un plugin pour Photoshop qui permet d’optimiser le poids des images PNG : le plugin installé par défaut dans Photoshop ne rend pas vraiment justice aux possibilités de compression de ce format.
Quelques scripts: Version 1.0 et version 2.0 Alpha 3 du script iepngfix. Gère les background-repeat et background-position dans la version Alpha à l’aide d’un fichier Javascript supplémentaire.; Ce script est proposé par Yves Van Goethem. Nombreuses options disponibles réservées à un public averti ;); Fichier Javascript gérant la plupart des pièges posés par l’application du filtre AlphaImageLoader.; Avec Unit PNG Fix pas besoin de définir des classes ou de cibler vos éléments. Fonctionne avec les balises img ou sur les background-image. Très léger. Merci à 13sportif pour le lien.; Expression Javascript permettant de gérer la transparence des PNG en img ou en background; Script très léger et pratique. S’applique à toutes les images PNG de votre document. Toutefois, certaines images restent en mode téléchargement alors quelles sont bien affichées, ce qui peut donner l’impression au visiteur que quelque chose ne tourne pas rond sur le site. Malgré tout, ce script vieillissant peut encore rendre quelques services : il m’a rappellé l’existence de l’attribut defer="defer" de la balise script qui permet de différer le chargement (ou l’application) du script en question. Voir cet article très complet sur l’analyse de defer.; Propose une version modifiée du script précédent pour les champs de formulaires `
`: Encore un Javascript à se mettre sous la souris ! Crée une balise div dans laquelle est affichée l’image traitée par le filtre DirectX :; Plus ou moins la même chose avec un composant HTC.; Une solution originale en PHP.
Autres ressources sur la transparence des PNG: La blonde propose avec pédagogie un récapitulatif des différentes méthodes pour gérer cette transparence sur 256 niveaux.; Présente de nombreuses solutions et contournement pour afficher les images transparentes.; La FAQ du forum Alsacréations sur comment obtenir la transparence des PNG avec Internet Explorer 6; Tutoriel pour pallier les effets secondaires du filtre AlphaImageLoader en cas de positionnement absolu.; Mise en garde d’Eric Daspet sur l’utilisation des filtres : Si vous l’utilisez pour une petite icône de présentation qui apparaît vingt fois dans votre page, c’est vingt exécutions du filtres qui sont faites. À chaque exécution du filtre le rendu est bloqué, en attente. Sur Yahoo! Search en retirant AlphaImageLoader de la feuille CSS c’est jusqu’à 100ms qu’ils ont gagné (information donnée par Stoyan Stefanov sur sa dernière présentation).; Article très instructif sur la transparences du format PNG et l’application de AlphaImageLoader

Articles sur le même sujet

Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels

Bruno Bichet — Thu, 17 Apr 2008 15:05:10 +0000

Les hacks CSS, c’est pas bien ; les commentaires conditionnels, c’est mieux. Pour autant, je ne vois pas d’inconvénient à utiliser quelques hacks à l’intérieur d’une feuille de style réservée à Internet Explorer à l’aide des commentaires conditionnels. En effet, pourquoi ajouter une requête inutile en ciblant chaque version de IE quand on peut régler le problème une fois pour toute ?

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
}

Et à IE7 :

html>body div {
blablabla
}

IE6 et IE7 étant ciblés naturellement par le commentaire conditionnel suivant :

Espérons que IE8 sera bien conforme aux recommandations du W3C !

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 ;)

Note : Mise à jour de cette technique pour prendre en compte IE8 dans le fichier ie.css et liste des hacks CSS dans l’article Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

Articles sur le même sujet

Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?

Bruno Bichet — Fri, 22 Jun 2007 00:02:06 +0000

Dans le prolongement du billet précédent concernant une mise en pages CSS avec la propriété float, je me suis intéressé aux différentes manières de styler la balise hr pour rétablir le flux après en avoir sorti des éléments en les faisant flotter à gauche ou à droite. J’utilise généralement hr avec le traditionnel clear: both et visibility: hidden et je jongle ensuite avec les marges ou la hauteur pour espacer les éléments. Or, depuis que j’utilise le reset.css d’Eric Meyer, j’ai tendance à supprimer les marges de tout ce qui bouge, mais cette chère règle horizontale reste récalcitrante à la remise à zéro cross browser…

Un HR cross-browser cachère

Il existe heureusement des solutions pour palier les insuffisances du dernier de la classe. L’une d’entre elles repose sur l’application d’un margin-top et margin-bottom négatif :

hr { height: 1px; margin: -0.5em 0; padding: 0; color: #F00; background-color: #F00; border: 0; }

J’ajoute à celà les propriétés clear: both et visibility: hidden, je mets la hauteur à zéro et je supprime les couleurs pour obtenir un spacer de bon aloi. Les valeurs de margin ne convenant pas dans mon cas, j’ai tâtonné pour trouver une valeur satisfaisante :

hr {
     height: 0;
     margin: -1.2ex 0;
     padding: 0;
     border: 0;
     clear: both;
     visibility: hidden;
 }

Une autre solution trouvée cette fois sur ultra-fluide transforme le hr en bloc pour mieux maitriser son comportement dans le but de créer une ligne rouge horizontale de 1 pixel d’épaisseur sans marge :

hr {
     display:  block;
     height: 1px;
     margin: 0;
     _margin: -7px 0;
     padding: 0;
     color: #F00;
     background-color: #F00;
     border: 0;
 }

Pour mes besoins, j’applique la recette précédente :

hr {
     display: block;
     height: 0;
     margin: 0;
     _margin: -7px 0;
     padding: 0;
     border: 0;
     visibility: hidden;
 }

Il y a bien ce _margin qui peut être gênant, mais il reste toujours la possibilité de le caser dans une feuille de style dédiée à IE avec les commentaires conditionnels.

La différence avec la méthode précédente est qu’une fois transformé en block (l’auteur de l’astuce ayant habilement déterminé que le hr se comportait par certains côtés comme un élément en ligne) le margin: 0 suffit à supprimer les marges pour les navigateurs modernes. le _margin: -7px 0 s’adressant plus spécifiquement à IE6. Reste à savoir comment se comporte IE7 dans les mêmes circonstances.

Deux, c’est trop

Ces deux techniques fonctionnent assez bien pour donner le même rendu aux traits horizontaux ou pour rétablir le flux. Malheureusement pour moi, j’ai deux blocs imbriqués contenant des float: left et float: right, ce qui implique deux hr l’un en dessous de l’autre :

Ces deux hr successifs m’ennuient (un peu) car en l’absence de prise en charge des feuilles de style, je me retrouve avec deux vilains traits de séparation. Et puis, si je me suis mis à utiliser le reset.css, c’est pour éviter au maximum d’utiliser des CSS spécifiques à certains navigateurs, alors, bon…

Je tiens à préciser que j’utilise généralement clear: both sur le blocs eux-mêmes au lieu de créer un spacer superflu. Mais curieusement, les blocs en question se retrouvaient sous les colonnes latérales… la technique utilisée pour créer les colonnes latérales reposant également sur la propriété float, j’ai le sentiment qu’au bout d’un moment on se retrouve dans la situation où il devient interdit d’interdire à un bloc d’avoir des voisins à droite ou à gauche : les spacers indépendants deviennent indispensables.

C’était mieux avant ?

Avant d’utiliser les hr pour rétablir le flux, j’utilisais une

qui fonctionnait furieusement bien malgré l’absence de sémantique associée :x

Styler la balise BR

J’ai essayé d’utiliser la balise br en lui associant un clear: both. Tout a l’air de fonctionner, mais si le flux est bien rétabli sous Firefox, IE6 ne passe pas le test de la bordure : elle n’encadre pas l’ensemble de la div comme si un clear: both n’avait pas d’effet sur un br…

C’est dommage parce que lorsqu’il s’agit simplement de rétablir le flux et non de créer une séparation entre deux contenus, cette balise br aurait presque été sémantique : un retour à la ligne… Que demander de mieux (oué, que ça fonctionne sous IE6, je sais…) ?

Je garde cette solution sous le coude pour tests complémentaires. En attendant, j’ai trouvé sur dimension-internet un gabarit utilisant la balise br pour rétablir le flux :

br.clearfloat {
     clear: both;
     height: 0;
     font-size: 1px;
     line-height: 0px;
 }

La rustine

En désespoir de cause, je me suis résolu à utiliser

lorsqu’il s’agit seulement de rétablir le flux, et lorsque j’ai besoin de séparer aussi des contenus :

.spacer {
     clear: both;
 }
.spacer hr {
     display: none;
 }

Ce n’est pas super CHIC, mais au moins la feuille de style est allégée et ne nécessite ni hacks ni commentaires conditionnels. Si j’utilise souvent ces derniers, ça m’ennuie de les mettre en place pour une ou deux déclarations seulement. Bien évidemment, j’utilise et je recommande fortement l’usage du hr pour rétablir le flux lorsqu’un espacement est souhaité entre deux blocs, ou mieux encore, l’application du clear: both sur les blocs eux-mêmes.

Quelques mots sur la remise à zéro des éléments HTML

Au cours de mes recherche sur hr, je suis tombé sur une intervention de Florent V. qui fait part de ses réserves quant à l’utilisation d’une remise à zéro des éléments. L’utilisation d’un reset présente selon lui deux écueils. D’une part, il serait facile d’oublier de styler une balise et d’autre part, il ne serait pas souhaitable de vouloir tout maîtriser : un peu de lâcher prise serait bienvenue.

Si je partage cette dernière opinion, je ne suis pas totalement d’accord avec la première : les balises HTML ne sont pas en nombre infini, et au pire, en cas d’oubli, il est facile de palier le problème. Pour ma part, en complément de reset.css, j’utilise un fichier html.css pour donner un nouveau style « par défaut » aux éléments HTML.

Ce fichier est similaire à la partie /* basics / de l’exemple fourni par david larlet de biologeek. Notons que la partie / reset */ de ce fichier ne reprend qu’une partie du reset.css d’Eric Meyer.

Faire reset, c’est rigolo tout le temps ?

Il y a évidemment des cas où l’utilisation d’un reset est à prendre avec des pincettes : lorsque vous intervenez sur une partie d’une page déjà construite, ou dans une moindre mesure, lorsque d’autres personnes sont susceptibles d’intervenir. Je ne conseillerais pas non plus l’utilisation de la remise à zéro dans le cadre d’une formation : si vous commencez l’étude des CSS, il vaut peut-être mieux connaître les bases avant de faire table rase ;)

En guise de conclusion

En tout état de cause, si la théorie nous dicte la bonne conduite à tenir, force est de constater que la pratique nous joue parfois des tours de cochons ^_^

Mise à jour du 28/02/08 : la deuxième partie intitulée Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire vient de sortir.

Articles sur le même sujet

Twitter : Signal social, microblogging et moblogging

Bruno Bichet — Sat, 14 Apr 2007 16:00:29 +0000

Dans la série je suis un garçon influençable, en voici la preuve : comme tout le monde, j’ai entendu parler de Twitter qui permet de laisser des traces de ce qu’on est en train de faire. Ce site se situe à à mi-chemin entre le microblogging , le moblogging et le signal social. Votre status est visible par tous sur la page d’accueil de Twitter pour participer au Zeitgeist ; par vos amis pour garder le contact ; ou bien encore sous la forme d’un widget à placer sur un blog pour permettre à vos lecteurs de suivre votre vie quotidienne… ou pas. C’est vous qui écrivez, c’est vous qui choisissez !

Je trouvais l’idée sympathique, mais sans plus. Jusqu’à ce que je lise le billet de Vinch. Et hop ! me voilà sur Twitter. Je lis, je m’inscris, et je suis là, à choisir une couleur de fond pas trop criarde pour le widget Flash.

Comment ça marche ?

L’inscription terminée, je commence à tester. Le site affiche mon avatar, mon pseudo (avec un lien vers ma page publique), mon status (ce que je suis en train de faire), et le temps passé depuis mon dernier gazouillis (c’est comme ça que l’on peut traduire Twitter).

Sur le widget Flash, il ne reste plus que le status. Deux flèches permettent d’afficher les status précédents et suivants. Le tout dans un petit bloc ni beau ni moche dont on peut choisir la couleur.

J’allais passer sans m’en rendre compte du côté obscur, quand je suis tombé sur la version brute de fonderie du widget : un honnête Javascript à copier-coller où je veux.

Pour résumer, le script splitte le texte du status et le temps passé depuis ma dernière utilisation, puis écrit le résultat avec innerHTML dans deux balises span qu’il suffit de styler – ou de changer !

Pour ma part, j’ai utilisé la balise blockquote pour l’affichage du status que je considère comme une citation, et une balise p pour le temps passé depuis la dernière mise à jour.

L’affichage du temps est réalisé par le script (simple copié-collé), de sorte que j’ai pu le personnaliser. J’aurais pu tout aussi bien le supprimer, mais il ne serait rien resté du concept Twitter déjà minimaliste ;)

J’ai été agréablement surpris par l’absence totale de publicité sur cette version Low Tech : on dirait vraiment que c’est moi qui l’ai fait ;)

En revanche, je suis moins satisfait par les temps de réponse du script qui ont tendance à ralentir le chargement de la page de temps à autre.

Pourquoi ça marche ?

Le succès grandissant de Twitter et le buzz énorme sur le service ont provoqué moult réactions plus ou moins favorables aux gazouilleurs. Twitter divise la blogosphère :

Une grande partie trouve que ça ne sert strictement à rien, et qu’il est même indécent d’étaler sa vie quotidienne dans ce qu’elle a de plus banale ou triviale. A ceux-là, je rappellerais seulement le slogan qui accompagna la Twingo en son temps : à nous d’inventer la vie qui va avec… Et toc ;)
Beaucoup trouvent ça inutile donc indispensable. Ce sont souvent des blogueurs qui relayent l’information sans trop s’engager eux-mêmes. Mais au moins ne dénigrent-ils pas un service qu’ils n’ont pas vraiment testé…
D’autres encore, dont je suis, essaient de comprendre le phénomène de l’intérieur tout en s’amusant :)
Et enfin, une majorité de blogueurs ou non-blogueurs trouvent dans Twitter le moyen de diversifier encore plus les moyens de communication pour rester en contact avec leur tribu. Ce qui est l’objectif premier du site.
etc.

C’est pas tout de l’installer, mais je fais quoi avec ?

Pour l’instant, parmi toutes les utilisations possibles, je n’ai pas encore vraiment choisi : 140 caractères c’est court (à peu près la taille d’un SMS). En même temps, ça peut être motivant de faire passer un message en si peu de lettres :

Mon humeur du moment (mais je doute que ça intéresse du monde),
Ce que je suis en train de faire (idem),
Des Haikus (tiens pourquoi pas),
Des citations (idem),
Le site que je suis en train de visiter (pas bête),
Le bon plan de derrière les fagot (idem),
De l’auto-promotion (ouééééé, noooooon),
…

Finalement les idées ne manquent pas. Si de votre côté vous voulez rallonger la liste, n’hésitez pas à squatter les commentaires.

Trucs et astuces pour Twitter tranquille

Il est possible de faire des liens. Mais comme tous les caractères sont comptés il ne reste pas beaucoup de place pour le corps du message. J’utilise donc tinyurl qui échange mes longues URL contre des plus courtes. C’est toujours ça de gagné.

Je peux Twitter de partout…

Outre l’interface du site lui-même, il existe une extension Firefox très astucieuse pour twitter tout en surfant. Par ailleurs, en activant l’option idoine sur le site, et en invitant le contact twitter@twitter.com, je peux utiliser mes 140 caractères sur GTalk ! Malgré tout, je pense rester sur l’interface du site car l’affichage du nombre de caractères restants lors de la saisie est une aide précieuse quand on a tendance à déborder…

… mais pas sur Internet Explorer

En vérifiant mon Twitter sur IE6, je me suis rendu compte qu’il ne gazouillait pas. En attendant de régler le problème, j’ai copié-collé le code HTML résultant du script en ciblant le dernier de la classe via les commentaires conditionnels, et j’ai mis deux citations en attendant.

Un éco-système riche et innovant

Twitter a inspiré des initiatives nombreuses et parfois étonnantes :

twittervision propose une carte du monde affichant en temps réel les utilisateurs en train de gazouiller. C’est assez bluffant : la carte se déplace sous vos yeux (en 1280 x 1024) et affiche une infobulle à l’endroit où le Twitterer twitte.
Le moteur de recherche twitterment affiche les résultats sur deux colonnes. La première affiche les gazouillis associés à votre mot-clé, et la seconde fournit des indications statistiques sur la tendance horaire ou journalière d’apparition du mot-clé, une carte Google (inaccessible à l’heure où j’écris), et quelques mots-clés en relation avec le vôtre pour élargir votre recherche.Vous pourrez aussi comparer la fréquence d’apparition de deux mots-clés. Deux nuages de tags vous renseigneront sur les termes qui montent et ceux qui descendent pour avoir une idée du Zeitgeist Twitterien.
Pour mettre un peu de sémantique dans cette joyeuse anarchie, Gorka Julio propose de mettre en place un nanoformat pour Twitter sur une page wikispaces. En voilà une idée qu’elle est bonne ! Je dirais même que c’est le genre d’idée qui, si elle marche et si le phénomène Twitter continue sur sa lancée, pourrait permettre de structurer le web. Save the web, save Twitter ? Pourquoi pas :)

C’est pas tout mais faut y aller, maintenant !

Maintenant que le vin est tiré, il faut le boire. Je verrais bien à l’usage quoi faire de Twitter. Certainement un mélange de tout ce que j’ai évoqué plus haut.

Reste la dimension « sociale » de Twitter que je découvre à peine et que je vous invite à découvrir vous aussi : Twitter, c’est trop bien pour que seuls les ados en profitent.

Pour conclure, voici quelques liens de blogueurs qui parlent de Twitter

Ils sont plutôt favorables :

Chez Vinch
Chez Stéphanie Booth
Chez xtof
Chez lifehack
Chez LLM, mais c’est Ouriel Oyahon qui régale ;)

Ils sont plutôt contre :

Chez Jacques Froissant
Chez Frederic de Villamil

Articles sur le même sujet

L'expérience utilisateur et l'ergonomie des sites web

Bruno Bichet — Sun, 08 Apr 2007 00:29:12 +0000

Pour faire bonne impression sur les visiteurs, il suffit d’anticiper leurs besoins. Dans ce domaine, ce sont souvent les détails qui comptent le plus. Améliorer l’expérience utilisateur et adapter les fonctionnalités d’un site web en fonction des attentes de chacun permet de satisfaire : ceux qui veulent consulter un site web ergonomique offrant un contenu facilement accessible ; ceux qui veulent un design attractif ; et enfin, ceux qui veulent le grand jeu avec Ajax à tous les étages. Ce billet est ma traduction du dernier article d’Aaron Gustafson Ruining the user experience paru sur A List Apart le 27 mars dernier.

Ruiner l’expérience utilisateur

Pendant un récent voyage d’affaire à Seattle, j’ai passé deux soirées à déguster la cuisine locale. Je me suis régalé à chaque repas, mais je garde de l’un deux un souvenir bien plus marqué. Mais pourquoi ?

Les deux restaurants présentaient de nombreux points communs : les plats étaient alléchants et présentés avec goût ; l’atmosphère était sympathique et chaleureuse ; les menus offraient un large choix de plats tout deux à un prix raisonnable, et le personnel était aux petits soins. Alors qu’est-ce qui fait que le second restaurant m’a laissé un bien meilleur souvenir que le premier ?

Comme souvent dans la vie, ce sont les détails qui comptent le plus. Prenez un verre d’eau, par exemple. Un serveur négligent peut le servir glacé, ou pire encore, vous laisser mourir de soif avant de vous resservir. Alors qu’un serveur bienveillant s’assurera que le niveau de l’eau ne descendra jamais plus bas que la moitié du verre ; les meilleurs vous feront la surprise de trouver le verre que vous venez de finir, rempli à ras bord une nouvelle fois.

Pour nous les ergonomes du web, Il y a beaucoup à apprendre d’une chose aussi simple qu’un verre d’eau.

Qui est le client ?

Quand vous êtes serveur dans un restaurant, vous savez que les gens viennent avec certains besoins et, parfois même, avec quelques attentes. Souvent, le verre d’eau est le « premier contact » avec le client. S’il est rempli rapidement, vous marquez un point, mais ce n’est que le début. En effet, certaines personnes boivent plus vite que d’autres et demandent à être resservies plus souvent. Certains clients ne boiront pas avant d’avoir les plats devant eux. D’autres encore ne toucheront pas à leur bouteille d’eau… ou demanderont peut-être un peu de thé glacé, ou encore autre chose. Au départ, vous ne pouvez vraiment pas savoir à qui vous avez à faire. Et lorsqu’il s’agit d’une table de 4, 6 ou même 10 personnes il vaut mieux s’être préparé à l’avance…

Sur le web, c’est la même chose. Nous faisons de beaux sites qui (nous l’espérons) font une excellente première impression, mais nous devons nous assurer que chaque point d’interactivité renforce cet avis favorable tout au long de la navigation, sinon nous risquons de dilapider le peu de crédit acquis au départ. Ce type de pensée à donné naissance au concept d’amélioration progressive

Sur le web, nous ne savons rien à propos de la personne qui vient visiter notre site. Nous ne connaissons pas le navigateur utilisé. Nous ignorons si le serveur est interrogé depuis un téléphone portable. Nous ne savons pas si le clavier est préféré à la souris. Nous ne savons pas si Javascript (ou même CSS) est activé. Nous ne savons pas si la page doit être imprimée. Nous ne savons pas si l’utilisateur consulte le site à l’aide d’un lecteur d’écran. Nous ne savons vraiment rien…

Alors, que fait-on quand on ne sait rien ? On an-ti-ci-pe.

En tant que développeurs, nous devons pouvoir satisfaire les besoins de nos clients. Et si nous sommes assez pointus, nous pouvons régler leurs problèmes sans qu’ils ne se rendent compte de notre intervention.

Une douche froide ?

Lala.com est un site bâti autour d’une communauté de gens qui aiment la musique. Le système facilite l’échange de CD dans toute la communauté par la poste.

Je ne dirais pas que leur site web est attractif, mais il est utilisable… sauf si Javascript est désactivé.

Vous apprécierez le fait qu’il y a un message indiquant un Chargement en cours alors que rien ne se charge.

Pour régler le problème (la copie d’écran ci-dessus a été prise entre le moment où j’ai commencé à me servir du site comme exemple de ce qu’il ne fallait pas faire et la finalisation de l’article), tout ce qu’ils ont été capable de faire, c’est de ressortir ce vieux message au parfum entêtant datant de la dernière guerre des navigateurs.

Le problème ici n’est pas que le site utilise Javascript, mais qu’il ne fonctionne pas sans. La raison ? Et bien, apparemment, les concepteurs se font plaisir en Ajax-isant tout le contenu. Dans leur précipitation, ils ont entassés tous les trucs du web 2.0 sous le capot et se sont aliénés une bonne partie des utilisateurs du web 1.0, et une part importante du marché des appareils mobiles. Et ils ne sont pas les seuls.

Pensez à ceci : vous êtes un utilisateur de Lala.com, vous êtes proche d’un magasin de disque et vous vous arrêtez sur l’album des Fatals Picards ["Arcade Fire" dans la version originale, NdT]. Vous n’avez pas réalisé qu’il était sorti et voulez l’ajouter à votre liste de souhaits avant de l’oublier. Si votre téléphone mobile ne supporte pas Javascript (ou si vous l’avez désactivé pour réduire le temps/coût de chargement), vous allez vous retrouver devant un écran qui vous donne des informations pertinentes sur Lala, suivies malheureusement du message indiquant que Javascript est nécessaire pour utiliser le site.

Vous ne pouvez pas accéder à votre liste de souhaits ou à quoi que ça soit d’autre, d’ailleurs. Même le champs de recherche (en bas de la page) ne fonctionne pas. Pour une application de type intranet, cela peut être acceptable, mais pour un site web grand public, c’est un désastre.

Réfléchissez avant de servir

Nous avons déjà établi qu’en tant que développeur web nous sommes généralement dans le brouillard quant aux desiderata de nos utilisateurs. Le mieux que nous puissions faire est d’anticiper ce que pourrait être leurs besoins et s’assurer qu’ils sont pris en compte à tout les niveaux pour apporter la meilleure expérience possible. C’est là que l’amélioration progressive entre en scène. Nous devons penser aux besoins des différents types d’utilisateurs et leur apporter une réponse.

Niveau 1 : pas de fioriture
Certains utilisateurs veulent seulement accéder au contenu. Ils peuvent surfer depuis un appareil mobile, chercher à imprimer quelques informations, ou utiliser toutes sortes de périphériques d’assistance pour naviguer. Ils peuvent même avoir désactivé l’affichage des images. En gardant un marquage propre et bien-ordonné et en respectant la sémantique associée aux balises HTML, vous répondrez aux besoins de ces utilisateurs qui veulent consommer léger et afficher les pages rapidement, sans chichi.
Niveau 2 : faites joli
D’autres, aiment les belles vitrines (ou une tranche de citron). Pour eux, concevez un design graphique visuellement attractif. Vous pouvez même ajouter quelques fioritures visuelles (ou un peu de Flash) et ils seront contents. Aussi longtemps qu’il n’y a pas de confusion entre les éléments de décoration et le contenu de la page, que vous avez réalisé tout vos tests sur les navigateurs (ou que vous fournissez quelques styles basiques pour les médias alternatifs), ça devrait le faire.
Niveau 3 : c’est la fête !
D’autres encore, veulent le grand jeu. Pour ceux-là, vous pouvez faire sauter le bouchon et créer une merveilleuse application web 2.0 avec fondu-enchainé, widget en veux-tu en-voilà, et Ajax en abondance. Gardez toutefois à l’esprit, que ces niveaux ne sont pas toujours aussi clairement identifiables. Un palier intermédiaire entre les niveaux 1 et 2 sera peut-être nécessaire pour donner à Netscape 4.x et IE5/Mac quelques styles typographiques spécifiques. Ou vous pouvez avoir envie d’offrir des raffinements Javascript selon les navigateurs, ou encore injecter un peu de crème au nougat entre les niveaux 2 et 3…

Passer inaperçu

Une fois que vous avez décidé des niveaux à prendre en compte, vous pouvez construire votre site.

Commencez par le contenu. Quelquefois, les webdesigners et les développeurs oublient que les gens viennent surtout pour ça. Travaillez-le avec amour sans noyer vos visiteurs sous les informations. N’empilez pas les blocs comme pour un buffet. La production du contenu demande toujours beaucoup de travail. Mettez-le en valeur.

Lorsque le contenu est balisé, il est temps d’établir le look and feel du site. Concevez un design adapté à vos utilisateurs en utilisant pour chaque niveau les différentes techniques à votre disposition : cachez certains fichiers CSS aux navigateurs les plus anciens et donnez des styles spécifiques à ceux qui demandent un peu plus d’attention. Les commentaires conditionnels sont réellement vos amis pour la vie en la matière. Mais n’oubliez pas les vieilles recettes comme les règles @import et les combinaisons pour les médias spécifiques qui permettent d’offrir sélectivement un parfum différent pour les navigateurs collés au radiateur du fond de la classe.

Vérifiez la présentation de votre contenu à l’impression et son affichage sur les périphériques mobiles. A ce propos, envisagez-vous une mise en pages spécifique ou seulement un traitement basique en terme de couleur ou de typographie ? Quel sort réservez-vous aux images et aux formulaires ? Essayez d’anticiper les fonctionnalités qu’un utilisateur mobile voudrait, et ôtez le superflu ! Si vous utilisez la pseudo-classe :hover sur un lien, n’oubliez pas de considérer également la pseudo-classe :focus, et les utilisateurs de claviers ou d’appareils mobiles vous remercieront.

Lorsque le design est validé, ajoutez quelques étincelles avec une pincée de Javascript non-intrusif. Vous connaissez déjà les méthodes de détection pour savoir si un script peut fonctionner sur tel navigateur ? Considérez aussi comment vos scripts peuvent interférer avec les interactions communes aux navigateurs telles que « bookmarker » un lien ou utiliser le bouton retour. Et n’oubliez pas l’interdépendance qui peut exister entre des scripts différents : votre site deviendrait-il inutilisable si un script fonctionnait et pas un autre ?

Si vous créez un widget ou autre interface de contrôle, générez le marquage additionnel quand avez déterminé qu’il est prêt à être utilisé, et que tout le reste fonctionne encore. Et si vous séparez les CSS liées à votre widget de votre code Javascript comme un bon petit soldat des standards, assurez-vous que les styles ne sont pas actifs tant que le script n’a pas indiqué que le widget peut être utilisé. Une bonne pratique est d’utiliser l’échange de classe (cf. Table 1) :

Widget	Au repos	Activé
Navigation par onglets	`.onglet`	`.onglet-on`
Formulaire à soumission automatique	`.auto-submit`	`.auto-submit.actif`

Au final, si vous envisagez d’utiliser Ajax, faites-le avec discernement : il n’est pas nécessaire de charger l’ensemble de la page via des appels asynchrones qui finissent par devenir une barrière entre l’utilisateur et votre contenu. Paradoxalement, cela peut entraîner une augmentation de la charge serveur, rendre votre contenu invisible pour les moteurs de recherche, et rendre votre site inutilisable pour quiconque utilise un lecteur d’écran ou un mobile.

Ne me faites pas dire ce que je n’ai pas dit, Ajax a sa place, mais il est important de savoir laquelle, et plus encore, de savoir où elle n’est pas.

Conclusion

Anticipez les besoins de l’utilisateur avec précaution et occupez-vous d’eux en vous faisant remarquer le moins possible. C’est la clé pour laisser une première bonne impression. Comme avec un verre d’eau, vos utilisateurs ne devraient jamais avoir à réclamer pour être servi.

Crédits et remerciements

Traduit avec la permission de A List Apart Magazine et de l’auteur.

Malgré tout le soin apporté à cette traduction, il est possible que des erreurs préjudiciables à la pensée de l’auteur se soient glissées : je vous conseille vivement de lire l’article original. Profitez-en pour me signalez les erreurs ou les contresens, ou tout simplement les améliorations que vous jugez utiles pour coller au plus près de l’article. ~~D’ailleurs, ce billet reste en version bêta quelques temps ;)~~

Merci à Véro pour son coup de main quand j’étais « Lost in translation » ;)

Note du 24/05/07 : Merci à Goulven pour sa relecture et les améliorations qu’il a apportées à cette traduction.

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

Exercice de style CSS et HTML : table vs div

Bruno Bichet — Thu, 26 Oct 2006 02:12:17 +0000

L’utilisation des CSS à la place des tableaux pour concevoir une page web fait sa place dans la boite à outils du webdesigner. Or, s’il est relativement aisé de concevoir un site «full CSS» from scratch, c’est parfois un peu plus tricky de partir d’un site existant et d’en débarrasser la table. Après la lecture de ce billet, vous saurez comment j’ai divisé par deux le poids d’une page, rendu au code HTML son teint de rose, et facilité la digestion des navigateurs… tout en conservant 99% du look d’origine…

La page à transformer provient d’un template SPIP dont l’étude du code source nous fait remonter assez loin dans le temps pour nous dévoiler les joies de la géologie htmlienne ;) Alain, l’éditeur du site sivom-nautique, m’a demandé de jeter un œil sur la page d’accueil et de moderniser le gabarit HTML.

Note : L’intégration du gabarit live n’étant pas prévue dans l’immédiat, les liens vers «l’original» mènent, dans la suite de cet article, vers une copie de la page qui peut présenter des différences par rapport à celle qui est en ligne.

La structure de la page en question s’appuie largement sur des tableaux, tandis que des balises div encadrent les titres et d’autres portions de texte. Par exemple la colonne de gauche est composée de

Dernières images

…On voit ici que les styles CSS sont utilisés en ligne avec l’attribut style, alors qu’il existe une feuille de style externe perso.css. On remarquera que le titre Dernières images se trouve dans un container div dont la sémantique se rapproche dangereusement de zéro ;)

Dis papa, racontes-moi encore les tableaux ! »

css 4 design » Commentaires conditionnels

Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)

Cibler chaque version d’Internet Explorer

Et le prochain IE9 ?

Exemple d’utilisation

Mise à jour (17/02/2011)

Articles sur le même sujet

Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

Comment utiliser les hacks CSS ?

Cibler les versions <= à IE8

Mettez vos frameworks CSS à jour

24 hacks CSS à consommer avec modération

Hacks sur les sélecteurs

IE6 et inférieurs

IE7

IE7, Firefox, Safari, Opera

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

Opera 9.27 et inférieurs, Safari 2

Safari 2 — 3

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

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

Safaris 3+, Chrome1+

iPhone / Webkit mobile

Safari 2 — 3.1

Safari 2 — 3.1, Opera 9.25

Safari — Chrome

Tout sauf IE6 — 8

IE7

Uniquement Firefox. 1+

Firefox 3.0+

Hacks sur les attributs

IE6

IE6, IE7

Tout sauf IE6

IE6, IE7, IE8

IE7, IE8

IE6, IE7 — fonctionne comme !important

IE8

Articles sur le même sujet

Feuille de style CSS conditionnelle avec Conditional CSS

Articles sur le même sujet

Contribution au guide stylistique pour HTML et CSS

Comment j’écris mon HTML

Comment j’écris mes CSS

En bref

Articles sur le même sujet

IE6 — Gérer la transparence du format PNG 24 bits

Le format PNG

Modifier le chunk (segment) bKGD des png

Le filtre `AlphaImageLoader` de Microsoft

Appliqué sur une balise `img`

Appliqué sur une image en `background`

Quelques contraintes

Passez-moi l’expression !

Une solution globale avec iepngfix

Une nouvelle solution globale avec DD_belatedPNG

Conclusion

Ressources externes

Généralités sur le format PNG

Articles sur le même sujet

Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels

Dans ie.css

Articles sur le même sujet

Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?

Un HR cross-browser cachère

Deux, c’est trop

C’était mieux avant ?

Styler la balise BR

La rustine

Quelques mots sur la remise à zéro des éléments HTML

Faire reset, c’est rigolo tout le temps ?

En guise de conclusion

Articles sur le même sujet

Twitter : Signal social, microblogging et moblogging

Comment ça marche ?

Pourquoi ça marche ?

C’est pas tout de l’installer, mais je fais quoi avec ?

Trucs et astuces pour Twitter tranquille

Je peux Twitter de partout…

… mais pas sur Internet Explorer