CSS

Quirks mode

Quirks Mode (tryb dziwactw) - sposób wyświetlania stron internetowych niezgodnie ze standardem W3C. Stworzony został przez Microsoft aby zachować kompatybilność ze stronami napisanymi dla Internet Explorer 5. Przeciwieństwem quirks mode jest strict mode.

Tło historyczne

w budowie

Różnice

W quirks mode dużo właściwości jest interpretowanych odmiennie niż zakłada standard, jednak najważniejsza różnica dotyczy [[css/model_pudełkowy|modelu pudełkowego]]. Odpowiada mu właściwość:
  • box-sizing: border-box - dla modelu w quirks mode (szerokość elementu zawiera obramowanie i Padding)
  • box-sizing: content-box - dla modelu zgodnego ze standardem (szerokość elementu jest zwiększana o obramowanie i Padding)

Zobacz też: Box-sizing.

Przeglądarki Firefox i Opera potrafią wejść w quirks mode, ale nawet w nim stosują model W3C. Można w nich jednak stosować właściwość box-sizing.

Sposób włączenia

W momencie zaimplementowania standardów W3C w IE6, powstał problem, jak rozpoznać strony pisane dla IE5. Przyjęto zasadę, że ktoś kto nie zważa na standardy sieciowe, nie używa deklaracji [[(X)HTML/Doctype]]. I dlatego obecność i rodzaj tego znacznika określa czy przeglądarka ma przejść w quirks mode. Ilustruje to tabela:
DoctypeIE5IE6IE7FirefoxOpera 9
brakQQQQQ
HTML 4.01 Transitional poprawnyQSSSS
HTML 4.01 Transitional bez adresu URLQQQQQ
HTML 4.01 Strict poprawnyQSSSS
HTML 4.01 Strict bez adresu URLQSSSS
XHTML 1.0 Transitional z prologiem xmlQQSSS
XHTML 1.0 Transitional brak prologu xmlQSSSS
XHTML 1.0 Strict z prologiem xmlQQSSS
XHTML 1.0 Strict brak prologu xmlQSSSS

Praktyczne zastosowanie

Dzisiaj gdy udział Internet Explorera 5 w polskim rynku przeglądarek spadł do 1.8% <ins>(dane z dnia 16.02.2007)</ins>, kompatybilność ze starymi przeglądarkami ma mniejsze znaczenie. Internet Explorer 7 i nowoczesne przeglądarki wcale nie mogą włączyć tego trybu w XHTML, co świadczy o tym, że dąży się do jego wyeliminowania. Zdecydowanie zaleca się stosowanie standardów sieciowych.

Jednak model pudełkowy W3C często uważany jest za niewygodny i nieintuicyjny. Aby zmienić go na model "tradycyjny", można było stosować box-sizing: border-box dla nowoczesnych przeglądarek i XHTML z prologiem XML dla IE6 (który dzięki temu przechodził w quirks mode i również stosował model tradycyjny).

Gdy pojawił się IE7, który nie może wejść w quirks mode w XHTML, a jednocześnie nie obsługuje właściwości box-sizing, trzeba powrócić do języka HTML 4.01 lub nauczyć się stosować model pudełkowy W3C.

CSS

6 komentarzy

Ktos, hahahahahaa

Jak kupuję drzwi, to podaję wymiar futryny - u mnie pasuje, u Was nie - zapomnieliście o grubości lakieru na drzwiach [wymiar był przed malowaniem] :P

jesli do DIVa na tło daje jaki obrazek, to wpisuje width i height tego obrazka, a pozniej jak chce np. pogrubić border albo cos innego, to nie musze zmieniać width i height.
Mi tam model pudelkowy pasuje. :P

Ja nie wiem co wy macie do content-box. Przecież wiadomo, że objętość szklanki to ilość piwa jaka się w nim aktualnie znajduje ;-)

neves do pojawienia się IE7 można było spokojnie stosować model tradycyjny, bez obaw że na jakiejś przeglądarce się wykrzaczy, dzięki właściwości box-sizing oraz quirks mode TYLKO w IE6. Poza tym nie chodzi o samą wygodę ale też kompatybilność z IE5. Chyba nie rozumiesz jak to działa...

A model "content-box" to dopiero dziwactwo, ustalam dla diva width: 100px, a on ma 120px.. standardy sieciowe czasem suxxx :/

Ostatnie dwa akapity są bez sensu ;-), poświęcać jednolity wygląd strony pod dowolną przeglądarką, na rzecz trochę bardziej wygodniejszego modelu blokowego. Wychodzi na to że tryb dziwact jest porządany, jak dla mnie sama już nazwa "tryb dziwactw" wskazuje na to by go nie używać i dożyć do tego za wszelką cene.

To fakt, że o ile od jakiegoś czasu wszystko staram się robić wg W3C, to ich model jest nadal dla mnie debilny. Bo skoro ustawiam width: 100px dla DIV to ten DIV ma mieć właśnie taką szerokość. No ale cóż ja poradzę..