2 Questions sur la Transparence!

Bonjour!

2 petites questions sur la transparence!

1. Les problèmes de transparence des png sous IE s'appliquent-ils seulement aux transparences intermédiaires (avec calques alpha) ou bien existent-ils également lorsque la transparence est totale (comme un gif mais avec des bords moins dégueux!)?


2. J'ai mis une image dans un div transparent, et évidemment la transparence est appliquée à l'image aussi. Je ne m'y attendais pas, mais en fait ça rend vachement bien, et je voudrais bien le garder comme ça! Est-ce que ça va poser des problèmes de compatibilité avec certaines versions de IE? Vous pouvez voir la page là :

http://www.karlotta.com/

Mon CSS est défini ainsi :

#index-transparent {
	position:absolute;
	bottom:0px;
	left:0px;
 	width:1000px;
 	height:150px;
  	background-color:#ffffff;
  	/* for IE */
  	filter:alpha(opacity=60);
  	/* CSS3 standard */
  	opacity:0.6;
  }

Et l'image, si ça change quelquechose, est un png (avec de la transparence 100%).

Merci d'éclairer ma lanterne!

Bonsoir,

Les problèmes de transparence "png" n'existent que pour les anciens IE6 (de ce que j'en sache) et de bonnes âmes du forum t'indiquerons le "hack" adéqua (par exemple celui que tu utilises déjà).
Il y a deux types de transparence : gif et png-8 (plages opaques ou complètement transparentes) et png-16 comprenant la translucidité. (on peut voir comme au travers d'un vitrail, toutes les nuances sont permises)

Pour l'opacité d'une div ou d'un autre élément utilisant la tranparence en CSS > les enfants sont aussi transparents. Mauvais plan en somme.

Rassurez vous, ce problème de transparence en css est encore loin d'être valide.

Bonjour,

Princesskarlotta a écrit :
1. Les problèmes de transparence des png sous IE s'appliquent-ils seulement aux transparences intermédiaires (avec calques alpha) ou bien existent-ils également lorsque la transparence est totale (comme un gif mais avec des bords moins dégueux!)?

Non, les PNG avec transparence alpha (donc pas les png-8) ayant des zones à 0% seront toujours affiché avec un cadre gris (de base, mais modifiable) sous IE6.

Princesskarlotta a écrit :
2. J'ai mis une image dans un div transparent, et évidemment la transparence est appliquée à l'image aussi. Je ne m'y attendais pas, mais en fait ça rend vachement bien, et je voudrais bien le garder comme ça! Est-ce que ça va poser des problèmes de compatibilité avec certaines versions de IE?

A priori non, pas à cause de la transparence du div, par contre les PNG avec le cadre gris c'est trè moche.

Le mieux pour se rendre compte du problème est toujours de tester soit même, tu peux le faire avec MultipleIEs, IETester ou avec une machine virtuelle (virtualPC, par exemple) et une image de winXP+IE6 natif (c'est la meilleurs solution puisque c'est natif).

Laurie-Anne a écrit :
Bonjour,

Non, les PNG avec transparence alpha (donc pas les png-8) ayant des zones à 0% seront toujours affiché avec un cadre gris (de base, mais modifiable) sous IE6.

A priori non, pas à cause de la transparence du div

Merci! Super!

Aureance a écrit :
Bonsoir,
de bonnes âmes du forum t'indiquerons le "hack" adéqua

Comme celui-ci? J'ai juste souvent lu et entendu dire que ces hacks crèent d'autres problèmes... mais je vais le mettre quand même, pour les 2% de gens qui n'ont pas mis à jour...(!)

http://www.twinhelix.com/css/iepngfix/demo/[/url]

Laurie-Anne a écrit :
Bonjour,

les PNG avec le cadre gris c'est trè moche.

Ca c'est clair!! Je suis allée sur browsershots.org hier soir, et j'ai pu me rendre compte, c'est ABOMINABLE!

Merci pour les autres liens, c'est très pratique, même si je suis sur Mac et qu'il faudra donc installer virtualPC ou autre.

Aureance a écrit :

Il y a deux types de transparence : gif et png-8 (plages opaques ou complètement transparentes) et png-16 comprenant la translucidité. (on peut voir comme au travers d'un vitrail, toutes les nuances sont permises)

Moi c'est du PNG-24. Je me suis plantée quelquepart?

Merci beaucoup a vous deux pour votre aide précieuse en tout cas! Je vais de ce pas installer le hack, et je laisse donc mon image dans son div transparent

Bonne journée!

Princesskarlotta a écrit :
Comme celui-ci? J'ai juste souvent lu et entendu dire que ces hacks crèent d'autres problèmes... mais je vais le mettre quand même, pour les 2% de gens qui n'ont pas mis à jour...(!)

Les hacks sont rarement bons... Personnellement, je recommande plutôt d'utiliser les commentaires conditionnels pour IE6, avec la substitution du PNG par un gif, c'est moins beau, mais c'est mieux et ça ne dérange pas.

Princesskarlotta a écrit :
Moi c'est du PNG-24. Je me suis plantée quelquepart?

Non, c'est normal, le png-24 est beaucoup plus utilisé que le 16.

Laurie-Anne a écrit :
Les hacks sont rarement bons... Personnellement, je recommande plutôt d'utiliser les commentaires conditionnels pour IE6, avec la substitution du PNG par un gif, c'est moins beau, mais c'est mieux et ça ne dérange pas.

Non, c'est normal, le png-24 est beaucoup plus utilisé que le 16.

Merci! Est-ce que tu aurais une référence pour un script conditionnel que tu recommandes? Je suis sure que je peux trouver facilement, mais juste au cas où tu connaisses un truc vraiment bien, sur, et compatible de partout!

Merci encore!

Ce ne sont pas des scripts dont parle Laurie-Anne, mais de commentaires ignorés par les navigateurs sauf IEx.
Un tuto sur les commentaires conditionnels.

paolo a écrit :
Ce ne sont pas des scripts dont parle Laurie-Anne, mais de commentaires ignorés par les navigateurs sauf IEx.
Un tuto sur les commentaires conditionnels.

Ah super! Les gens sont vraiment super sympas ici, toujours prêts à aider, c'est vraiment chouette.

Je vais mettre tout ça en place, ça m'a pas l'air trop compliqué. Merci!

Bonjour,

1. Sur le support du PNG avec transparence graduelle dans IE6, l'article de référence qui va bien est ici: Obtenir la transparence PNG avec Internet Explorer 6. Je conseillerais de le lire avant de choisir une méthode.

2. Pour le filtre DirectX permettant de modifier l'opacité d'une élément dans IE 5.5 à 8, je recommanderais de l'utiliser uniquement dans le cadre d'un commentaire conditionnel visant spécifiquement IE8 et inférieurs. En effet, IE9 supportera la propriété CSS3 opacity (de même que les couleurs RGBA), et s'il supporte aussi le filtre DirectX pour l'opacité ça pourrait donner des résultats étranges. IE9 ne sortira sans doute pas en 2010 (ou au plus tôt en fin d'année), mais quand on fait un site c'est rarement pour 6 mois (sauf certains sites évènementiels).

Florent V. a écrit :
Bonjour,

1. Sur le support du PNG avec transparence graduelle dans IE6, l'article de référence qui va bien est ici: Obtenir la transparence PNG avec Internet Explorer 6. Je conseillerais de le lire avant de choisir une méthode.

Merci! J'ai fini par re-exporter 95% des pngs de mon site en gifs... j'y ai passé la journée hier! Il y en a certains qui faisaient des bords dégoutants donc je les ai laissés en png, et tant pis pour les gens qui n'upgradent pas leur navigateur, après tout.

Florent V. a écrit :

2. Pour le filtre DirectX permettant de modifier l'opacité d'une élément dans IE 5.5 à 8, je recommanderais de l'utiliser uniquement dans le cadre d'un commentaire conditionnel visant spécifiquement IE8 et inférieurs. En effet, IE9 supportera la propriété CSS3 opacity (de même que les couleurs RGBA), et s'il supporte aussi le filtre DirectX pour l'opacité ça pourrait donner des résultats étranges. IE9 ne sortira sans doute pas en 2010 (ou au plus tôt en fin d'année), mais quand on fait un site c'est rarement pour 6 mois (sauf certains sites évènementiels).

Merci! Je vais suivre ce sage conseil. Merci IE de toujours autant nous faciliter la tâche...

Encore une fois merci à tous pour votre aide!