Quirks mode (wym. [kwɜːks məʊd]), zwany też trybem osobliwości – sposób interpretacji kodu przez przeglądarki internetowe, zakładający wykorzystywanie przestarzałych konstrukcji językowych niezgodnych ze standardami World Wide Web Consortium i Internet Engineering Task Force. Intencją jego stosowania jest zachowanie kompatybilności wstecznej względem starych stron internetowych.
Obecnie struktura oraz wygląd stron internetowych są zdefiniowane za pomocą dwóch standardów: (X)HTML, opisującego semantykę zawartości oraz kaskadowych arkuszy stylów CSS, zajmującego się warstwą prezentacji treści na różnych mediach (wizualnie na ekranie komputera, na kartce z drukarki, za pomocą dźwięku przy użyciu syntezatora mowy itd.). Niestety większość starszych przeglądarek nie ma zaimplementowanej obsługi tych standardów lub zostały wyprodukowane przed ich opublikowaniem (np. Internet Explorer wersja 5.1, stworzona w 2001 r. dla platform Macintosh, była pierwszą znaczącą przeglądarką z pełnym wsparciem dla standardu CSS 1)[1]. W rezultacie, znaczna część starszych stron internetowych została skonstruowana opierając się na ówczesnych, niepoprawnie zaimplementowanych, wersjach specyfikacji HTML-a i CSS. Strony tego typu są niestety prawidłowo renderowane tylko przez takie niepełnowartościowe przeglądarki.
Obsługa standardów (X)HTML i CSS w większości przeglądarek została znacznie udoskonalona, jednak spora liczba dokumentów opierających się na dziwactwach starszych przeglądarek stanowi przeszkodę dla producentów nowych przeglądarek. Producenci dążą do coraz lepszej obsługi standardów, ale pragną także zachować kompatybilność wsteczną ze starszymi stronami, obsługując niepoprawny dziś kod. Rezultatem takiego postępowania jest pisanie nowych stron w starym stylu. Ich twórcy, z uwagi na prawidłowe wyświetlanie nowych dokumentów w przeglądarce, nie zadają sobie trudu przestudiowania i wykorzystywania obecnie obowiązujących standardów.
Aby zachować kompatybilność z jak największą liczbą stron internetowych, nowoczesne przeglądarki posiadają kilka trybów renderowania:
Przeglądarki Mac Internet Explorer 5, Windows Internet Explorer 6 i 7, Opera do wersji 7.5 oraz Konqueror nie potrzebują trybu „almost standards”, gdyż obsługa zmiany rozmiarów komórek w tabelach w trybie „standards mode” tych przeglądarek, i tak nie jest zgodna ze specyfikacją CSS2. Właściwie, tryb „standards mode” w tych przeglądarkach jest bliższy trybowi Mozilli „almost standards” niż trybowi Mozilli „standards mode”[2].
Henri Sivonen opracował listę zależności pomiędzy deklaracją typów dokumentów a trybami wyświetlania stron przez przeglądarki.
| Doctype | NS6 | Gecko pre-1.0.1 | Gecko 1.0.1+ & Safari | Opera 9 | Opera 7.5 | IE 7 & Opera 7.10 | IE 6 & Opera 7.0 | IE Mac | Konq 3.2 |
|---|---|---|---|---|---|---|---|---|---|
| Brak | Q | Q | Q | Q | Q | Q | Q | Q | Q |
| HTML 3.2 doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> |
Q | Q | Q | Q | Q | Q | Q | Q | Q |
| HTML 4.0 Strict doctype bez identyfikatora DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> |
S | S | S | S | S | A | A | A | A |
| HTML 4.01 Strict doctype bez identyfikatora DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
S | S | S | S | S | A | A | Q | A |
| HTML 4.0 Strict doctype z identyfikatorem DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
S | S | S | S | S | A | A | A | A |
| HTML 4.01 Strict doctype z identyfikatorem DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
S | S | S | S | S | A | A | A | A |
| HTML 4.0 Transitional doctype bez identyfikatora DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
Q | Q | Q | Q | Q | Q | Q | Q | Q |
| HTML 4.01 Transitional doctype bez identyfikatora DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
Q | Q | Q | Q | Q | Q | Q | Q | Q |
| HTML 4.01 Transitional doctype z identyfikatorem DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
S | S | A | A | A | A | A | A | Q |
| HTML 4.01 Transitional doctype z identyfikatorem DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> |
Q | S | A | A | A | A | A | A | Q |
| HTML 4.0 Transitional doctype z identyfikatorem DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
Q | Q | Q | Q | A | A | A | A | Q |
| XHTML 1.0 Strict doctype bez deklaracji XML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
S | S | S | S | S | A | A | A | A |
| XHTML 1.0 Transitional doctype bez deklaracji XML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
S | S | A | A | A | A | A | A | Q |
| XHTML 1.0 Strict doctype z deklaracją XML <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
S | S | S | S | S | A | Q | A | Q |
| XHTML 1.0 Transitional doctype z deklaracją XML <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
S | S | A | A | A | A | Q | A | Q |
| ISO HTML 2000 version doctype, forma skrócona <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN"> |
Q | S | S | Q | Q | Q | Q | Q | Q |
| ISO HTML 2000 version doctype, forma pełna <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN"> |
Q | S | S | S | S | A | A | A | Q |
| ISO HTML 1999 version doctype, forma skrócona <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HTML//EN"> |
S | S | S | Q | Q | Q | Q | Q | Q |
| ISO HTML 1999 version doctype, forma pełna <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HyperText Markup Language//EN"> |
S | S | S | S | S | A | A | A | Q |
| HTML 5 <!DOCTYPE html> |
Q | S | S | S | S | A | A | A |
Główną różnicą pomiędzy trybami „quirks” i „standards” jest błędna interpretacja modelu pudełkowego CSS w Internet Explorerze (Internet Explorer box model bug). Przed wersją 6, Internet Explorer używał algorytmu obliczającego szerokość elementów na stronie, niezgodnego z algorytmem zawartym w specyfikacji CSS. Z uwagi na ogromną popularność Internet Explorera, wiele stron opierało się na błędnym algorytmie. W wersji 6, zaimplementowano poprawny algorytm CSS w trybie renderowania „standards”, jednak niepoprawny algorytm dalej funkcjonował. Wykorzystywał go tryb „quirks”.
Inną znaczącą różnicą jest wyrównywanie w pionie elementów typu inline. Starsze przeglądarki wyrównywały elementy do dolnej części ramki elementu (containing box). Specyfikacja CSS wymaga jednak wyrównywania do tzw. linii bazowej elementu znajdującej się w ramce. W trybie „standards”, przeglądarki oparte na silniku Gecko, będą wyrównywały elementy do linii bazowej, natomiast w trybie „quirks” - do dołu ramki[3].
Dodatkowo, w wielu leciwych przeglądarkach brakowało obsługi dziedziczenia stylów czcionek w tabelach. Z tego względu, style czcionek musiały być definiowane po raz pierwszy dla całego dokumentu, a następnie po raz drugi dla tabeli. Jeżeli rozmiar czcionki zostanie ustalony za pomocą jednostek względnych (np. procentów), przeglądarka zgodna ze standardami odziedziczy zdefiniowany bazowy rozmiar, a następnie zastosuje względne zmiany czcionki w tabeli, np. strona posiadająca bazowy rozmiar czcionki 80% z tabelą także posiadającą rozmiar czcionki 80%, wyświetli w przeglądarce zgodnej ze standardami, czcionki w tabeli o rozmiarze 64% (80% z 80%). W rezultacie, przeglądarki nie pozwalają na dziedziczenie rozmiarów czcionek w tabelach w trybie „quirks”[4].
Przeglądarki bazujące na silniku Gecko od wersji 1.0.1 (np. Firefox, Safari, Opera 7.5 i późniejsze) posiadają poza dwoma podstawowymi jeszcze trzeci tryb „almost standards”, obsługujący starszy sposób zmiany pionowych rozmiarów komórek tabel, niezgodny ze specyfikacją CSS2 (obrazki w komórkach tabel są obsługiwane tak jak w trybie „quirks” przeglądarek opartych na Gecko). Poza tym jednym szczegółem, tryb ten jest dokładnie taki sam jak tryb „standards”. To upodabnia go do trybu „standards” przeglądarki Internet Explorer. Zmniejsza to prawdopodobieństwo „rozjechania” się layoutów stron opartych na tabelach podczas renderowania silnikiem Gecko 1.0.1 lub późniejszych[5].
Bardzo często przeglądarki opierają wybór trybu renderowania na obecności Deklaracji Typu Dokumentu. Jeżeli obecna jest pełna deklaracja DOCTYPE, przeglądarka użyje trybu „standards”, a jeżeli jej brak - trybu „quirks”. Np. strona rozpoczynająca się następującą deklaracją zastosuje renderowanie w trybie „standards”:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
podczas gdy ta deklaracja (nie posiadająca oznaczenia wersji HTML-a ani URL-a do Definicji Typu Dokumentu) zrenderuje stronę w trybie „quirks”:
<!DOCTYPE html PUBLIC>
Ponadto strona, która w ogóle nie posiada Deklaracji Typu Dokumentu, także będzie renderowana w trybie „quirks”.
Wyjątek stanowi Microsoftowy Internet Explorer 6, który zastosuje tryb „quirks” jeżeli DOCTYPE poprzedzony jest prologiem XML. Nie ma znaczenia Czy DOCTYPE jest w formie skróconej czy pełnej. Dlatego też dokumenty XHTML, zaczynające się następującym kodem, będą renderowane w trybie „quirks”:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Tryb „quirks” w przeglądarce Internet Explorer 6 zostanie również zastosowany w przypadku, gdy jakiekolwiek znaki poza znakami białymi (Whitespace) będą poprzedzały sekcję DOCTYPE. Np. jeżeli dokument zawiera komentarz lub jakikolwiek inny znacznik przed DOCTYPE-m, IE 6 użyje „quirks mode”:
<!-- This comment will put IE 6 in quirks mode --> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
W pewnym stopniu powyższy kod może być przydatny do wymuszenia trybu „quirks” w Internet Explorerze 6. Nie działa on jednak w żadnej innej przeglądarce.
Chris Wilson z firmy Microsoft twierdził, że problem z prologiem XML zostanie naprawiony w wersji 7 Internet Explorera, w której będzie po prostu ignorowany[6]. Pomimo tego, specjaliści z World Wide Web Consortium, zajmujący się specyfikacją XHTML, rekomendują pomijanie prologu XML (kiedy to możliwe) dla utrzymania maksymalnej możliwej kompatybilności z obecnymi i starszymi przeglądarkami. Jednak ciągle można wymusić tryb „quirks” na Internet Explorerze poprzedzając DOCTYPE komentarzem:
<!--quirks mode for ie7--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
W związku z licznymi problemami związanymi z trybami renderowania powstała strona WWW o tytule QuirksMode. Peter Paul Koch zgromadził na niej ponad 150 sztuczek i porad dla języków JavaScript i CSS, a także opisał liczne różnice między przeglądarkami.
W najnowszych przeglądarkach, właściwość document.compatMode obiektowy model dokumentu wskazuje pośrednio tryb, w którym renderowana jest strona. Jeśli jego wartość jest równa 'CSS1Compat', aktywny jest tryb rednerowania „standards”, natomiast jeżeli jego wartość wynosi 'BackCompat', aktywny jest tryb „quirks”[7].
Ponadto w przeglądarkach Mozilla Firefox i Opera, informację o trybie renderowania aktywnej strony można znaleźć w panelu informacyjnym „Page info”.
Uczę się języka hebrajskiego. Tutaj go sobie utrwalam.
Zawartość tej strony pochodzi stąd.