Pisanie stron pod Internet Explorera
09 maja 2006
Internet Explorer - ukochana przeglądarka, której nie sposób zignorować (jaka szkoda, prawda?). Piszesz zgodnie ze specyfikacją, skończyłeś - klikasz na niebieskie „e” i pozostaje wyrwać sobie włosy. Postanowiłem więc zebrać kilka porad dotyczących tworzenia stron zgodnych ze standardami, nie powodujących u IE czkawki.
Termin „pisanie stron pod IE” który pojawia się tutaj nie odnosi się oczywiście do oldschoolowych napisów „Tę stronę należy oglądać w IE 3.0 i rozdzielczości 916x666px”. Po prostu znając tylko standardy sieciowe trudno jest zmusić poprawny dokument żeby dobrze wyświetlił się w przeglądarce nastawionej na niepoprawne strony. W artykule założyłem operowanie na IE6.0/win. Wiem, że czasem potrzeba zgodności z IE5.x, lecz należałoby napisać wiele więcej tekstu o różnicach. Gdzie będę mógł, zaznaczę problem z poprzednimi wersjami przeglądarki MS.
Wypisane tutaj porady są bardziej podpowiedziami niż wytycznymi. W większości przypadków da się znaleźć inny sposób rozwiązania problemu, bądź ugryźć go od drugiej strony. To co zebrałem to osobiste doświadczenia w takim pisaniu stron, aby dostosowywanie ich pod IE było kwestią kilku linijek CSS-a w oddzielnym arkuszu niż kilkugodzinnym hakowaniem.
Pierwszą zasadą jaką stosuję podczas projektowania stron które mają działać poprawnie na IE jest „nie przesadzać”. Chodzi o to, że pomimo istnienia wielu sposobów napisania fragmentu HTML-a albo CSS-a, nie powinniśmy rzucać się od razu na ten najlepszy. Najlepszy biorąc pod uwagę standardy, semantykę, oszczędność kodu i tak dalej.
Nie jest to złota reguła i jeśli posiadasz doświadczenie na temat zachowań naszej ulubionej przeglądarki, to spokojnie można spróbować wycisnąć z niej więcej. Jednak jeśli coś zaczyna nie grać, to najlepiej wrócić do podstawowej konfiguracji - a dopiero potem miarowo usuwać zbędny kod i jeśli nic się nie rozsypuje, podmieniać.
Doctype
Doctype to świętość, zgodzisz się raczej. Kto czyta ten artykuł wie o przełączniku typu dokumentu. Jest on bardzo ważny; bardzo ważne są też dodatkowe reguły, o których należy pamiętać pisząc strony pod IE.
Mając styczność z wieloma typami dokumentu założyłem, że najkorzystaniej pisać w XHTML 1.0 Strict i nijak ma się do tego moda. Czemu? Aby pisać strony i oczekiwać takich samych wyników należy dokładnie wiedzieć w jakim trybie będzie strona wyświetlana w różnych przeglądarkach.
Internet Explorer włącza tryb zgodny ze standardami gdy wykryje deklarację XHTML 1.0 w dowolnej wersji (Strict, Transitional, Frameset), XHTML 1.1 albo HTML 4.01 Strict. Doctype XHTML 1.0 Transitional i Frameset oraz HTML 4.01 Strict włączają w przeglądarkach Gecko tryb prawie standardowy - emulację zgodnego ze standardami wyświetlania stron Explorera1. Możnaby używać dowolnego XHTML albo ścisłego HTML 4.01 - ale pozostaje kwestia innych przeglądarek zgodnych ze standardami - na przykład Opery i Safari. Dlatego aby zapewnić sobie podstawę do bojów wybrałem XHTML 1.0 Strict. Nie musisz się z tym zgadzać, możesz wybrać inaczej. Mój wybór natomiast jeszcze mnie nie zawiódł.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Co do samego Doctype - musi być to deklaracja kompletna, z bezwzględną ścieżką do DTD. Musi być to pierwsza linijka dokumentu. Odpada prolog XML. Jeśli jesteś w stanie użyć (na przykład) PHP możesz dodać prolog dla przeglądarek innych niż IE2:
<?phpif ((isset($_SERVER["HTTP_ACCEPT"])and stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml"))or stristr($_SERVER["HTTP_USER_AGENT"],"W3C_Validator")) {header("Content-Type: application/xhtml+xml; charset=utf-8");echo '<?xml version="1.0" encoding="utf-8"?>';echo "\n";else { header("Content-Type: text/html; charset=utf-8"); }?>
W innym przypadku gdy IE nie zobaczy w pierwszej linijce Doctype dla XHTML 1.0 Strict nie włączy Standards Mode. No cookie.
hasLayout
Ustawianie layoutu było już przeze mnie opisywane. Teraz jednak parę test case'ów.
- Pozycjonowanie
- Jeśli potrzebujemy wypozycjonować jakiś element w odniesieniu do swojego rodzica (
relative→absolute), który to ma włączone pływanie bądź inne trochę bardziej zaawansowane przekształcenia, możemy natknąć się na problem. Explorer źle odnosi się do krawędzi boksu, przez co użycie na przykładleft: 100pxnie będzie wyglądało tak samo jak w innych przeglądarkach. Okej - można próbować ustawiać wartości tylko dla przeglądarki MS - lecz moim zdaniem nie tędy droga. Bo wystarczy zaaplikować rodzicowi pozycjonowanego elementuhasLayoutprzezzoom: 1(nie działa w IE5.x - tam używaj czegoś innego). Wyświetlanie wraca do normy. Wielokrotnie spotykałem się z tym błędem (także tutaj na blogu), a jego rozwiązanie jest jak widać dość proste. - Tło
- Czasem tak się zdarza, że tło elementu zaczyna mrugać podczas przewijania, zaznaczania tekstu albo uaktywniania
:hoverlinków. Explorer zjada połowę, przemieszcza obrazek i wyprawia inne podobne dziwacwa. Rozwiązanie jak wyżej -zoom: 1i po sprawie. - Inne
- Problemy z listami, już przeze mnie opisane. I inne, insze.
Resetowanie CSS
Resetowanie domyślnych stylów przeglądarki jest dobrym pomysłem, chociaż zależy to też od stopnia złożoności strony, nad którą pracujesz. Przykładowo IE wcina pozycje list za pomocą lewego marginesu, a Firefox używa padding. Sprowadzenie wszystkich marginesów i dopełnień do zera ułatwia pracę - od razu widać prostotę box modelu gdy włączasz float; nie rozpraszają cię też zagnieżdżone elementy. A pamiętając o zasadzie zapadania się pionowych marginesów możesz spokojnie odtworzyć style dla akapitów, etc.
Gdy nie przejmujesz się IE5.x pisz:
* { margin: 0; padding: 0; }
Selektor uniwersalny działa w IE6 i nowoczesnym świecie. W innym przypadku wypisz elementy po przecinkach. Ja sam mam zwyczaj wypisywania - to nie kosztuje zbyt wiele (zwłaszcza jak się te linijki kopiuje), a wpływa zbawiennie na dokument w starszych IE.
Overflow
Mam taką zasadę, że nie używam overflow jeśli nie muszę - oczywiście nie jest powiedziane, że jest ona zawsze słuszna. Jednakże modyfikacje sposobu wyświetlania zawartości wystającej spoza boksu zwykle powodują różnorakie dziwactwa w IE. Wartość auto albo hidden ustawiam tylko dla elementów które są wypełniane losową treścią i jej za duża ilość może popsuć resztę layoutu - listing kodu albo div z obrazkiem.
W przypadku rozciągnięcia nadrzędnego diva zawierającego na przykład dwa pływające pojemniki stosuję trzeci element i ustawiam mu clear: both. Jest to niesemantyczne rozwiązanie - jednak jak pisałem wcześniej w początkowej fazie projektowania strony najlepiej nie faszerować Explorera za dużą ilością zaawansowanego CSSa. Potem można wrócić i zobaczyć czy dokument nie dziwaczeje po zmianach.
CSS dla IE
Poradziłbym na początek jedno - nie używaj hacków. Jakkolwiek to nazwiesz: czy będzie to _underscore czy !important czy może * html, to błędy rozpoznawania CSS i już w IE7 się z wieloma z nich uporali. Testowanie strony, proces jej tworzenia - można sobie przyspieszyć pisząc _height: 200px, ok. Wypuszczając jednak gotowe dzieło nie dodawaj sobie masy pracy w przyszłości, gdy możesz załatwić problemy w IE za pomocą podlinkowania CSS w komentarzach warunkowych.
Przezroczystość
Ośmiobitowe PNG są alternatywą dla przezroczystych GIFów - IE wspiera je bez przeszkód. IE potrafi wyświetlać także transparentne PNG z kanałem alpha - za pomocą odpowiedniego filtra jesteśmy w stanie go do tego zmusić. Na ten temat powiedziano dużo słów, więc nie będę się dublował.
Jednak ciekawym, a zarazem prostym wyjściem bez obciążania przeglądarki filtrami, jest dithering. Przygotowałem prezentację kolejnych poziomów przezroczystości3:

Wystarczy usunąć białe tło i zapisać jako GIF / PNG8 z przezroczystością i dostajemy w rezultacie maskę, która nałożona na zdjęcie bądź tekst przesłoni go częściowo i stworzy iluzję przezroczystości. Zamiana czarnego na inny kolor oczywiście jest możliwa - wszystko zależy od tego co chcemy uzyskać (pamiętajmy jednak że bazą jest kolor 100% nieprzezroczysty).
Expressions
Expressions są kawałkami JavaScriptu wrzuconymi do CSSa. Dzięki nim można osiągnąć wiele niedostępnych zwyczajnie rezultatów. Na przykład max-width. Użytkownicy IE w większości nie wyłączają JavaScript, więc strona dostosowana za ich pomocą nie powinna sprawiać im problemów. Trzeba jednak pamiętać, że użyte w niewłaściwych własnościach mogą zawiesić przeglądarkę.
Więcej informacji o expressions.
Wyjątki i tipsy
Opisane przykłady rozwiązań prowadzących do w miarę znormalizowanych rezultatów w Internet Explorerze są podstawą do dalszych badań. Wszystkiego nie da się sklasyfikować, a IE posiada masę różnych dziwactw. Większość z nich można wyleczyć przez hasLayout, o części należy poczytać w mądrych publikacjach. Na inne wpadniesz sam.
Tak czy inaczej pozostaje mi życzyć powodzenia przy okiełznywaniu najstraszniejszej przeglądarki świata. ;) Po jakimś czasie wpada się w dobre nawyki i muszę przyznać, że jest to bardzo miłe uczucie. :)
- 1) Oksymoron. ;)
- 2) Kod ukradłem stąd, bo żaden ze mnie koder PHP. :)
- 3) Także plik źródłowy, jeśli chcesz wykorzystać wzorki (należy tylko pozbyć się białego tła).


