Skrytá zákoutí CSS - box model
CSS 2.0 má pár zákoutí, o kterých část webdesignerů, zejména ti začínající, nevědí. Proto se je zde pokusím přiblížit.
První základní vědomost je znalost box-modelu. Zejména jeho IE verze a verze podle specifikací(Opera, FF,atd.). IE totiž obsahuje vlastní box-model, který nevyhovuje specifikaci W3C. Když zobrazuje nějaký blokový prvek, tak za jeho celkovou šířku dosadí hodnotu width a za jeho celkovou výšku dosadí height. To tedy znamená, že vlastní obsah prvku (text) má rozměry zmenšené o hodnoty padding a border. Oproti tomu ostatní prohlížeče dosazují za celkovou šířku součet hodnot width+border+padding a za celkovou výšku součet height+border+padding. Což je korektní postup. Proto se v IE zobrazují prvky menší než v ostatních browserech.
Chybný box-model ale IE nepoužívá vždy. Při vývoji IE 6 totiž Microsoft pochopil, že si nemůže dělat úplně co chce, a doplnil do produktu také správný box-model. IE 6 tedy používá oba modely. Přepíná mezi nimi podle validity doctype deklarace(stejně tak Opera 8).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">Tato DTD jsou validní a proto IE 6 zvolí správný W3C box-model (standardní režim).
Další zvláštnost IE 6: Pokud DTD není úlně na začátku dokumentu, IE zvolí chybný MSIE box-model. To platí i pro XML deklaraci.
Opera 8 má v sobě také zakomponováno přepínání mezi box-modely. Narozdíl od IE ale doctype deklarace na začátku dokumentu nezpůsobí přepnutí do nestandadtního režimu.
Celkový souhrn:
| Browser | Box-model | Přepínání modelů | Akceptuje XML deklaraci |
|---|---|---|---|
| IE 5 a starší | NESTAND. | ne | ne |
| IE 5.5 a starší | NESTAND./STAND. | ano | ne |
| IE 6 | NESTAND./STAND. | ano | ne |
| Firefox 1.5 | STAND. | ne | ano |
| Opera 8 | NESTAND./STAND. | ano | ano |
| Opera 9 | STAND. | ne | ano |
Baf !