Projektowanie stron www i wiele innych :)

Format plików graficznych .PNG jest wciąż niedoceniany przez projektantów stron. Trochę to dziwi gdy w porównaniu z dwoma najpopularniejszymi typami plików, gif i jpg, format ten ukazuje bardzo wiele zalet i jedynie nieliczne wady. Jedną z tych wad, jest wyświetlanie kanałów alfa (przeźroczystych gradientów) w Internet Explorer. Jest to właściwie wada nie samego rozszerzenia, ale archaiczności IE (przynajmniej co wersji 6.0) – jednak potrafi skutecznie zniechęcić do stosowania plików PNG.

Wychodząc naprzeciw temu problemowi chciałem wam przekazać bardzo prostą metodę rozwiązania tego problemu. Sam stosuje ją już od dłuższego czasu i sprawdza się znakomicie.

Otóż mamy sobie plik PNG z kanałem alfa – oczywiście np. w firefox wyświetla się pięknie, jednak w Internet Explorer… okropieństwo. Pierwsze co robimy to nadajemy plikowi klasę:

<img class=”png” src=”jakiś_plik.png” alt=”blablabla”>

Dla przejrzystości jest to klasa o nazwie png, ale oczywiście możemy ją nazwać jak chcemy.

Następnie w pliku ze stylami albo bezpośrednio w naszej stronie (jak kto woli, ale lepiej tworzyć style w plikach zewnętrznych) definiujemy klasę png:

img.png{
behavior: url(iepngfix.htc);
border: 0px solid black;
}

Jak widać musimy jeszcze tylko utworzyć plik iepngfix.htc. Ponieważ jest on dość długi nie będę go tu cytował – po prostu ściągnijcie go stąd.

I to już!! Wszystko powinno pięknie śmigać. Jest wiele podobnych rozwiązań jednak to jest najprostsze i najbardziej niezawodne. Niestety jego mankamentem jest to, że nie obsługuje teł z plikami png z kanałami alfa… Z tego co się orientuję nie powstało żadne rozwiązanie tego problemu… ale jeżeli się mylę (a chciałbym) to piszcie.

Dawno nie było żadnej notki, ale są powody ku temu. Właśnie powstała i została opublikowana nowa wersja mojego firmowego Portfolio (dostępnego tutaj -> projektowanie stron www). Poza – jak mi się wydaje – dość ciekawego layoutu zastosowane zostało kilka dość oryginalnych rozwiązań, a mianowicie: menu, ze zmieniającymi się obrazkami, dynamicznie poruszające się logo i nawigator oraz „inteligentny” formularz kontaktowy.

Mogłoby się wydawać, że menu nie prezentuje sobą niczego nowego – w końcu tego typu nawigacje wykonaną w javascript można spotkać na każdej amatorskiej stronie www (co jest beznadziejnym błędem – tak na marginesie). Z tym, że to menu nie jest wykonane w javascript a w css Dzięki temu zachowujemy pełne bezpieczeństwo i nie rezygnujemy z urozmaicenia.

Dynamicznie poruszające się logo oraz szybki nawigator to też zasługa css. Choć mogłoby się w pierwszym momencie wydawać, że to ramka to z pewnością stosując ramki nie dałoby się uzyskać takiego samego efektu. Nie mówiąc o anachroniczności stosowania ramek.

Inteligentny formularz kontaktowy nie jest może tak inteligentny jakby mógł być – nie sprawdza np. poprawności wpisanego e-maila, (postanowiłem zrezygnować z tego zakładając prawdziwą chęć kontaktu ze mną, a nie testowanie formularza przez odwiedzających) ale za to sprawdza wypełnienie trzech obowiązkowych pól oraz robi coś czego zawsze brakuje mi w większości formularzy kontaktowych jakie można znaleźć na stronach www – po wypełnieniu i zatwierdzeniu pól pokazuje ich treść dając możliwość przeczytania tego co się napisało i wprowadzenia ewentualnych poprawek. To bardzo ułatwia życie.

To chyba tyle z ciekawostek. Jeżeli zainteresowałyby kogoś szczegóły – służę kodami źródłowymi.