Kanał alpha w png pod IE6

Wpisany przez Patryk yarpo Jar

piątek, 23 lipca 2010 18:27

PNG (ang. Portable Network Graphics) został opracowany jako następca GIF w 1995 roku w wyniku problemów patentowych z formatem GIF. PNG nie jest obciążony patentami. Obsługuje stopniowaną przezroczystość (tzw. kanał alfa) oraz 24-bitową głębię kolorów. Dzięki temu można zapisać bezstratnie dowolne grafiki RGB.

Oczywiście IE6 nie ma obsługi kanału alfa. Co nas tak bardzo nie dziwi – przynajmniej mnie. Jednak czego IE nie umie, to się da go nauczyć. Istnieją sposoby na to, aby dynamicznie "popracować" nad stroną dostosowując ją do wymogów IE6.

Zastosujmy teraz bardzo ciekawy kod JavaScript, który można pobrać ze strony http://www.dillerdesign.com/experiment/DD_belatedPNG. Skrypt ten powoduje, że IE6 potrafi wyświetlać poprawnie kanał alfa. Kod pokazany na poniższym listingu wykorzystuje tę bibliotekę do zrenderowania poprawnie strony z grafikami png z kanałem alfa (tzw. półprzezroczystości).

<html>
<head>
    <title>PNG w IE6</title>
    <script type="text/javascript" src="/DD_belatedPNG_0.0.8a.js"></script>
    <script type="text/javascript">
        DD_belatedPNG.fix('img, .bg_png'); // 1
    </script>
    <style type="text/css">
        .bg_png { background: #fff000 url(1.png) 0 0; }
    </style>
</head>
<body>
    <div class="bg_png">
        <img src="/2.png" alt="grafika png z przezroczystoscia">
    </div>
</body>
</html>

W lini [1] wskazujemy na jakie wezły ma oddziaływać biblioteka. Selektory jakich tu używamy są podobne [być może nawet identyczne, nie probowałem bardzo skomplikowanych] do tych używanych w CSS czy jQuery.

Jako, że kod ma być wykonywany tylko przez IE6, warto się zastanowić, czy nie lepiej jest go umieścić w komentarzu warunkowym.

Tags:

< Poprzednia		Następna >