Przezroczystość .png w IE 6

Internet Explorer nie jest moją ulubioną przeglądarką, a już na pewno nie w wersji 6. Długa historia błędów i niekompatybilności ze standardami renderowania stron to znak firmowy tego produktu Microsoftu. Tak się jednak składa, że jest wielu internautów, którzy z IE korzystają i dobrze jest jeśli i oni mogą cieszyć się stroną, którą przygotowaliśmy.

Jednym ze znanych problemów występujących w IE 6 jest brak obsługi przezroczystości w plikach typu .png. Ponieważ na moim blogu mam takie obrazki (logo na górze i kucyk na dole), poszukałem rozwiązania dla tego problemu.

Poszukałem i znalazłem. rozwiązania, które tu przestawię to:

iepngfix

Po pobraniu paczki iepngfix.zip należy ją wypakować i udostępnić jej zawartość dla przeglądarki, czyli wystawić na jakimś adresie. Użycie skryptu sprowadza się do umieszczenia w sekcji <head> naszej strony następujących deklaracji:

<style type="text/css">
img, div, a, input { behavior: url(/resources/css/iepngfix.htc) }
</style>

W skrypcie iepngfix.htc powinniśmy też ustawić poprawnie ścieżkę do obrazka blank.gif:

IEPNGFix.blankImg = '/resources/images/blank.gif';

Dodatkowo jeśli chcemy mieć obsługę powtarzalnych (ang. repeating) teł to dodajemy linijkę (funkcja dostępna w wersji 2.0 alpha 3 iepngfixa, czyli najnowszej w chwili pisania tego wpisu):

<script type="text/javascript" src="/resources/scripts/iepngfix_tilebg.js"></script>

To wszystko.

Unit PNG Fix

Unit PNG Fix przypadł mi do gustu bardziej niż iepngfix ponieważ jest to malutki pliczek .js (plus plik graficzny clear.gif), a nie rozbudowany skrypt z zachowaniem .htc. Jego użycie jest banalnie proste. Oczywiście najpierw trzeba pobrać paczkę, rozpakować i udostępnić pliki, analogicznie jak dla iepngfix. Potem umieszczamy w sekcji <head> naszej strony wpis:

<!--[if lt IE 7]>
    <script type="text/javascript" src="/resources/scripts/unitpngfix.js"></script>
<![endif]-->

Dodatkowo powinniśmy ustawić w samym skrypcie unitpngfix.js poprawną ścieżkę:

var clear="/resources/scripts/clear.gif" //path to clear.gif

Po tych zabiegach mozemy się cieszyć przezroczystymi obrazkami na naszej WWW. Sprawdziłem - działa :D

Na koniec muszę wspomnieć, że w kilku przypadkach skrypty mogą nie działać prawidłowo, np unitpngfix nie obsługuje własności background-position przez co napotkamy problem jeśli na przykład korzystamy z techniki CSS Sprites. Po szczegóły odsyłam do oficjalnej dokumentacji obu skryptów.

Komentarze

Opublikowany przez Piotr 2011-12-03 o 17:48

Czy unitpngfix.js można używać w komercyjnych projektach?

Opublikowany przez Restless 2011-12-05 o 13:08

Unitpngfix.js jest na licencji GPL, więc tak, można, ale zgodnie z zasadami tej licencji.

Polecam przeczytanie wpisu Nowakera na temat różnych sposobów licencjonowania: http://www.nowaker.net/devblog/ogolne...

Dodaj swój komentarz






Szczegóły wpisu

Opublikowany: 2009-06-30 o 09:02