82
Maîtrise des CSS
Transparence PNG
L’un. des. plus. grands. atouts. du. format. de. fichier. PNG. concerne. sa. prise. en. charge. de. la.
transparence. alpha.. Il. permet. de. produire. des. maquettes. particulièrement. créatives. (voir.
Figure 4.25)..Malheureusement,.Internet.Explorer 6.ne.prend.pas.en.charge.la.transparence.
PNG.de.manière.native,.au.contraire.d’Internet.Explorer 7 et 8..Il.existe.cependant.quelques.
astuces.pour.ramener.les.anciennes.versions.d’Internet.Explorer.dans.le.giron..
Figure 4.25
L’ancien site
Revyver incluait un
magnifique exemple
de transparence PNG
en bas de la fenêtre
d’affichage. Lorsque
la page défilait, des
portions du contenu
transparaissaient sous
les branches de l’arbre
et sous l’arc-en-ciel.
La.méthode.la.plus.connue.pour.forcer.la.prise.en.charge.de.la.transparence.PNG.dans.Internet.Explorer 6.consiste.à.utiliser.le.filtre.propriétaire.AlphaImageLoader..Pour.cela,.vous.
devez.inclure.la.ligne.de.code.suivante.dans.le.fichier.CSS :
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=/img/my-image.png’, sizingMethod=’crop’);
Malheureusement,.ce.code.invalide.le.fichier.CSS..Il.est.donc.préférable.de.le.filtrer.dans.
une.feuille.de.styles.séparée.spécifique.d’Internet.Explorer 6.
.img-wrapper div {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=’/img/shadow2.png’, sizingMethod=’crop’);
background: none;
}
La.première.règle.utilise.un.filtre.propriétaire.pour.charger.le.PNG.et.forcer.la.transparence.
alpha.. L’image. d’arrière-plan. d’origine. reste. affichée,. si. bien. que. la. seconde. règle. vient.
simplement.la.masquer.
Internet.Explorer.reconnaît.un.autre.type.de.code.propriétaire.appelé.commentaire conditionnel,. qui. permet. de. fournir. une. feuille. de. styles. particulière. aux. versions. spécifiques.
d’Internet.Explorer..Dans.le.cas.présent,.vous.souhaitez.qu’Internet.Explorer 6.seul.voie.la.
feuille.de.styles..Vous.pouvez.donc.placer.le.code.suivant.en.haut.de.la.page :
Ne.vous.préoccupez.pas.pour.l’instant.des.commentaires.conditionnels..Vous.en.apprendrez.
plus.à.ce.sujet.au.Chapitre 8.
Maîtrise des CSS
Transparence PNG
L’un. des. plus. grands. atouts. du. format. de. fichier. PNG. concerne. sa. prise. en. charge. de. la.
transparence. alpha.. Il. permet. de. produire. des. maquettes. particulièrement. créatives. (voir.
Figure 4.25)..Malheureusement,.Internet.Explorer 6.ne.prend.pas.en.charge.la.transparence.
PNG.de.manière.native,.au.contraire.d’Internet.Explorer 7 et 8..Il.existe.cependant.quelques.
astuces.pour.ramener.les.anciennes.versions.d’Internet.Explorer.dans.le.giron..
Figure 4.25
L’ancien site
Revyver incluait un
magnifique exemple
de transparence PNG
en bas de la fenêtre
d’affichage. Lorsque
la page défilait, des
portions du contenu
transparaissaient sous
les branches de l’arbre
et sous l’arc-en-ciel.
La.méthode.la.plus.connue.pour.forcer.la.prise.en.charge.de.la.transparence.PNG.dans.Internet.Explorer 6.consiste.à.utiliser.le.filtre.propriétaire.AlphaImageLoader..Pour.cela,.vous.
devez.inclure.la.ligne.de.code.suivante.dans.le.fichier.CSS :
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=/img/my-image.png’, sizingMethod=’crop’);
Malheureusement,.ce.code.invalide.le.fichier.CSS..Il.est.donc.préférable.de.le.filtrer.dans.
une.feuille.de.styles.séparée.spécifique.d’Internet.Explorer 6.
.img-wrapper div {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=’/img/shadow2.png’, sizingMethod=’crop’);
background: none;
}
La.première.règle.utilise.un.filtre.propriétaire.pour.charger.le.PNG.et.forcer.la.transparence.
alpha.. L’image. d’arrière-plan. d’origine. reste. affichée,. si. bien. que. la. seconde. règle. vient.
simplement.la.masquer.
Internet.Explorer.reconnaît.un.autre.type.de.code.propriétaire.appelé.commentaire conditionnel,. qui. permet. de. fournir. une. feuille. de. styles. particulière. aux. versions. spécifiques.
d’Internet.Explorer..Dans.le.cas.présent,.vous.souhaitez.qu’Internet.Explorer 6.seul.voie.la.
feuille.de.styles..Vous.pouvez.donc.placer.le.code.suivant.en.haut.de.la.page :
Ne.vous.préoccupez.pas.pour.l’instant.des.commentaires.conditionnels..Vous.en.apprendrez.
plus.à.ce.sujet.au.Chapitre 8.