«image replacement» : une autre technique

Une nouvelle technique de remplacement par l’image a récemment été ajoutée au projet HTML5 Boilerplate. Ce billet explique son fonctionnement et comment elle se situe par rapport aux autres méthodes, utilisant text-indent notamment.

Voici le bloc CSS qui a fait son apparition dans la récente mise à jour de HTML5 Boilerplate et le framework Compass :

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

Comment ça marche ?

1. font:0/0 a — Ce raccourci met à zéro les propriétés font-size et line-height. La valeur a fonctionne comme un raccourci pour font-family : font-size: 0; line-height: 0 et font-family: a. C’est une idée reprise de l’implémentation BEM. Bien que le validateur CSS fait sa chochotte avec les valeurs 0/0, il faut savoir que tous les navigateurs acceptent cette syntaxe et qu’il s’agit d’une erreur d’interprétation du validateur. En effet, si l’on utilise font: 0px/0, tout va bien, alors que dans le même temps, le validateur affiche font: 0/0.
2. text-shadow:none –- Permet de s’assurer que les ombres portées avec text-shadow sont supprimés du texte pour éviter l’apparition d’une ombre portée par-dessus le background.
3. color:transparent -– Requis pour les navigateurs qui ne parviennent pas à rendre le texte complètement invisible, comme Safari 4 ou certains navigateurs pour mobiles. Les versions d’Internet Explorer IE6/7/8 ne reconnaissent pas cette valeur pour la propriété color, mais heureusement, les versions IE7/8 ne montrent rien et IE6 n’affiche qu’une très légère trace du texte.

Dans HTML5 Boilerplate, nous avons également supprimé les éventuelles bordures et couleur de fond :

/* For image replacement */
.ir {
    border:0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background-color: transparent;
}

Avantages par rapport à text-indent

Cette nouvelle technique évite les problèmes posés par la méthode de remplacement via text-indent, notamment les pertes de performances. Notez que ces dernières affectent également la dernière méthode proposée par Scott Kellum qui vise au départ à améliorer les performances sur iPad 1.

1. Fonctionne sur IE6/7 sur les éléments de type inline-block. Cf. les problèmes liés aux techniques basées sur l’indentation de textes à l’adresse http://jsfiddle.net/necolas/QZvYa/show/
2. N’implique pas la création d’une boite en dehors de la surface visible de l’écran qui entraine une baisse des performances.
3. Plus besoin de spécifier d’alignement de texte ou de masquer le contenu qui dépasse car le texte de la nouvelle méthode ne prend tout simplement plus de place.
4. Inutile de masquer les éventuelles balises ou d’utiliser un contournement avec display:inline impliqué par l’indentation du texte.
5. En tout état de cause, cette technique nécessite moins de lignes de code.

Effets de bord

Aucun hack de remplacement par image n’est parfait :

1. Laisse une légère trace de texte sur IE6.
2. Implique de ne pas utiliser l’unité em pour les marges de l’élément sur lequel vous appliquez cette technique, vu que la taille du texte est réglé à zéro.
3. Windows-Eyes a un bug qui empêche la lecture du texte caché par cette méthode. Il n’y a en revanche aucun problème avec les autres lecteurs d’écran testés. Merci à @jkiss pour ses précisions et à @wilto pour avoir confirmé que cette méthode fonctionnait avec JAWS 12 dans IE 6/7/8 et Firefox 4/5/6.
4. Comme beaucoup de méthodes de remplacement par l’image, elle ne fonctionne pas si les CSS sont chargées mais que les images ne le sont pas.
5. Le texte n’est pas caché si le visiteur a une feuille de style utilisateur avec une déclaration font-size se terminant par !important pour l’élément où vous avez appliqué la class .ir.

Il est utile de noter que le remplacement par l’image utilisant les pseudo-éléments — NIR image replacement — évitent ses désagréments mais ne fonctionne pas correctement sur IE6/7.

Pour finir

J’utilise cette technique sans encombre depuis que Jonathan Neal et moi-même l’utilisons dans le cadre d’un test de clearfix commencé il y a un an environ. Le framework BEM utilise également cette technique pour ses icônes. L’idée principale fut proposée dès 2003 mais le rendu des navigateurs de l’époque n’a pas permis une large diffusion de cette méthode.

Si vous rencontrez des problèmes en utilisant cette technique, merci de détailler le bug.

Traduit de l’article Another CSS image replacement technique avec l’aimable autorisation de l’auteur ⁽¹⁾.

⁽¹⁾ Nicolas Gallagher (@necolas) est un développeur web front-end freelance basé à Londres. Il a co-créé Normalize.css et il fait partie des développeurs du projet HTML5 Boilerplate.

N’hésitez pas à me faire part de vos remarques sur les contresens (l’anglais était ma 3e langue), les fautes d’orthographe et d’une manière générale tout ce qui pourrait être préjudiciable à l’article d’origine.

Edit du 09/04/2012 — N’hésitez pas à jeter un oeil sur l’article : My thoughts about the latest Image Replacement techniques qui pointe les défauts de ces nouvelles méthodes de remplacement de texte par une image.

Articles sur le même sujet

• HTML5 et CSS pour l'intégrateur web
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Une solution CSS accessible pour remplacer du texte HTML par une image
• 8 techniques CSS pour remplacer du texte HTML par une image
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

1. Typographie sur le web

Déclarer vos polices de caractères avec Font-Face

Modification de la méthode de déclaration Font-Face et mise à jour du billet concernant les Bonnes pratiques pour les déclarations font-face. Pas de problème si vous utilisez les kits de FontSquirrel, ils sont à jour ! Sinon, voici la bonne méthode pour inclure vos polices localement :

@font-face {
    font-family: 'MuseoSlab500';
    src: url('Museo_Slab_500-webfont.eot?iefix=') format('eot'),
         url('Museo_Slab_500-webfont.woff') format('woff'),
         url('Museo_Slab_500-webfont.ttf') format('truetype'),
         url('Museo_Slab_500-webfont.svg#webfont8VbsAwew') format('svg');
    font-weight: normal;
    font-style: normal;
}

Museo Slab is robust slab serif with Museo’s friendliness. It is a perfect match for Museo Sans. By Exljbris.

Museo Slab : police de qualité accompagnée de son kit fonte-face

→ FontSquirrel propose un convertisseur de polices de caractères qui permet d’obtenir l’ensemble des formats web pour l’ensemble des navigateurs (.eot, .woff, .ttf, .svg).

Maitrisez l’affichage des Webfonts

[ typographisme ] Maîtriser le délai d’affichage des fontes – Internet Explorer et les navigateurs qui utilisent Webkit (Safari, Chrome) affiche le texte lorsque la police est téléchargée. Quant à Firefox et Opera, ils commencent à afficher le texte avec la police de substitution en attendant que la police soit complètement chargée. Cet article fait le point sur ces deux approches et fournit des astuces pour limiter les dégâts : choix des polices de substitution pour limiter le clignotement ou utilisation de Web Font Loader pour contrôler le chargement et l’affichage des polices.

Unicode et typographie

Unicode et typographie : un amour impossible – Tout ce que vous avez toujours voulu savoir sur les rapport entre Unicode et la typographie10.3166/dn.6.3-4.105-137.)

• → Voir aussi Tableaux de caractères Unicode – Écritures,
• → Lire aussi Le petit journal permanent de la TypOgrApHiE !

Les fontes disponibles selon les plate-formes

• → iOS Fonts — 40 familles de polices de caractères pour iPhone 4.2 et 57 pour iPad 4.2
• → CSS font sampler and survey — The Code Style font sampler is a guide to the most common fonts on Windows, Mac and Linux.

2. HTML5 Boilerplate

[ 1stwebdesigner ] 20 bouts de code et bonnes pratiques issus de HTML5 Boilerplate — Comme beaucoup, j’ai entendu parler de HTML5 Boilerplate, un modèle de site HTML/CSS/JS/.htaccess de «tueurs» créé par Paul Irish et Divya Manian qui permet de développer des sites rapides, robustes et prêts pour le futur. HTML5 Boilerplate nous appporte les dernières avancées en matière d’intégration web sur un plateau sous la forme de plusieurs fichiers HTML, CSS, Javascript et .htaccess prêts pour HTM5 et CSS3 (mais pas seulement). Le fichier .htaccess regroupe les bonnes pratiques en matière de compression des différents formats utilisés sur le web, de dates d’expiration pour la mise en cache des éléments, de redirection sur le domaine sans les 3W, etc.

HTML5 Boilerplate existe en deux versions : une pour l’étude avec les explications sous forme de commentaires, et l’autre pour la production. Il y a beaucoup à apprendre en lisant les différents fichiers et en écoutant Paul Irish présenter HTML5 Boilerplate :

• → Lire la documentation de HTML5 Boilerplate sur GitHub,
• → Lire la documentation en mode Boilerplate (cf. HTML5 Boilerplate Documentation… en mode Boilerplate !),
• → Lire Script Loading Techniques.

3. Base.css ou Reset.css ?

[ thinkvitamin ] Setting rather than Resetting Default Styling – Avec l’utilisation (ou non) d’un framework CSS, la question de savoir s’il vaut mieux mettre un reset.css ou une feuille de style de base dans ses pages web est un peu le serpent de mer de l’intégration web. Thierry Koblentz présente les défauts inhérents au reset.css et défend l’approche de la feuille de style de «base» avec base.css qui a inspirée en partie HTML5 Boilerplate !

4. Clearfix reloaded ?

[ Yahoo! User Interface Blog ] Clearfix Reloaded + overflow:hidden Demystified – Tant que la propriété float servira pour bâtir les fondations de nos pages web, nous continuerons à utiliser une méthode pour rétablir le flux après l’utilisation d’éléments «floatants». Il existe plusieurs méthodes que j’avais compilées dans l’article Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire qui faisait lui-même suite à Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ? Voici le petit nouveau :

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

.clearfix:before,
.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.clearfix2:before,
.clearfix2:after {
    content: "020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix2:after { clear: both; }
.clearfix2 { zoom: 1; }

• → Float, clear et contextes de formatage,
• → Everything you Know about Clearfix is Wrong,
• → How to « patch » clearfix so it can better handle collapsing margins,
• → CSS 101: Block Formatting Contexts,
• → The hacktastic zoom fix.

5. Apprendre CSS3

[ onextrapixel ] The No-Pressure Introduction to CSS3 — Utiliser CSS3 dès maintenant est possible. Cet article fait le point sur les différentes propriétés CSS3 avec des exemples concrets, tout en précisant leur niveau de prise en charge par les différents navigateurs, avec ou sans préfixe vendeur. L’auteur n’a pas oublié les nouveaux sélecteurs — tout aussi intéressants, sinon plus, que les «effets» — ni les Medias Queries ou Font-Face. Il nous donne en prime quelques liens vers des sites qui brossent CSS3 dans le sens du poil.

→ Lire aussi Le petit journal permanent de CSS3 — 100+ ressources pour commencer

6. Box-Shadow sexy sans image

[ Nicolas Gallagher ] CSS drop-shadows without images — L’article explique comment appliquer simplement des ombres portées originales en utilisant les pseudo-classe :before et :after. Voir la démonstration.

Par exemple :

.drop-shadow {
   position:relative;
   width:90%;
}
.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}
.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

• → Ombres avancées avec CSS3 et box-shadow — Tutoriel très complet en français sur la mise en place d’ombres portées originales avec box-shadow.
• → Drop Shadows with CSS3,
• → Pure CSS3 box-shadow page curl effect.
• → Des bulles de dialogue en CSS3 sans image

7. Feuille de style spécialisées pour les mobiles

[ Alsacréations ] Une feuille de styles de base pour le Web mobile — Raphaël nous propose un exemple de feuille de style CSS pour les médias mobiles qui condense les bonnes pratiques à respecter :

• Fixer le Viewport,
• Passer tous les éléments de largeur fixe en largeur automatique,
• Fixer une largeur maximale de 100 % aux éléments potentiellement problématiques,
• Gérer les mots longs,
• Passer à une seule colonne,
• Masquer les éléments superflus,
• Afficher un message personnalisé.

→ Lire aussi Une feuille de styles de base pour le media print.

8. «Faire avec» Internet Explorer

[ Design your way ] Internet Explorer In A Web Designer’s Life – Problems And Solutions –De plus en plus de développeurs et d’intégrateurs web déclarent ne plus prendre en charge IE6 dans leur projet de développement. Si ce n’est pas votre cas, sachez qu’il existe des outils pour se faciliter la vie avec le dernier de la classe (IE6) en particulier et Internet Explorer d’une manière générale. Via @_jiann.

Outils d’aide au développement

• Google Chrome Frame
• DebugBar
• CompanionJS
• Internet Explorer Developer Toolbar
• Fiddler
• HttpWatch
• Web Accessibility Toolbar
• TamperIE

Scripts

• IE7.js Javascript library
• Selectivizr
• Rounded corner HTML elements using CSS3
• CSS3 support for Internet Explorer 6, 7, and 8
• CSS3 Solutions for Internet Explorer

Outils CSS3 /HTML5

• CSS3Pie
• transformIE
• html5shiv
• IE Print Protector
• Internet Explorer User Agent Style Sheets
• Modernizr
• MySpace’s Performance Tracker
• Unit PNG Fix
• ExplorerCanvas

Tester votre site

• IETester
• IE NetRenderer
• Browsershots

Articles et discussions

• Why People Still Use IE 6
• Is IE9 a modern browser?
• IE CSS Bugs That’ll Get You Every Time
• IE6 – CSS Bugs and Fixes Explained

→ Lire aussi les articles tagués Internet Explorer, IE6 et commentaires conditionnels.

9. Compatibilité CSS et Internet Explorer

[ msdn ] Compatibilité CSS et Internet Explorer — Si votre site Web est destiné à être utilisé avec certaines anciennes versions d’Internet Explorer, vous devez connaître leur niveau de conformité à la spécification CSS. Cette article contient une vue synthétique des spécifications CSS prises en charge dans les versions récentes d’Internet Explorer et dans Internet Explorer 8.

10. Apprendre Photoshop en vidéo

[ Lifehacker ] Learn The Basics Of Photoshop: The Complete Guide — Un dossier composé de textes et de vidéos sur l’apprentissage des bases de Photoshop en cinq parties distinctes et complémentaires :

1. Learn The Basics Of Photoshop In Under 25 Minutes,
2. Basics Of Photoshop: Colour Correction, Touch Ups And Enhancements,
3. Basics Of Photoshop: Basic Drawing With The Pen Tool,
4. Basics Of Photoshop: Designing A Website,
5. Basics Of Photoshop: Next Steps And Further Resources.

→ Lire aussi Détourer les cheveux avec Photoshop

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• HTML5 et CSS pour l'intégrateur web
• Editeur de dégradés CSS3 à la mode de Photoshop
• Check your <body> avec le W3C

J’étais sur la :root

Le pseudo-sélecteur :root permet de cibler les navigateurs modernes :

#toto { /* Pour tout le monde */
    display: block;
    float: left;
}
:root #toto { /* Pour les navigateurs modernes (CSS3 uniquement) */
    display : -moz-box;
    display : -webkit-box;
    display : box;
    float: none;
}

Ne gardez pas votre :lang() dans la poche

Pour cibler les navigateurs actuels :lang(fr) est notre amie. N’oubliez pas <html lang="fr"> pour que l’astuce fonctionne.

Exemple pour positionner un bloc à l’aide de table-cell :

#toto { /* Pour tout le monde, dont IE6/IE7 */
    float: left;
    width: 300px;
}
:lang(fr) #toto { /* Pour les navigateurs modernes et IE8 */
    display: table-cell;
    float: none;
    width: auto;
}

:lang(fr) #toto {  /* Pour les navigateurs modernes et IE8 */
    display: inline-block;
}
#toto { /* Pour IE6/IE7 et les anciens navigateurs */
    display: inline;
    zoom: 1;
}

Articles sur le même sujet

• HTML5 et CSS pour l'intégrateur web
• Editeur de dégradés CSS3 à la mode de Photoshop
• Nouvelle méthode de remplacement de texte par une image
• Quelques liens sur les Media Queries en CSS3
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3

<!--[if !IE]><!--><html><!-- <![endif]-->
<!--[if IE]><html class="ie"><![endif]-->

Cibler chaque version d’Internet Explorer

<!--[if !IE]><!--><html><!-- <![endif]-->
<!--[if lte IE 6]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if gte IE 8]><html class="ie8"><![endif]-->

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 :

<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->

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 :

<!doctype html>


<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html lang="fr" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="fr" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="fr" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="fr" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr"> <!--<![endif]-->

Articles sur le même sujet

• Tester un site dans plusieurs navigateurs (mais surtout dans IE6 avec Vista)
• Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels
• Nouvelle méthode de remplacement de texte par une image
• «Test Drive» (IE9 preview) sur Vista
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

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

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

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

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

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

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

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

Articles sur le même sujet

• Editeur de dégradés CSS3 à la mode de Photoshop
• Nouvelle méthode de remplacement de texte par une image
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)
• Tester un site dans plusieurs navigateurs (mais surtout dans IE6 avec Vista)

• The weird and wonderful world of Internet Explorer
• How To Attack An Internet Explorer (Win) Display Bug
• The IE/Win Disappearing List-Background Bug
• IE6 Duplicate Characters Bug
• How to resolve browser compatibility issues while working with JavaScript, AJAX and XML
• Double-Margin Bug, Float-Width Bug, Pixel Gap Bug
• CSS Min-Height Bug
• IE White-Space Bug
• Cross Browser Compatible CSS Opacity
• Clearing floated images in body text
• Firefox CSS Magic

Articles sur le même sujet

• Nouvelle méthode de remplacement de texte par une image
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)
• Tester un site dans plusieurs navigateurs (mais surtout dans IE6 avec Vista)
• HTML5 et CSS pour l'intégrateur web

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

Installer «Test Drive» (IE9 preview) sur Vista

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

Machine Virtuelle avec Windows XP et IE6

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

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

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

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

Logiciels pour tester votre site sous IE

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

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

IETester

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

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

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

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

Captures d’écran en ligne

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

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

Browser Sandbox

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

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

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

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

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

NetBook ou Portables

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

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

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

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

Adobe Browserlab

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

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

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

Internet mobile

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

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

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

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

Pour conclure

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

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

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

Articles sur le même sujet

• Nouvelle méthode de remplacement de texte par une image
• Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• «Test Drive» (IE9 preview) sur Vista
• HTML5 et CSS pour l'intégrateur web

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

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

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

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

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

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

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

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

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

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

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

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

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

Framework CSS sans stress

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

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

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

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

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

CSS Float

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

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

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

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

Miscellanées

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

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

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Nouvelle méthode de remplacement de texte par une image
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• Editeur de dégradés CSS3 à la mode de Photoshop
• 390 ressources Javascript & jQuery

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

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

• 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

1. 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.

2. 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.

3. Il n’est pas possible d’utiliser les propriétés background-repeat et background-position avec une image PNG transparente en background.

4. 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)
);
}

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 :

1. Copiez les fichiers *iepngfix.htc* and *blank.gif* dans le dossier de votre site web,

2. 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.

3. 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.

4. 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 :

   <script src="iepngfix_tilebg.js" type="text/javascript"></script>
   

5. 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);
       }
   

6. 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 !

7. 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 :

<!--[if IE 6]>
    <script src="DD_belatedPNG.js"></script>
    <script>
        DD_belatedPNG.fix('.png_bg');
    </script>
<![endif]-->

<script type="text/javascript">
// <![CDATA[
             DD_belatedPNG.fix('.example1, .example2, img');
// ]]></script>

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

• Trucs et astuces CSS
• Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)
• Opacité CSS et effet de trame avec GIF/PNG transparent
• Nouvelle méthode de remplacement de texte par une image
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

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

Dans ie.css

Pour s’adresser à IE6 :

* html div {
blablabla
}

html>body div {
blablabla
}

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

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

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

• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• Nouvelle méthode de remplacement de texte par une image
• Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)
• HTML5 et CSS pour l'intégrateur web
• Editeur de dégradés CSS3 à la mode de Photoshop