Comment faire fonctionner la transparence PNG dans les navigateurs qui ne la prennent pas en charge nativement ?

Question

Notre (bien-aimé) concepteur continue de créer des fichiers PNG avec des arrière-plans transparents à utiliser dans nos applications.Je voudrais m'assurer que cette fonctionnalité du PNG fonctionne également dans les navigateurs "plus anciens".Quelle est la meilleure solution ?

modifications ci-dessous

@mabwi & @syd - Que je sois d'accord ou non sur l'utilisation d'un PNG n'est pas la question.C'est un problème que je dois résoudre !

@Tim Sullivan - IE7.js a l'air plutôt cool, mais je ne pense pas vouloir présenter tous les autres changements d'une application.J'aimerais une solution qui résout exclusivement le problème PNG.Merci pour le lien.

Answer 1

Voici un excellent article qui explique et montre comment gérer la transparence PNG dans les anciens navigateurs : http://www.alistapart.com/stories/pngopacity/

Answer 2

J'ai trouvé ce qui semble être une très bonne solution ici : Unit Interactive -> Labs -> Unit PNG Fix

mise à jour L'unité PNG est également présentée sur un liste des options de correction PNG sur NETTUTS

Voici les points saillants de leur site Web :

• Javascript très compact :Moins de 1 Ko !
• Corrige certains problèmes d'interactivité causés par l'attribut de filtre d'IE.
• Fonctionne sur les objets img et les attributs d'image d'arrière-plan.
• Fonctionne automatiquement.Vous n'avez pas à définir des cours ou des fonctions d'appel.
• Permet les éléments de largeur et de hauteur automatiques.
• Super simple à déployer.

Answer 3

• IE PNG Fix 2.0 qui soutient background-position et -repeat!

Également en PNG 8 bits en palette avec transparence alpha complète existent, contrairement à ce que Photoshop et GIMP peuvent vous faire croire, et ils se dégradent mieux dans IE6 – cela réduit simplement la transparence à 1 bit.Utiliser pngquant pour générer de tels fichiers à partir de PNG 24 bits.

Answer 4

IE7.js fournira la prise en charge des fichiers PNG (y compris la transparence) dans IE6.

Answer 5

J'ai essayé de créer un site avec des fichiers .png et cela n'en vaut tout simplement pas la peine.Le site devient lent et vous utilisez des hacks qui ne fonctionnent pas à 100 %.Voici un bon article sur certaines options, mais mon conseil est de trouver un moyen de faire fonctionner les gifs jusqu'à ce que vous n'ayez plus à prendre en charge IE6.Ou donnez simplement à IE6 une expérience dégradée.

Answer 6

Utiliser des fichiers PNG dans IE6 n’est guère plus difficile que dans n’importe quel autre navigateur.Vous pouvez tout prendre en charge dans votre CSS sans Javascript.J'ai déjà vu ce hack montré...

div.theImage {
    background  : url(smile.png) top left no-repeat;
    height      : 100px;
    width       : 100px;
}

* html div.theImage {
    background  : none;     
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}

Je ne suis pas sûr qu'il s'agisse d'un CSS valide, mais selon le site, cela n'a peut-être pas beaucoup d'importance.

(il est à noter que l'URL de la première image est basée sur le répertoire de la feuille de style, tandis que la seconde est basée sur le répertoire de la page consultée - c'est pourquoi elles ne correspondent pas)

Answer 7

@Hboss

tout va bien si vous connaissez exactement tous les fichiers (et les dimensions de chacun) que vous allez afficher - ce serait une véritable douleur de conserver ce fichier CSS, mais je suppose que ce serait possible.Lorsque vous souhaitez commencer à utiliser des PNG transparents à des fins très courantes :a) des graphiques accessoires tels que des icônes (peut-être de tailles différentes) qui fonctionnent sur n'importe quel arrière-plan, et b) des arrière-plans répétitifs ;alors tu es foutu.Chaque solution de contournement que j'ai essayée a rencontré une pierre d'achoppement à un moment donné (impossible de sélectionner du texte lorsque l'arrière-plan est transparent, parfois les images sont affichées dans des tailles farfelues, etc.), et j'ai constaté que pour une fiabilité maximale, je devrai revenir aux gifs.

Mon conseil est d'essayer le hack de transparence PNG, mais en même temps de réaliser que ce n'est certainement pas parfait - et rappelez-vous simplement que vous vous mettez en quatre pour les utilisateurs de un navigateur de plus de 7 ans.Ce que je fais ces jours-ci, c'est d'offrir aux utilisateurs d'IE6 une fenêtre contextuelle lors de leur première visite sur le site, avec un rappel amical que leur navigateur est obsolète et n'offre pas les fonctionnalités requises par les sites Web modernes, et, même si nous ferons de notre mieux pour vous donner le meilleur, vous obtiendrez une meilleure expérience de notre site et d'Internet dans son ensemble si vous êtes BIEN MISE À NIVEAU.

Answer 8

Je pense que tous les navigateurs prennent en charge PNG-8.Ce n'est pas un mélange alpha, mais il a des arrière-plans transparents.

Answer 9

Je me trompe peut-être, mais je suis presque sûr qu'IE6 et les versions antérieures ne font tout simplement pas de transparence avec les fichiers PNG.

Vous l’êtes en quelque sorte, et vous ne l’êtes pas en quelque sorte.

IE6 ne les prend pas en charge nativement.

Cependant, IE prend en charge les objets javascript/css et COM personnalisés (c'est ainsi qu'ils ont initialement implémenté XmlHttpRequest)

Tous ces hacks font essentiellement ceci :

• Retrouvez toutes les images png
• Utilisez un filtre d'image DirectX pour les charger et produire une image transparente dans un format compris par IE
• Remplacez les images par la copie filtrée.

Answer 10

Une chose à laquelle il faut penser, ce sont les clients de messagerie.Vous souhaitez souvent une transparence PNG-24 mais dans Outlook 2003 avec une machine utilisant IE6.Les clients de messagerie n'autorisent pas les astuces CSS ou JS.

Voici une bonne façon de gérer cela.http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

Answer 11

Si vous exportez vos images au format PNG-8 à partir de Fireworks, elles agiront de la même manière que les images GIF.Ainsi, ils n'auront pas l'air merdiques et gris, la transparence sera de la transparence mais ils n'auront pas toute la beauté 24 bits des autres navigateurs.

Cela ne résoudra peut-être pas totalement votre problème, mais au moins vous pouvez y parvenir en partie en les réexportant.

Answer 12

Je me trompe peut-être, mais je suis presque sûr qu'IE6 et les versions antérieures ne font tout simplement pas de transparence avec les fichiers PNG.

J'ai deux "solutions" que j'utilise.Créez des fichiers GIF avec transparence et utilisez-les partout, ou utilisez-les simplement pour IE 6 et versions antérieures avec des feuilles de style conditionnelles.La seconde ne fonctionne vraiment que si vous les utilisez comme arrière-plans, etc.