Filip Markiewicz webmaster freelancer – IE PNG Fix, czyli jak uzyskać przezroczystość plików PNG w IE 6

IE PNG Fix, czyli jak uzyskać przezroczystość plików PNG w IE 6

Data dodania: 5 październik 2010r.

Tak… Stary, wadliwy, a jeszcze niestety często używany IE 6. Chyba nie ma webmastera, który nie miałby jakiegoś kłopotu z tą przeglądarką. Czy to problem z poprawnym wyświetlaniem elementów, czy bug niepozwalający na wyświetlanie przezroczystości w plikach PNG. Z tym pierwszym mozna sobie poradzić poprzez poprawny kod i właściwe Doctype (sporadycznie trzeba użyć alternatywnego arkusza CSS). Na przezroczystość plików PNG w IE 6 też jest sposób – hack IE PNG Fix. Jako, że oryginalna strona jest w języku angislekim, chciałem opisać to po polsku (choć wiem, że raczej z angielskim dzisiaj nie ma problemu), bo może akurat komuś się przyda. Nie będę tego tłumaczył słowo w słowo, a napiszę po swojemu – to tak gwoli ścisłości.

Cechy:

Obsługuje zwykłe obrazki <img src="" alt="" />
Wsparcie dla plików PNG stosowanych jako tło
Wsparcie dla background-repeat i background-position
Jest na licencji Wolnego Oprogramowania (Open Source)

Jak z tego korzystać

Na początku musimy pobrać wszystkie potrzebne pliki.
Nastepnie musimy wkleić pliki iepngfix.htc i blank.gif do głównego katalogu strony.
Teraz w naszym akruszu CSS muismy wpisać następujący kod:
Listing 1 – nadanie elementom img i div przezroczystego tła w IE 6, można tutaj wymienić inne selektory
```
img, div { behavior: url(iepngfix.htc) }
```
Jako selektor po przecinku wymieniamy wszystkie elementy, w których chcemy stosować ten hack.
Aby polecenia background-repeat i background-position działały, trzeba jeszcze umieścić w sekcji <head> dokumentu skrypt JavaScript, który nalezy oczywiście uprzednio skopiować do folderu ze stroną (jest w osobnym pliku, o nazwie iepngfix_tilebg.js).
Listing 2 – importowanie potrzebnego skryptu JavaScript
```
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
```

Na koniec jeszcze kilka uwag. Otóż, polecenie behavior dla W3C nie istnieje, więc walidator wypluwa błąd, dlatego najlepiej stworzyć osobny arkusz dla IE 6 i skorzystać z komentarza warunkowego, co by mieć bezbłędny CSS. Opróćz tego, z tego co zauważyłem, skrypt ten „gryzie się” ze skryptem Whatever:hover, który łata obsługę :hover w IE 6.

Komentarze

Nie ma jeszcze komentarzy. Dodaj komentarz