Quirks mode, strict mode: dwa tryby pracy przeglądarek internetowych

Współczesne przeglądarki internetowe oferują dwa tryby pracy: quirks mode (ang. tryb wstecznej zgodności, tryb dziwactw) oraz strict mode (ang. tryb standardów). Myśląc o tworzeniu witryn zgodnych ze standardami należy uwzględniać tryb pracy przeglądarki.

Tryby pracy przeglądarek

Można powiedzieć, że quirks mode jest przeznaczony do interpretacji starych witryn niezgodnych ze standardami, zaś strict mode – do interpretacji witryn przestrzegających standardów W3C. Różnice interpretacji witryn w obu trybach dotyczą wyłącznie arkuszy stylów CSS.

Oba tryby są konieczne i występują we wszystkich przeglądarkach. Obecność trybu quirks mode jest wymuszona przez ogromną ilość stron WWW, które były przygotowane w czasach, gdy standardy sieciowe dopiero powstawały. Witryny takie:

• nie stosują CSS w ogóle lub w bardzo ograniczonym stopniu,
• arkusze stylów są często niezgodne ze specyfikacją CSS i opierają się na rozwiązaniach, które wystąpiły w jakiejś archaicznej przeglądarce,
• nie zawierają deklaracji DOCTYPE (lub zawierają jedną z postaci HTML 4 Transitional),
• stosują tabele do układu strony,
• stosują różne przestarzałe znaczniki (na czele z font i center).

Dla przeglądarki nie pozwalającej na odwiedzanie witryn niezgodnych ze standardami niedostępna byłaby większa część internetu. Takie oprogramowanie byłoby bezużyteczne.

Najprawdopodobniej liczba witryn zgodnych ze standardami będzie w ciągu najbliższych lat rosła. Czy jednak w przyszłości nastąpi całkowite przejście na tryb strict (do tego stopnia, że tryb quirks zniknie z przeglądarek)? Z uwagi na ilość witryn, które należałoby poddać aktualizacji, raczej nie jest to perspektywa najbliższych kilku lat.

Chociaż należy zauważyć, że główny czynnik wstrzymujący przejście na tryb strict przestaje mieć znaczenie. Czynnikiem tym jest procent przeglądarek wymagających przystosowania witryn do quirks mode. Według najnowszych badań dostępnych na witrynie http://www.ranking.pl przeglądarki wspierające strict mode stanowią 92,1% (IE 6.x, Firefox 1.x, Opera 9.x).

Dodam jeszcze, że w obydwu tych trybach przeglądarka ignoruje wszelkie błędy HTML oraz CSS. Praca w trybie strict nie oznacza, że przeglądarka informuje o błędach. Różnica pracy w obu trybach polega na tym, że w trybie strict interpretacja CSS będzie (lub powinna być) zgodna z ustaleniami zawartymi w specyfikacjach dostępnych na stronie W3C. Natomiast w trybie quirks wystąpi wiele różnic, których istnienie ma podłoże historyczne.

Przykładowe różnice w interpretacji CSS w trybach quirks oraz strict

Różnice w interpretacji stylów CSS to:

• wyznaczanie szerokości pudełka,
• centrowanie elementów blokowych,
• wyświetlanie obrazów.

Pierwszy problem polega na tym, że wpis:

div {
    width : 100px;
    margin : 20px;
}

będzie błędnie interpretowany przez IE5 oraz IE6 (ale tylko w trybie quirks). IE5 ustali faktyczną szerokość elementu na 100, podczas gdy prawidłowa wartość powinna wynosić 140 (100 + lewy margines 20 + prawy margines 20).

Drugi problem polega na tym, że wyśrodkowanie elementu blokowego wykonywane prawidłowo:

margin : 0 auto;

nie zadziała w IE5. W przeglądarce tej należy użyć atrybutu:

text-align : center;

Wreszcie trzeci problem, wyświetlanie obrazków, dotyczy wielu przeglądarek, nie tylko IE. Element img, który pierwotnie był elementem blokowym, po wprowadzeniu stylów CSS został przemianowany na element tekstowy. Pod obrazkami pojawiła się kilkupikselowa pozioma przerwa. Wynika to z tego, że wysokość elementów tekstowych jest tak dobrana, by w linii zmieściły się litery takie jak j, p czy g, sięgające poniżej linii centralnej tekstu. Problem ten rozwiążemy zmieniając typ elementu img:

img {
    display : block;
}

lub wysokość linii elementu blokowego, w którym obraz został umieszczony:

line-height : 0;

Problemy z trybami pracy

Głównym zmartwieniem jest to, że ta sama witryna może wyglądać inaczej w tej samej przeglądarce – inaczej w trybie strict, a inaczej trybie quirks. Czyli do całego galimatiasu przeglądarkowego należy doliczyć jeszcze jeden czynnik: tryb pracy. Czynnikami, które mogą wpływać na wygląd witryny są więc:

• rodzaj przeglądarki (np. IE/FF/Netscape/ Opera),
• wersja przeglądarki (np. IE5, IE6 lub Netscape 4.75, Netscape 8),
• tryb pracy przeglądarki.

Czasami zdarza się, że strona, która przed sekundą wyglądała poprawnie, bez wprowadzania jakichkolwiek zmian w stylach czy w kodzie HTML nagle się rozjeżdża. Winny jest właśnie tryb pracy przeglądarki. Witryna, która poprawnie wygląda w trybie strict, może rozjeżdżać się w trybie quirks. I na odwrót. Zatem badając wygląd witryny trzeba mieć na uwadze tryb pracy przeglądarki.

Jak stwierdzić tryb pracy przeglądarki?

Tryb pracy przeglądarki możemy stwierdzić wykorzystując skrypt JavaScript. Jeśli w dokumencie HTML umieścimy kod:

to ujrzymy komunikat informujący o trybie pracy przeglądarki podczas interpretacji tego konkretnego dokumentu. Komunikat CSS1Compat oznacza, że dokument jest interpretowany w trybie standardów (strict mode). Natomiast komunikat BackCompat oznacza, że przeglądarka działa w trybie wstecznej zgodności (quirks mode). Rozwiązanie takie zadziała w przeglądarkach: FF, IE6, Opera, Netscape, natomiast nie zadziała w IE5.

Dodatkowo, korzystając z Firefoksa możemy posłużyć się oknem dialogowym Narzędzia > Informacje o stronie. Rys. 1 przedstawia informacje o witrynie interpretowanej w strict mode (Tryb standardów). Natomiast rys. 2 przedstawia informacje o witrynie interpretowanej w quirks mode (Tryb wstecznej zgodności).

Zaletą tego rozwiązania jest fakt, że nie musimy wprowadzać jakichkolwiek zmian w kodzie HTML. Dzięki temu można zbadać tryb wyświetlania dowolnej witryny w internecie (a nie tylko stron tworzonych przez siebie).

W jaki sposób przeglądarka wybiera tryb pracy?

Do tego służy element DOCTYPE. Technika taka jest nazywana w terminologii anglojęzycznej doctype switching lub doctype sniffing. Brak elementu DOCTYPE wymusza tryb quirks. Pomijając DOCTYPE tworzymy witryny, które są interpretowane w trybie quirks, a co za tym idzie wszelkie rozwiązania HTML/CSS trzeba ponownie zweryfikować w trybie standardów.

W zależności od stosowanego elementu DOCTYPE różne przeglądarki mogą pracować w różnych trybach. Najprostszą regułą jest:

• brak elementu DOCTYPE włącza tryb quirks,
• element DOCTYPE języka XHTML 1.0 strict włącza tryb strict.

Oto pełna postać elementu DOCTYPE języka XHTML 1.0 strict:

Bardziej skomplikowane reguły przełączania trybów różnych przeglądarek znajdziemy pod adresem http://hsivonen.iki.fi/doctype/. Co ciekawe, nowe, nieznane elementy DOCTYPE włączają tryb zgodności ze standardami.

Wybór trybu pracy przeglądarki dotyczy wyłącznie dokumentów opatrzonych nagłówkiem Content-Type: text/html. Dokumenty o nagłówku Content-Type: application/xhtml+xml są zawsze interpretowane w trybie standardów.

Problemy z IE

IE wymaga, by element DOCTYPE był pierwszym elementem na stronie WWW. Jeśli przed DOCTYPE umieścimy jakikolwiek komentarz HTML:

...

lub znacznik XML:

...

to IE będzie pracował w trybie quirks. Należy zatem pilnować, by przed DOCTYPE nie umieszczać żadnych wpisów (przynajmniej w wersji wysyłanej do IE).

Problemy z różnicami IE5/IE6

Problemy z przeglądarką IE nie kończą się na zagadnieniach opisanych w poprzednim punkcie. Znacznie poważniejszym problemem jest wspomniany błąd w interpretacji szerokości pudełka. Opis tego problemu znajdziemy pod adresem http://en.wikipedia.org/wiki/Internet_Explorer_ box_model_bug.

W skrócie, IE5 wyznacza szerokość elementu wyłącznie na podstawie atrybutu width. Prawidłowo: powinien do atrybutu width dodać marginesy, padding oraz obramowanie. Jeśli na przykład w kodzie HTML pojawi się element div:

Lorem ipsum...

opatrzony stylami:

#tekst {
    width   : 200px;
    padding : 50px;
}

to IE5 ustali jego szerokość na 200 pikseli, podczas gdy prawidłowa wartość wynosi 300 pikseli (tj. 200 + lewy padding 50 + prawy padding 50 = 300).

Problem ten dotyczy IE5 (przeglądarka ta ma tylko jeden tryb pracy: quirks; nie ma trybu strict) oraz IE6 w trybie quirks (IE6 w trybie strict poprawnie interpretuje szerokość pudełka).

Jakie są konsekwencje tego błędu? Wbrew pozorom dość poważne. Jeśli bowiem zechcemy pracować w trybie strict i tworzyć witryny zgodne ze standardami, to na przeszkodzie stanie przeglądarka IE5 (wykorzystywana – wg danych z http://ranking.pl – przez 2,7% polskich internautów).

Witryna zgodna ze standardami będzie poprawnie interpretowana przez IE6, zaś błędnie przez IE5. Jak zatem przygotować arkusze stylów, które będą inne dla przeglądarki IE6 (i wszystkich przeglądarek pracujących w trybie strict), a inne dla IE5? Czy da się przygotować rozwiązanie powyższego problemu bez stosowania technik po stronie serwera (np. PHP i wartości $_SERVER[\’HTTP_USER_AGENT\’])?

Rozwiązanie pierwsze: zmiana atrybutów CSS w JavaScript

Pierwsze z rozwiązań wykorzystuje skrypt JS. Skrypt zawiera jedną funkcję o nazwie {stala}przestyluj(){/stala}. Funkcja ta jest wywoływana po pobraniu dokumentu, przed wyświetleniem. Dzieje się to dzięki wykorzystaniu zdarzenia {stala}onload{/stala} elementu {stala}body{/stala}:

...

...

Wewnątrz funkcji odbywa się sprawdzenie, czy przeglądarka to Internet Explorer:

if (navigator.userAgent.indexOf(\"MSIE\") != -1) {
    ...
}

Jeśli tak, to dalej sprawdzamy, czy przeglądarka potrafi pracować w trybie strict mode. Fakt ten stwierdzamy porównując document.compatMode z wartością CSS1Compat. Jeśli tak, to podajemy poprawną wartość width wynoszącą 200. W przeciwnym razie (czyli dla przeglądarki IE5) podajemy błędną wartość width równą 300:

if (document.compatMode == \'CSS1Compat\') {
    //style dla IE w trybie strict (np. IE 6)
    var tmp = document.getElement ById(\"tekst\");
    tmp.style.width = 200;
} else {
    //style dla IE w trybie quirks (np. IE 5)
    var tmp = document.getElement ById(\"tekst\");
    tmp.style.width = 300;
}

Oczywiście rozwiązanie takie zadziała offline (nie wymaga ono PHP) pod warunkiem, że włączona jest interpretacja skryptów JavaScript.

Kompletny kod funkcji {stala}przestyluj(){/stala} jest przedstawiony na listingu 1.

function przestyluj()
{
    if (navigator.userAgent.indexOf(\"MSIE\") != -1) {
        if (document.compatMode == \'CSS1Compat\') {
            //style dla IE w trybie strict (np. IE 6)
            var tmp = document.getElementById(\"tekst\");
            tmp.style.width = 200;
        } else {
            //style dla IE w trybie quirks (np. IE 5)
            var tmp = document.getElementById(\"tekst\");
            tmp.style.width = 300;
        }
    }
}

Niektóre atrybuty CSS mają dwuczłonowe nazwy. Separatorem członów jest dywiz (czyli znak -), np.:

padding-left
margin-right
border-top

Do atrybutów takich możemy odwoływać się w JavaScripcie, pisząc:

tmp.style.padding_left = 8;
tmp.style.margin_right = 8;
tmp.style.border_top = 8;

Zwróćmy uwagę, że znak – (dywiz) został zastąpiony przez podkreślenie _. Jest to konieczne, gdyż znak – (dywiz) nie może być – w języku JavaScript – fragmentem identyfikatora. Pełny opis właściwości CSS znajdziemy w dokumencie pt. Document Object Model (DOM) Level 2 Style Specification pod adresem http://www.w3.org/TR/DOM-Level-2-Style.

Notacją alternatywną jest:

tmp.style.border = \"1px solid black\";
tmp.style.padding = \"0px 10px 20px 30px\";

Rozwiązanie drugie: komentarze HTML będące instrukcjami dla IE

Drugim, lepszym, sposobem dostarczenia odmiennych stylów dla IE5 oraz IE6 jest wykorzystanie specjalnych komentarzy HTML, interpretowanych wyłącznie przez przeglądarki IE. Komentarz taki przyjmuje postać:

lub:

Każda inna przeglądarka powinna oba powyższe wpisy potraktować jako komentarze HTML (są one umieszczone pomiędzy ). Natomiast IE (bez względu na wersję) potraktuje je jako instrukcje if. Warunki instrukcji zawierają operatory {stala}gte{/stala} oraz {stala}lt{/stala}. Są to skróty od angielskich terminów greater than or equal (ang. większe niż lub równe) oraz less than (ang. mniejsze niż). Jeśli więc w dokumencie HTML umieścimy wpisy:

to IE6 otrzyma poprawną wartość 200, zaś IE5 wartość 300, uwzględniającą błąd wyznaczania szerokości pudełka.