Dzisiejszy wpis może się wydać absurdalny, niepotrzebny, a na pewno będzie kontrowersyjny. CSS3 to przecież domena najnowszych przeglądarek, a IE6 ma ponad 10 lat! Każdy normalny front-end developer unika badzIEwia jak ognia, i słusznie. To stara, dziurawa przeglądarka. Ale...

css3 vs ie6


Problem

Mimo wszystko świat nie jest idealny - szefowie korporacji nadal kurczowo trzymają się niebieskiej ikonki IE6 jako wyznacznika "Internetu". Systemy bezpieczeństwa, wewnętrzne aplikacje - to wszystko stworzone konkretnie pod IE6 nagle ma zostać porzucone, bo Microsoft wydał kolejną wersję swojej przeglądarki? Przecież nie od dziś wiadomo, że strona internetowa czy portal nie są dla użytkowników, tylko dla zarządu korporacji. Nadchodzi moment, kiedy trzeba wybrać między pozostawieniem starego layoutu sprzed co najmniej 5 lat, a wprowadzeniem nowego, który będzie musiał być poprawnie wyświetlany przede wszystkim pod IE6. Inne przeglądarki to tylko dodatek, a wyboru nie ma dużego, bo tak ma być i kropka, nie będzie nawet możliwości wytłumaczenia dlaczego jest to złe podejście.

Rozwiązanie

Jeśli nie ma innego wyjścia, a opcja wyświetlenia choćby minimalnie uboższego wyglądu pod IE6 odpada w przedbiegach, pozostaje hakowanie. Przede wszystkim filtry, ale także pliki .htc lub pluginy do jQuery. Wolę grzebać się w IE6, niż podpisać się pod czymś, co wygląda jak ostatni krzyk webowej mody sprzed co najmniej kilku lat. Zobaczmy więc co trzeba zrobić, by IE6 ubrać w szaty CSS3. W miarę możliwości pokazane zostaną także rozwiązania dla wyższych wersji, na przykład IE7 czy IE8.

Przygotowania

Na początek warto wspomnieć o samym wczytywaniu stylów, zanim przejdziemy do konkretnych przykładów. Najwygodniejszym chyba rozwiązaniem jest warunkowe wczytywanie w sekcji <head> naszej struktury HTML dodatkowego pliku ze stylami, który będzie dedykowany konkretnym wersjom Internet Explorera. Możemy zdefiniować warunek, dzięki któremu nasz dodatkowy styl CSS będzie wyświetlany tylko dla IE w wersjach poniżej IE8 (włącznie):
<!--[if lte IE 8]>

  <link rel="stylesheet" type="text/css" href="ie.css" />

<![endif]-->


Cień elementu (box shadow)

Styl (a raczej filtr) umożliwiający uzyskanie efektu cienia danego elementu, który działa pod wszystkie wersje Internet Explorera wygląda następująco:
.box-shadow {

  /* wszystkie IE */

  filter: progid:DXImageTransform.Microsoft.Shadow(

    color='#999999', Direction=130, Strength=10);

}

Zobacz demo w IE: przykład 1.

Gradient liniowy (linear gradient)

Zobaczmy kolejny filtr, tym razem odpowiedzialny za efekt gradientu liniowego. W poniższym przypadku użyte są dwa filtry - jeden z przedrostkiem, drugi bez. Pierwszy jest wspierany przez IE8, natomiast drugi przez IE6 oraz IE7.
.linear-gradient {

  /* IE6, IE7 */

  filter: progid:DXImageTransform.Microsoft.gradient(

    GradientType=0, startColorstr='#999999', endColorstr='#333333');

  /* IE8 */

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(

    GradientType=0, startColorstr='#999999', endColorstr='#333333')";

}

Zobacz demo w IE: przykład 2.

Przezroczystość (opacity)

Następna w kolejności jest przezroczystość. Konstrukcji umożliwiających użycie tego efektu jest kilka, w zależności od wersji Explorera:
.opacity {

  /* IE6+ */

  filter: alpha(opacity=50);

  /* IE6+ */

  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

  /* IE8 */

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";

  /* IE9 */

  opacity: 0.50;

}

Zobacz demo w IE: przykład 3.

Paleta kolorów RGBA

RGBA, czyli kolor tła razem z przezroczystością. Także i tym razem na pomoc przychodzi nam filtr, jednak dodatkowo trzeba trochę pokombinować i zamiast rzeczywistej przezroczystości, ustawiamy gradient składający się z tego samego koloru:
.rgba {

  /* wszystkie IE */

  filter: progid:DXImageTransform.Microsoft.gradient(

    GradientType=0, startColorstr='#999999', endColorstr='#999999');

}

Zobacz demo w IE: przykład 4.

Wielokrotne tła (multiple backgrounds)

Kolejna dawka filtrów, tym razem także oddzielna porcja kodu dla IE8:
.multiple-background {

  background: transparent url(img/bg1.gif) top left repeat;

  /* IE6 - IE8 */

  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(

    src='img/bg2.gif', sizingMethod='crop');

  /* IE8 */

  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(

    src='img/bg2.gif', sizingMethod='crop')";

}

Zobacz demo w IE: przykład 5.

Obrót, transformacja (rotate, transformations)

Zobaczmy jak będzie wyglądać filtr dla tej właściwości. Minus tego podejścia polega na tym, że nie mamy możliwości obrotu co jeden stopień - zamiast tego mamy zdefiniowane cztery domyślne stany co 90 stopni:
.rotate1 {

  /* wszystkie IE */

  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

}

Zobacz demo w IE: przykład 6.

Możemy także spróbować bardziej zaawansowanych zabaw filtrem:
.rotate2 {

  /* IE6 – IE9 */

  filter: progid:DXImageTransform.Microsoft.Matrix(

    M11=0.9914448613738104, M12=-0.13052619222005157,

    M21=0.13052619222005157, M22=0.9914448613738104,

    sizingMethod='auto expand');

}

Zobacz demo w IE: przykład 7.

Niestandardowe czcionki (font-face)

Ten element jest z nami już od jakiegoś czasu, dla Explorera używany formatu czcionek .eot, natomiast inne przeglądarki mają swoje własne formaty. Wracając do Explorera:
@font-face {

  font-family: NazwaFonta;

  /* IE6 - IE8 */

  src: url("NazwaFonta.eot");

}

.font-face {

  font-family: NazwaFonta;

}

Zobacz demo w IE: przykład 8.

Cień tekstu (text shadow)

W tym przypadku niestety nie mamy do dyspozycji żadnych filtrów. Jeśli natomiast zdarzy nam się pracować z biblioteką jQuery, to śmiało możemy z niej skorzystać nadając tekstowi odpowiedni cień za pomocą odpowiedniego pluginu. Co prawda istnieje inny plugin całkowicie emulujący ten efekt, jednak użycie wcześniej wspomnianego korzysta z już zdefiniowanych stylów CSS3. Należy pamiętać, że jQuery oraz plugin powinny być dołączone w nagłówku strony. Zobaczmy style:
.text-shadow {

  text-shadow: #999 1px 1px 5px;

}

Kod jQuery, który wywołuje plugin:
$(document).ready(function(){

  $(".text-shadow").textShadow();

});


Zaokrąglone rogi (border radius)

Tu z kolei trzeba będzie skorzystać z jeszcze innego podejścia - specjalnego pliku .htc. Wystarczy dołączyć plik border-radius.htc do stylu danego elementu:
.border-radius {

  behavior: url(border-radius.htc);

}

Należy pamiętać, że ścieżka ustalana jest od folderu głównego naszej strony, a nie od miejsca, w którym znajduje się plik ze stylami css.

Zobacz demo w IE: przykład 9.

Przekształcenia (transitions) i wielkość tła (background size)

Niestety, te dwa elementy nie są w żaden sposób wspierane przez silnik Internet Explorera. A może jednak są, tylko je przeoczyłem? Za wszelkie podpowiedzi i sugestie w komentarzach dotyczące tych elementów lub całego wpisu będę bardzo wdzięczny.

Inne podejścia i narzędzia

Oprócz powyższych metod jest jeszcze kilka innych narzędzi, które mogą ułatwić nam życie. Do dyspozycji dostajemy jeszcze więcej plików .htc (CSS3PIE, ie3-css.htc), narzędzia do wykrywania funkcjonalności przeglądarki (Modernizr) lub dodawania obsługi selektorów (Selectivizr), jeśli te nie są domyślnie obsługiwane.

IE-CSS3.htc

Jeszcze jedno podejście do IE rozwiązujące nasze problemy przy użyciu pliku .htc. W tym przypadku, podobnie jak w poprzednim, skrypt sam radzi sobie z semantycznymi stylami:
.iecss3 {

  border-radius: 15px;

  box-shadow: 10px 10px 20px #000;

  behavior: url(ie-css3.htc);

}

Skrypt obsługuje border-radius, box-shadow i text-shadow. Szczegóły znaleźć można na stronie projektu. Tam także dokładne info o częściowym lub całkowitym wsparciu powyższych styli.

Zobacz demo IE-CSS3 w IE: przykład 10.

CSS3 PIE - Progressive Internet Explorer

CSS3 PIE to kolejny hak na Explorera, dzięki któremu możemy korzystać z możliwości niektórych efektów CSS3 w przeglądarkach IE6 do IE8. Oto przykładowy kod:
.css3pie {

  border-radius: 8px;

  box-shadow: #666 0px 2px 3px;

  -pie-background: linear-gradient(#EEFF99, #66EE33);

  behavior: url(PIE.htc);

}

Jak widać PIE korzysta ze stylów domyślnych emulując ich działanie (border-radius, box-shadow), a także dodaje własne do obsługi gradientów (-pie-background). Więcej info na stronie projektu.

Zobacz demo CSS3 PIE w IE: przykład 11.

Modernizr

Jest to narzędzie, które wykrywa wsparcie przeglądarki dla poszczególnych komponentów składających się na specyfikację CSS3 (a także HTML5), oraz inne, przydatne elementy. Odwiedź stronę projektu, by dowiedzieć się więcej. Należy pamiętać, że Modernizr jedynie wykrywa wsparcie dla CSS3, ale nie emuluje działania.

Selectivizr

Selectivizr natomiast jest biblioteką Javascript, która emuluje obsługę wielu zaawansowanych pseudoklas i selektorów CSS3 w przeglądarkach, które ich nie obsługują. Po więcej informacji zapraszam tutaj.

IETester

Warto na koniec wspomnieć o narzędziu przydatnym w testach - IETester. Nie widziałem go ładne kilka lat, od tego czasu mocno się zmienił. Teraz jest przeglądarką z zakładkami, w których możemy uruchamiać niezależne instancje IE od wersji 5.5 aż do IE9 (jest także miejsce na IE10, jak już zostanie opublikowane). Przydatny jest także serwis umożliwiający pobieranie screenów stron pod konkretne wersje przeglądarek - Browser Shots. Można także zajrzeć do tego wpisu i skorzystać z kilku wypisanych tam narzędzi.

Podsumowanie

W sieci znaleźć można wiele wpisów mówiących, że IE6 to ZŁO, z czym oczywiście się zgadzam. Należy wspierać nowoczesne przeglądarki, a archeologiczne wykopaliska odstawić do muzeum. Normalny człowiek zatroszczyłby się o najnowsze przeglądarki, przy okazji wykazał trochę wstecznej kompatybilności wyświetlając uboższe wersje strony bez bajerów CSS3 pod starsze przeglądarki, ale olał tego typu praktyki. Mimo wszystko czasami nie mamy innego wyjścia, jak robić coś, czego nie lubimy. Szczególnie, jeśli nad sobą mamy całą korporacyjną machinę. Wtedy na ratunek przychodzą nam różne dziwne, niekoniecznie słuszne rozwiązania - jak chociażby te wyżej opisane. Jeśli macie jakieś sugestie, poprawki do tekstu lub uwagi - jestem otwarty na wszystko, co związane z tematem, piszcie śmiało w komentarzach.