OKblog

Pohled na box-model

Neděle, 24. dubna 2005 11.59 Webdesign

V roce 1996 přiąlo W3C ve specifikaci CSS1 s návrhem box-modelu. Kaľdý objekt na stránce je v podstatě umístěn v boxu, který se dá pomocí CSS ovládat.

Různé prohlíľeče, různý výsledek

Návrh to nebyl ąpatný. Ale interpretace box-modelu byla (a přiznejme si to, dodnes je) různá. Mějme tento CSS kód:


div { width: 400px; margin: 50px; padding: 10px; border: 10px; }

V IE bude ąířka prvku DIV 400 pixelů. Ovąem v ostatních prohlíľečích bude ąířka DIVu 540 pixelů (400+100+20+20).

Co je tedy správné?

Těľko říct. Podle standardů je to druhá moľnost, ale z logického hlediska je správná interpretace IE. Důkaz?

Máme čtverec o straně 10cm. Uvnitř něj je daląí, menąí čtverec o straně 5cm. Změřte ąířku větąího čtverce. Máte? Pokud jste aspoň trochu normální, naměřili jste 10cm.

I „ąpatný“ box-model se dá obejít…

… a to buď tzv. CSS hacky (např. podrľítkový hack) v případě IE nebo CSS vlastností box-sizing. Bohuľel tato vlastnost je podporována jenom v Opeře a tak musíte pouľít speciální vlastnost -moz-box-sizing pro Gecko-based prohlíľeče. A pak kdo vymýąlí nestandardní vlastností, ľe? :D (ale o tom někdy příątě)

Závěr

Hodně lidí dělá závěry jen z toho, co jinde přečtou a nepřemýąlí nad tím. Někdo se musí zamyslet za ně…

předchozí další


Související články

Komentáře (7)

 
středa, 27. dubna 2005 21:32:47

1) IE 6 umí správný box model, ale musí se přepnou t do standardního režimu
2) Nestandardní vlastni alepoň Gecko odlišuje pomlčkou a navíc slouží jako interní vlastnost, protože vzhled Foxe je dělán pomocí CSS
3) Box-sizing není vlastností jen Opery, ale podporuje ji i IE5 na Macu

 
čtvrtek, 28. dubna 2005 17:23:19

Acci: Musím tě opravit. box-sizing je standardní vlastnost CSS3. A navíc, kolik lidí dnes používá IE5/Mac? Promile?

 
čtvrtek, 28. dubna 2005 20:38:29

> box-sizing je standardní vlastnost CSS3
No, ale CSS ještě není hotové, proto by ho prohlížeče ještě neměli podporovat, protože cokdyž W3C ještě něco změní a pak to bude stejný bordel jako s box-modelem

 
čtvrtek, 28. dubna 2005 20:48:39

A co je špatného na tom, že ho podporují? Dobře, ale trochu si protiřečíš, protože FF taky podporuje něco z CSS3…

 
čtvrtek, 28. dubna 2005 21:29:58

A co například? Hodnoty začínající -moz neberu

 
pátek, 29. dubna 2005 15:53:13

-moz do CSS nepatří. Nevím přesně, co FF podporuje z CSS3, ale určitě něco jo…

 
pondělí, 18. července 2005 20:55:41

Mne sa nezdá MSIEčkárske počítanie ako správne. Pretože:

vezmi si hárok papiera so šírkou niečo okolo 27 cm. Zasadíš ho do rámiku. Šírka papiera je stále rovnaká, ale rámik je jeho súčasťou. Taktiež si obrázok s rámikom kdesi zavesíš (margin). No šírka papiera ostáva zachovaná. A môžeš si to zarámovať v pasparte (padding). No zase je šírka rovnaká.

Ide o to, že Opera, FF, N8 berú šírku DIVu stále rovnakú, pôvodne nastavenú a pridávajú ostatné hodnoty do výseldného zjavu. MSIE to robí inak. Ten vezme šírku DIVu, a do nej zaráta border a padding. A to nie je správne si myslím. Čiže width(msie)=width(css)+border(css)+padding(css). To je blbosť ako vyšitá.

K tomuto článku již není možné přidávat komentáře.