Ist es heutzutage in Ordnung, PNG mit Alpha-Transparenz auf Websites zu verwenden?

Question

Ich erinnere mich noch daran, dass es vor 3 Jahren wegen IE6 und anderen schlechten Browsern ein riesiges Problem war, ein schönes PNG mit Alpha in Websites zu verwenden.

Aber wie sieht es jetzt aus? Wie wäre es, wenn Ihre Zielgruppe iPhone-, iPad- und iPod Touch-Nutzer sind? Ich glaube, diese Leute sind nicht so dumm, dass sie veraltete, schlechte Browser verwenden. Sie verwenden die neuesten und besten Programme, die sie haben, und sie sind technisch versiert und intelligent. Ist diese Annahme berechtigt? Heißt das also, dass ich PNG mit Alpha verwenden kann, um großartige Websites für meine Anwendungen zu erstellen, ohne mir Gedanken über Hässlichkeit machen zu müssen?

Answer 1

Ja, es ist absolut in Ordnung, PNGs mit Alpha-Transparenz zu verwenden. Das war eigentlich schon immer so, man musste nur den IE6 mit Filtern reparieren.

Verwenden Sie sie also ruhig :)

Answer 2

Wenn ich alpha-transparente PNGs verwenden muss, verwende ich bei älteren Browsern gerne die DD_belantedPNG .

Dann können Sie eine IE-Bedingung einrichten, um die PNG-Fixierung für die gewünschten Elemente aufzurufen.

    <!--[if IE 6]>
        <script type="text/javascript" src="/lib/js/DD_belatedPNG-min.js"></script>
        <script type="text/javascript">
            DD_belatedPNG.fix('#Logo a img');
        </script>
    <![endif]--> 

Wahrscheinlich möchten Sie pauschale PNG-Korrekturen vermeiden, die sich auf todo PNGs auf der Seite.

Denken Sie daran, dass 8-Bit-PNGs überall funktionieren, wenn Sie die Alpha-Transparenz nicht benötigen.

Answer 3

Es gibt mehrere JS-Bibliotheken, die Unterstützung für transparente PNGs im IE6 bieten. Ich verwende pngfix.js: http://jquery.andreaseberhard.de/pngFix/

Es gibt auch eine eigenständige Version dieses Plugins, wenn Sie nicht jQuery verwenden.

Answer 4

Der einzige Schmerz ist IE6, aber da das ist nicht rly mehr unterstützt (oder zumindest, wenn u öffnen IE erhalten Sie ein Popup zu bewegen, um Rand) seine nicht ein Problem.

Wenn Sie wirklich den IE6 unterstützen wollen, können Sie ein npm-Paket namens dd_belatedpng verwenden: https://www.npmjs.com/package/dd_belatedpng