Internet Explorer a CSS

code 2620118 1920 Internet Explorer a CSS
Rate this post

Autor: Paweł Rajewski

Jedną z ciekawych cech Internet Explorera 6 są dwa sposoby interpretowania kodu HTML. W pierwszym interpretacja jest poprawiona i bliższa specyfikacji CSS niż to było dotychczas. W drugim jest identyczna jak w poprzednich modelach. W efekcie IE6 wyświetla poprawnie zarówno strony tworzone „pod” starsze Explorery, jak i strony zgodne ze standardem.

To, co cieszy użytkownika przeglądarki, stanowi problem dla twórcy serwisu. Skoro mamy dwa tryby pracy, musimy decydować, który z nich wybrać. A wybór między standardem i kompatybilnością nie jest łatwy.

1. Wymiary obiektów

Do wersji 6 Explorer interpretował kilka właściwości CSS niezgodnie ze specyfikacją, choć na swój sposób logicznie. Jedną z podstawowych różnic, mogących mieć wpływ na wygląd strony, jest interpretacja właściwości width i height w sytuacji, gdy obiekt posiada obramowanie i (lub) marginesy wewnętrzne. Oto przykład:

<DIV STYLE="width:100px; height:100px; padding:10px; border:20px solid 
#000000;">D1</DIV> 
<DIV STYLE="width:100px; height:100px; padding:0px; border:1px solid 
#000000;">D2</DIV> 

Zgodnie ze specyfikacją CSS na ekranie powinny pojawić się dwa kwadraty o zewnętrznych wymiarach: 160x160px (pierwszy) i 102x102px (drugi). Właściwości width i height określają bowiem wymiary zawartości obiektu, a marginesy i obramowania dorysowywane są do tej zawartości niejako dodatkowo.

W przypadku Internet Explorera „poniżej 6” (np. używanego przeze mnie 5.5) powyższy kod wygeneruje dwa kwadraty, obydwa o wymiarach 100x100px. Właściwości width i height są tu interpretowane jako pełne, zewnętrzne wymiary obiektu. Obramowania i marginesy wewnętrzne tworzone są kosztem wnętrza obiektu, które ulega ściśnięciu. Tym sposobem element mający „width:100px;” ma właśnie 100px szerokości niezależnie od tego jaki margines wewnętrzny i jakie obramowanie otrzyma. Takiemu rozwiązaniu nie sposób odmówić logiki, ale, niestety, nie jest to zgodne z CSS i może skutkować innym wyświetlaniem stron w Internet Explorerze, a innym w przeglądarkach bardziej zgodnych ze standardem.

Explorer „poniżej 6” nie jest przy tym konsekwentny. Obramowania do elementu IMG dodaje w sposób zgodny z CSS, czyli wokół grafiki (trudno zresztą inaczej) co zwiększa wymiary obiektu. Ba, do określenia szerokości komórki TD IE<6 używa kalkulacji zgodnej z CSS, a do określenia wysokości tej samej komórki - kalkulacji własnej. W efekcie zastosowanie pierwszego z przykładowych styli do komórki TD wyrysuje prostokąt o wymiarach 160x100px (!). Żeby było ciekawiej, ten efekt nie wystąpi w przypadku tabelek mających ustawioną właściwość table-layout:fixed (co, nawiasem mówiąc, zwiększa szybkość rysowania tabeli). W takim przypadku komórka będzie miała wymiary 100x100px czyli będzie niezgodna z CSS, ale przynajmniej w całości zgodna z "logiką" Explorera.2. Dwa tryby pracy

Od wersji 6 Explorer daje możliwość wyboru. Odpowiednim zapisem na stronie można przełączyć przeglądarkę albo w tryb zgodny z CSS (nazwijmy go „nowym”), albo w tryb zgodny z poprzednimi modelami („stary”). Ta sama strona może więc być interpretowana na dwa nieco odmienne sposoby. W tej sytuacji pojawia się dylemat. Jeśli zadeklarujemy na stronie zgodność z CSS, będzie ona wyświetlona tak samo przez IE6 i przez inne przeglądarki (zakładając, że nie mają swoich „tajemnic”, a pewnie mają!), ale mogą „polec” na niej starsze Explorery, których wciąż jest jeszcze w użyciu sporo. Jeśli zadeklarujemy zgodność ze starszymi modelami, wszystkie Explorery (i stare i nowe) wyświetlą stronę tak samo, ale błędy mogą pojawić się w innych przeglądarkach. Trzeba więc wybrać mniejsze zło narażając na ewentualne kłopoty mniejszą grupę odwiedzających (lub po prostu grupę dla nas mniej istotną). Tylko pozornie problem zniknie wraz ze starszymi przeglądarkami (IE<6), bo wciąż pozostaną starsze strony tworzone "pod" wcześniejsze Explorery (np. ciągle rozwijane archiwa). I znowu decyzja - przerabiać serwis w razie problemów, czasem łącznie ze skryptami, czy przełączyć przeglądarkę w "stary" tryb pracy ryzykując kłopoty u "nie-explorerowych" gości... Zważywszy, że większość polskich internautów korzysta z różnych wersji Internet Explorera, odpowiedź wcale nie jest oczywista. (Na zaprzyjaźnionej stronie o tematyce medycznej rozkład ruchu w marcu był następujący: Explorer 6 - 46%; Explorer 5 (wszystkie modele) - 49%; Explorer starszy niż 5 - 1%; inne przeglądarki - 4%).3. Tło strony

Drugą ważną różnicą pomiędzy „starym” i „nowym” trybem pracy jest zmiana tła strony (chodzi tu o powierzchnię, na której „rysowana” jest strona, a nie o ewentualny plik graficzny na niej wyświetlany). Explorery „poniżej 6” za tło strony przyjmowały element BODY. W wyniku tego minimalne wymiary BODY równe były wymiarom wnętrza okna – nawet, jeśli strona była pusta, zajmowała całą powierzchnię okna. Skutkowało to dość dziwnym traktowaniem właściwości margin dla elementu BODY, która tworzyła margines wewnętrzny podobnie jak padding.

W „nowym” trybie tłem strony jest element HTML. BODY nie ma już minimalnych wymiarów równych wymiarom okna, ale przejmuje wymiary od swojej zawartości zachowując się jak element DIV. Co więcej, wymiary BODY można ustawiać, odmiennie też traktowane są właściwości margin i padding. Tło strony można zdefiniować osobno dla BODY i dla HTML (przy czym HTML przejmuje parametry tła od BODY jeśli żadne parametry nie są ustawione w HTML).

Na prostych stronach problemy wynikające ze zmiany tła są niewielkie. Najczęściej znikają kolory z pasków przewijania. Właściwości pasków dla całej strony ustawia się w ramach obiektu będącego jej tłem, a więc w trybie „starym” – w BODY, a w trybie „nowym” – w HTML. Dotyczy to również właściwości takich jak overflow. (Ciekawostka: Explorer 5.5 honoruje kolory pasków ustawione w HTML, mimo że pracuje w trybie „starym”. Nie dotyczy to właściwości overflow).

Na skomplikowanej stronie może wystąpić więcej błędów. „Nowa” strona wyświetlona w trybie „starym” (np. Explorerem 5.5) straci większość właściwości ustawionych w HTML, a na ich miejsce przyjmie właściwości z BODY (przy okazji inaczej traktując marginesy). „Stara” strona wyświetlona w „nowym” trybie, poza wymienionymi kłopotami, przyjmie zmienne wymiary obiektu BODY co może wpłynąć na wyświetlanie elementów o wysokości okna np. często stosowanych w „starym” trybie tabelek o height:100%. Dramatyzm sytuacji oddaje poniższy przykład. Element BODY ma w nim kolor żółty. Wyświetl przykład w obu trybach i zobacz różnice (jak przełączyć tryby dowiesz się z dalszej części artykułu):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML STYLE="background:#FF0000;"> 
<HEAD> 
<TITLE>Test</TITLE> 
</HEAD> 
<BODY STYLE="margin:50px; background:#FFFF00;"> 
Test 
</BODY> 
</HTML> 

4. Skrypty

Różnice między trybami pracy mogą mieć wpływ na działanie skryptów. Najwyższy element, względem którego liczone są pozycje na stronie (jej tło), ulega zmianie. Inne mogą być wymiary BODY i inaczej traktowane są jego marginesy. Wreszcie, zmianie ulegają wymiary pozostałych elementów strony (interpretacja width i height). Wszystko to może „namieszać” w serwisach, w których skrypty pozycjonują lub mierzą obiekty. W razie problemów trzeba przerabiać stronę, albo… ustawić „stary” tryb pracy i w ten sposób ominąć kłopot. „Stary” tryb pracy wydaje się też lepszy dla stron korzystających z rozszerzeń Internet Explorera (właściwości, metod, zdarzeń), które i tak nie mają szans na działanie w innych przeglądarkach. W tym trybie mamy przynajmniej pewność, że strona zadziała tak samo na wszystkich Explorerach.

5. Błędy na stronie

Innego rodzaju kłopoty (choć już raczej z naszej winy) rodzi mniejsza tolerancja na błędy charakteryzująca „nowy” tryb pracy (tolerancja starszych Explorerów jest niezgodna z CSS). Strony, które pozornie dobrze funkcjonowały w IE5, mogą źle działać w IE6 w „nowym” trybie, nawet jeśli nie występują na nich przedstawione wyżej problemy. Po prostu starsze Explorery nie reagowały na błędy, których IE6 w „nowym” trybie już nie przepuści. Przykładowo:

  • W „nowym” trybie nie są tolerowane w stylach wartości bez jednostek lub spacje pomiędzy wartością i jednostką (poprzednie Explorery uznawały brak jednostki jako px i tolerowały spację).
  • Nie są tolerowane szesnastkowe definicje kolorów bez znaku # (poprzednie Explorery tolerowały taki błąd).
  • Znacznie ostrzej traktowane są błędne wartości (np. literówki) – odrzucany jest cały zapis, jeśli zawiera kilka wartości, a jedna z nich jest błędna (w starszych Explorerach zapis odrzucany był dopiero od miejsca wystąpienia błędu).
  • Słowa kluczowe (np. nazwy kolorów czy określenia typu visibility, block itp.) nie mogą występować w cudzysłowach (starsze Explorery pomijały takie zbędne cudzysłowy).
  • Nazwy klas i identyfikatorów nie mogą zaczynać się od cyfr. W nazwach tych istotna jest wielkość liter, a zatem CLASS=”lewa” to już nie to samo co CLASS=”Lewa” (starsze Explorery tolerowały cyfry na początku i nie rozróżniały wielkości liter).
  • Nie są tolerowane HTML-owe komentarze w arkuszu stylów (z wyjątkiem znaków komentarza obejmujących cały, zagnieżdżony na stronie, arkusz).

6. Nowe możliwości

„Nowy” tryb pracy posiada nieco nowych możliwości (interpretuje właściwości i uznaje wartości, które dotychczas nie były rozpoznawane), ale to nie powinno mieć wpływu na działanie już istniejących stron. Mogą natomiast pojawić się kłopoty w przeciwnym kierunku (czyli dla starszych Explorerów lub po przełączeniu w „stary” tryb pracy). Np. w „nowym” trybie tabelki dziedziczą parametry czcionki, co dotychczas nie miało miejsca (jeśli więc oprzesz na tym wygląd swojej strony, problemy w IE<6 murowane). W "nowym" trybie interpretowana jest wartość auto dla marginesów, w "starym" trybie jest ona nieznana itd. Tworząc stronę w "nowym" trybie, a chcąc zapewnić jej działanie w starszych przeglądarkach (IE<6), trzeba upewnić się, że używane właściwości są poprawnie interpretowane przez poprzednie modele Explorera. Tworząc stronę w "starym" trybie taką pewność mamy automatycznie.7. Przełączanie

Tryb pracy Explorera 6 ustalany jest na podstawie deklaracji dokumentu. Istotne są tu trzy elementy: nazwa i wersja języka, z jakim zgodna jest strona (HTML, XHTML lub XML), definicja strony (Transitional, Frameset lub Strict) i URL definicji. Oto typowe deklaracje dla stron napisanych w HTML 4.0 – zawierające i nie zawierające URL (Transitional – to strona „zwykła”, Frameset – strona z definicją ramek):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> 

Internet Explorer 6 traktuje deklaracje !DOCTYPE następująco:

  • Gdy brakuje deklaracji !DOCTYPE – pracuje w trybie „starym”.
  • Gdy język strony określony jest jako zgodny z HTML 2.0, lub HTML 3.0, lub HTML 3.2 – zawsze pracuje w trybie „starym” (niezależnie od obecności lub nieobecności URL-a).
  • Gdy język określony jest jako HTML 4.0, strona zdefiniowana jako Transitional lub Frameset i brak URL – pracuje w trybie „starym”.
  • Gdy język określony jest jako HTML 4.0, strona zdefiniowana jako Transitional lub Frameset i URL jest obecny – pracuje w trybie „nowym”.
  • Gdy język określony jest jako HTML 4.0 i strona zdefiniowana jako Strict lub w ogóle brakuje tej definicji – zawsze pracuje w trybie „nowym”.
  • Gdy język określony jest jako XHTML, lub XML, lub HTML o nieznanej wersji – zawsze pracuje w trybie „nowym”.
  • Gdy deklaracja !DOCTYPE jest obecna, ale nie jest rozpoznana (zawiera niezrozumiałe zapisy) – zawsze pracuje w trybie „nowym”.

Jak widać, istotny wybór mamy dla stron pisanych w HTML 4.0 – obecnością lub nieobecnością URL-a można przełączać IE6 w odpowiedni tryb pracy (dwie pierwsze deklaracje przykładu to tryb „nowy”, dwie ostatnie to tryb „stary”). Podkreślam, że cecha ta dotyczy wyłącznie IE6 (i pewnie także nowszych). Wcześniejsze Explorery czytają wszystkie strony w trybie „starym”.

Warto zauważyć, że tworząc stronę w coraz popularniejszym XHTML-u automatycznie włączamy „nowy” tryb pracy. A to znaczy, że Explorery starsze niż 6, choć w zasadzie odczytają taką stronę poprawnie, będą narażone na błędy wynikające z opisanych w poprzednich punktach różnic (wymiary, tło, skrypty). Pisząc stronę w XHTML-u trzeba więc postępować ostrożnie, a najlepiej przetestować ją również na IE5. Podobnie jak tworząc stronę w HTML 4.0, jeśli podajemy w deklaracji URL.

Z drugiej strony, mając zainstalowaną przeglądarkę z rodziny IE5 nie można skutecznie przetestować strony pracującej w trybie „nowym” (pisanej w XHTML-u lub HTML 4.0 z URL-em). Jeśli mimo to decydujemy się na tworzenie takiej strony, musimy postępować z dużą dozą wyobraźni i unikać rozwiązań różniących od siebie obydwa tryby.

8. Ostrożność

Mając świadomość różnic w interpretowaniu stylów, a jednocześnie chcąc zachować zgodność z CSS, warto unikać rozwiązań zwiększających ryzyko błędu. W miejsce padding obiektu próbować używać margin dla jego zawartości (bo padding traktowany jest różnie, a margin tak samo w obu trybach). Unikać obramowań, a jeśli już są stosowane, przewidzieć, że raz mogą być „doliczone” do wymiarów obiektu, a raz nie. Nie opierać się na domyślnych zachowaniach takich jak dziedziczenie czcionek przez tabelki czy względne rozmiary czcionek. Starać się omijać nowe wartości (np. auto) i właściwości (np. min-height). Unikać nawet drobnych błędów w zapisie – błędów, które nie miały wpływu na pracę starszych wersji Explorera, a które boleśnie objawią się w wersji nowej. I wreszcie – stosować odpowiedni tryb pracy przeglądarki zależny od potrzeb i oczekiwanych efektów.

Paweł Rajewski

Skomentujesz?

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Administratorem Twoich danych osobowych będzie Rafał Płatek, prowadzący działalność gospodarczą pod firmą CREAM.SOFTWARE RAFAŁ PŁATEK, wpisaną do rejestru ewidencji gospodarczej CEiDG pod numerem NIP 681-112-89-55. Szczegóły związane z przetwarzaniem danych osobowych znajdziesz w polityce prywatności.