Luty 27, 2010 Kategorie: Internet Explorer - 3 Comments

PNG działający w każdej przeglądarce (IE6 IE7)

Co powinniśmy wiedzieć o PNG

Bez-nazwy-1
Następca gifa wprowadza półprzezroczystość (kanał alpha). Co znacznie ułatwia życie koderom szczególnie w sytuacji, gdy wodze fantazji zaczynają puszczać grafikom. PNG jest na wolnej licencji w przeciwieństwie do gifa. Używając odpowiednich programów bardzo dobra kompresja (przy zachowaniu świetnej jakości mały rozmiar plików). Wszystko wręcz wydaje się bajką jednak, zderzamy się z rzeczywistością IE6 zamiast naszego kanału alpha wyświetla szare tło, a IE7 przyciemnia nasze obrazki. W tym wpisie pokaże jak ominąć problemy z obiema przeglądarkami Microsoft’u. Co pozwoli nam na zastosowanie PNG w każdym projekcie bez obawy o interpretacje przeglądarek.

Ciemniejszy PNG pod IE6/IE7

Żeby pozbyć się efektu ciemniejszego PNG w IE6 oraz IE7 posłużymy się PngOptimizer na wolnej licencji (GNU). Jest bardzo prosty w użyciu za pomocą (Drag and Drop) przeciągnij i upuść poprawimy wyświetlanie naszych PNG.

1

Program możemy ściągnąć ze strony autora Download PngOptimizer

Kanał alpha w IE6

Po uporaniu się z IE7 pozostaje nam jeszcze IE6 i szare tło zamiast naszej półprzezroczystości. By zlikwidować ten problem użyjemy skryptu napisanego w JavaScript na licencji GNU (wolna licencja pozwalająca dowolnie wykorzystywać skrypt).

Skrypt dodajemy do naszych styli w sposób zaprezentowany poniżej. By nasz skrypt działał dla danego selektora, klasy czy identyfikatora musimy go dodać oddzielając przecinkiem. Aby uniknąć błędów należy skrypt (iepngfix.htc wraz z obrazkiem blank.gif) umieścić w głównym katalogu (razem z index). Nieskopiowanie obrazka blank.gif powoduje błędy w wyświetlaniu PNG umieszczonego bezpośrednio w HTML. Należy też podać dokładną wysokość i szerokość obrazka umieszczonego bezpośrednio w HTML by uniknąć niespodziewanego ze skalowania obrazka.

KOD CSS

1
2
3
img, a, input, #box {
        _behavior: url('iepngfix.htc');
}

KOD HTML

1
2
3
4
<div id="box">
        <p>Przykładowy text w tle #box obrazek png</p>
        <img src="images/obrazek.png" width="100px" height="100px" alt="" />
</div>

I link do pobrania paczki z iepngfix.htc oraz blank.gif Download iepngfix

Background-position/repeat używając iepngfix

Wydawałoby się, że już możemy w pełni cieszyć się obrazkami w PNG na naszej stronie. Jednak gdy chcemy użyć takich selektorów jak bg-position/repeat. Nie działają, ale oczywiście jest na to sposób. By uruchomić prawidłowe działający position/repeat dla tła należy dodać między sekcje HEAD w naszym pliku html następujący skrypt.

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

Do ściągnięcia pod adresem Download iepngfix-titlebg

Podsumowanie

Jak widać uruchomienie PNG pod IE6 nie należy do najprostszych. Jednak moim zdaniem kanał alpha jest tego warty. Po dodaniu wszystkich plików (iepngfix.htc, blank.gif, iepngfix_titlebg.js) musisz pamiętać, że każda nowo dodana klasa czy id z obrazkiem png w tle musi zostać zadeklarowana przy behavior, a każdy nowo dodany obrazek bezpośrednio w HTML musi mieć określoną wysokośc i szerokość.

Przetestowane pod: IE6, IE7, IE8, FF2.x, FF3.x, Opera, Google Chrome, Safari.

3 Responses to “PNG działający w każdej przeglądarce (IE6 IE7)”

  1. JaRo mówi:
    15-03-2010 o 19:15

    http://www.dillerdesign.com/experiment/DD_belatedPNG/

  2. admin mówi:
    16-03-2010 o 08:07

    Jest to kolejne bardzo dobre rozwiązanie, jednak nadal trzeba deklarować dla jakich elementów ma działać nasz skrypt. Ogólnie sposób działania bardzo podobny. Rozmiar plików również praktycznie ten sam, a więc kwestia własnych upodobań kto z jakiego fix’a korzysta.

  3. zapraszamy po zabawki edukacyjne mówi:
    08-05-2010 o 21:55

    Tez kiedyś ogarniałam podobne rzeczy. Niestety w chwili obecnej mam już dużo mniej czasu. Szkoda :9

Leave a Reply

«
»