Przezroczystość i półprzezroczystość elementów stron WWW

Przezroczystość

Zdarza się, że niektóre elementy strony powinny być przezroczyste. Być może słowo elementy, nie jest najlepszym określeniem, bo zazwyczaj przezroczyste są tylko pewne obszary obrazków. Nie istnieje sens tworzenia przezroczystych (zupełnie) elementów. Istnieją dwa ogólnie przyjęte formaty graficzne obsługujące przezroczystość. Są to GIF oraz jego zastępnik, opracowany przez W3C, dużo doskonalszy format PNG. Żadna z popularnych przeglądarek nie ma problemów z obsługą przezroczystości w formacie GIF, natomiast z formatem PNG są już większe problemy. Mianowicie dominująca przeglądarka Microsoftu - Internet Explorer, wśród wielu swoich niedoróbek, posiada także problemy z obsługą przezroczystości w tym formacie. Zachowanie tej przeglądarki po zetknięciu się z przezroczystością zazwyczaj jest nie do przewidzenia. W większości przypadków zamiast stworzyć przezroczysty obszar zamaluje go na czarno, niebiesko, lub w kolorze, który jest w palecie określony jako przezroczysty. Na dzień dzisiejszy PNG mimo swoich wielu zalet i możliwości pozostaje w tyle, ponieważ nadal istnieją problemy z jego obsługą.

Półprzezroczystość w obrazkach

Każda osoba, która miała kiedykolwiek styczność z jakimkolwiek programem graficznym z obsługą warstw, wie, że warstwy mogą być w pewnym stopniu prześwitujące. Wiele osób chciałoby przenieść ten efekt na strony internetowe. Nic prostszego! Taką możliwość oferuje właśnie format PNG (w przeciwieństwie do GIF), a konkretnie jedna jego składowa część: kanał alpha. Kanał alpha pozwala określić stopień przezroczystości od 0 do 255 (256 poziomów przezroczystości). Czyż to nie jest niesamowite? Zapewniam Was. Strony, na których wykorzystuje się te możliwości (oraz są z głową ułożone) wyglądają wyśmienicie. Ale nie nic za darmo. Tak samo jak poprzednio w opozycji stoi najpopularniejsza przeglądarka. Nie odczytuje ona kanału alpha w plikach PNG. Na szczęście Microsoft wymyślił "nowoczesną technologię", która ma zniwelować tą niedogodność. W stylu obrazka (<img src="..." alt="..." style="xxx" />) wystarczy (!) wpisać taką komendę:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='obrazek.png', sizingMethod='scale');

Jest to wykorzystanie filtrów DirectX, czyli pomysłu, który jak dotąd nie sprawdził się i raczej nie ma przed sobą świetlistej przyszłości.
Mozilla i Opera obsługują kanał alpha bezproblemowo.

Elementy półprzezroczyste

Niesamowitym efektem jest również półprzezroczystość niektórych elementów, szczególnie tych, które "pływają" i przysłaniają inne obiekty w dokumencie. Na przykład nagłówek strony, zawarty w kontenerze, który zawsze jest na górze okna. Tekst się przewija, nagłówek na niego zachodzi, ale wciąż widać i tekst i nagłówek.
Na razie nie istnieje ujednolicony sposób określania półprzezroczystości elementów (na razie = do czasu opublikowania CSS3). Przeglądarki oparte na silniku Gecko (Mozilla, Firebird itp.) oraz Internet Explorer mają zupełnie odmienne sposoby określania przezroczystości elementów. W Internet Explorerze ta operacja odbywa się przy pomocy filtrów DirectX. W stylu dla konkretnego elementu należy wpisać linijkę podobną do poniższej:

filter: Alpha(Opacity=50, FinishOpacity=50, Style=-1, StartX=0, StartY=0, FinishX=150, FinishY=150)

gdzie Opacity i FinishOpacity to wartości (od 0 do 100) przezroczystości odpowiednio początkowej i końcowej. Jeśli są równe, przezroczystość będzie liniowa. StartX, StartY, FinishX i FinishY to współrzędne obszaru obiektu, dla którego to będzie obowiązywała półprzezroczystość. Style oznacza rodzaj gradientu, w tym przypadku liniowy. Teraz już chyba wszyscy wiedzą dlaczego filtry DX nie zyskały popularności. Długi i skomplikowany zapis oraz praktycznie żadna zgodność ze standardami. No cóż, Microsoft miał pomysł, ale realizacja nie wyszła.

Zupełnie odmienny sposób określania półprzezroczystości prezentują przeglądarki oparte na silniku Gecko (Mozilla, Firebird itp.). Ponieważ silnik Gecko obsługuje już część CSS3 postanowiono zaimplementować również jedną z właściwości, mianowicie opacity. Zgodnie z zaleceniami W3C dodano do tego przedrostek -moz i tak narodziła się właściwość -moz-opacity. Przyjmuje ona wartości od 0 do 1.00 (czyli na przykład: 0.5 lub 0.24). Wartość 1.00 oznacza całkowitą przezroczystość. Właściwość -moz-opacity jest również stylem, więc powinna być jako taki traktowana. Rozwiązanie Gecko, mimo, że nie zapewnia tylu opcji co rozwiązanie Microsoftu jest dużo wygodniejsze w użytkowaniu i ma jedną podstawową zaletę: jest elementem CSS3! Ale w tym wypadku również coś za coś. Walidator CSS, jeśli napotka na tą właściwość potraktuje ją jako błędną (bo do czasu ustanowienia CSS3 oraz późniejszego usunięcia przedrostka -moz błędną jest). Tak samo walidator postąpi w przypadku rozwiązania Microsoftu.