Quirks mode

Z Wikipedii, wolnej encyklopedii
Skocz do: nawigacji, wyszukiwania

Quirks mode (ang. tryb dziwactw), 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 W3C i IETF. Intencją jego stosowania jest zachowanie kompatybilności wstecznej względem leciwych stron internetowych.

Przegląd[edytuj | edytuj kod]

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 papieru 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 ilość 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:

  • "standards mode" - tryb standardów; w tym trybie strony renderowane są zgodnie ze standardami (X)HTML i CSS; w specyfikacji HTML5 nazwany jest trybem "no quirks mode",
  • "quirks mode" - tryb dziwactw; próbuje emulować zachowania starszych przeglądarek,
  • "almost standards" - tryb "prawie zgodny ze standardami"; występujący w niektórych przeglądarkach (np. bazujące na silniku renderującym MozilliGecko) jest próbą osiągnięcia kompromisu pomiędzy dwoma powyższymi trybami, implementując "quirks mode" do obsługi zmiany rozmiarów komórek tabel, a "standards mode" do obsługi całej reszty zgodnie ze standardami; w specyfikacji HTML5 nazwany jest trybem "limited quirks mode".

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].

Porównanie deklaracji DOCTYPE[edytuj | edytuj kod]

Henri Sivonen opracował listę zależności pomiędzy deklaracją typów dokumentów a trybami wyświetlania stron przez przeglądarki.

  • Q - quirks mode,
  • S - standards mode
  • A - almost standards mode
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
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

Różnice pomiędzy trybami[edytuj | edytuj kod]

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].

Tryb almost standards[edytuj | edytuj kod]

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].

Wymuszanie trybów renderowania[edytuj | edytuj kod]

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.

Weryfikacja trybów[edytuj | edytuj kod]

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 "standadrs", 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 boksie informacyjnym 'Page info'.

Zobacz też[edytuj | edytuj kod]

Przypisy

  1. Cascading Style Sheets: CSS Browsers http://www.w3.org/Style/CSS/#browsers
  2. Activating the Right Layout Mode Using the Doctype Declaration http://hsivonen.iki.fi/doctype/
  3. Images, Tables, and Mysterious Gaps http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps
  4. Fixing Table Inheritance in Quirks Mode http://developer.mozilla.org/en/docs/Fixing_Table_Inheritance_in_Quirks_Mode
  5. Gecko's "Almost Standards" Mode http://developer.mozilla.org/en/docs/Gecko's_%22Almost_Standards%22_Mode
  6. The <?xml> prolog, strict mode, and XHTML in IE http://blogs.msdn.com/ie/archive/2005/09/15/467901.aspx
  7. compatMode Property http://msdn2.microsoft.com/en-us/library/ms533687.aspx

Linki zewnętrzne[edytuj | edytuj kod]