Praktické výhody nestandardního box-modelu

2006-03-06 00:04 napsal Lukáš Havrlant

Předpokládám, že většina z vás používá standardní box-model a případně nestandardní pouze v Internet Exploreru. Málokdy vidím, že by někdo používal pouze nestandardní box-model a to pro všechny prohlížeče. Respektive si vzpomenu pouze na jeden web, který by to v praxi používal. Přitom mi přijde nanejvýš logické použít právě ten nestandardní box-model. Jednak – pokud chcete mít web optimalizovaný i pro starší verze IE, stejně se nestandardnímu box-modelu nevyhnete. A proč tedy zbytečně používat dva box-modely, když mohu snadno použít pouze jeden?

Zajímají-li vás historické souvislosti, koukněte opět na webylon nebo na pohled z druhé strany. Pokud neznáte rozdíly, přečtěte si prosím článek u Yuhůa nebo od Jozoba. A aby bylo úplně jasno, tak „standardním“ box-modelem mám na mysli ten, který běží v IE ve standardním režimu a „nestandardní“ je pak ten, který běží v quirku. Aby mě někdo pak nějak netahal za slovíčka.

A nyní již přejděme k výhodám nestandardního box-modelu. Osobně ho považuji za mnohem logičtější než za ten standardní, protože pokud nějakému bloku nastavím nějakou šířku, mohu si být jistý, že tento blok opravdu zůstane takto široký, dokud nepoužiji margin. Ve standardním box-modelu se mi konečná šířka bloku mění v závislosti na paddingu, borderu a i marginu, což mi nevyhovuje. Málokdy skládám stránky z nějakého hotového návrhu, kde bych měl přesně dané rozměry, takže neustále tyto tři hodnoty měním a zkouším, jak to bude nejlépe vypadat. Ve standardním box-modelu jsem odsouzen k neustálému přepisování šířky při jakékoliv změně paddingu (obzvláště při floatování je to o nervy) nebo musím zanořit bloky do dalších bloků (což je ovšem nehezké řešení a navíc). Tohle je ovšem příliš obecné, přejděme tedy k praktické části.

Představte si následující situaci: chcete mít stránku roztaženou na 100% šířky prohlížeče, tudíž šířky bloků jste nuceni zadávat v procentech. Jeden blok chcete mít široký 30%, druhý 70%. Zatím je všechno v pohodě, tohle uděláte jednoduše v obou box-modelech. Následující kód tedy platí pro oba box-modely (jen u standardního pochopitelně vynecháte vlastnosti -moz-box-sizing a box-sizing):

*{
margin:0;
padding:0;
-moz-box-sizing: border-box;
box-sizing: border-box
}
#levy{
width:30%;
float:left;
background:green;
}
#pravy{
width:70%;
float:right;
background:red;
}

Zatím žádný rozdíl. Problémy nastanou až teď. Ve chvíli, kdy se totiž rozhodnu, že chci mít v těch boxech padding jiný než v procentech, jsem ve standardním boxmodelu bez šance. Abych se totiž vešel do sta procent, musel by se součet šířek a součet paddingů rovnat sto procent, což už logicky nelze dosáhnout jinak, než že budu mít všechny rozměry (včetně paddingů) v procentech. To není takový problém, dokud ovšem nutně nepotřebuji udat nějaký padding v pixelech. Například pokud bych chtěl mít oba bloky odděleny nějakým okrasným obrázkem o šířce 20 pixelů a chtěl tak dát tomu pravému bloku padding-left:20px, už bych se stoprocentní šířky v životě nedopočítal. Jednodušší příklad se dá vymyslet s okrajem. Chtěl bych-li dát jednomu z těch bloků border, klidně i jeden pixel, jsem bez šance, protože celková šířka bloku bude v tu chvíli 100% + 1px. Naproti tomu v nestandardním box-modelu si mohu s různými jednotkami hrát jak chci:

*{
margin:0;
padding:0;
-moz-box-sizing: border-box;
box-sizing: border-box
}
#levy{
width:30%;
float:left;
background:green;
padding:0 20px;
border-right:2px solid black;
}
#pravy{
width:70%;
float:right;
background:red;
padding:0 1em;
border-left:2px solid blue;
}

Můžete si též prohlédnout příklad. Ve standardním box-modelu jsem nucen do dvou bloků levy a pravy zanořit další blok, abych docílil stejného efektu. Výsledné CSS by tedy ve standardním box-modelu muselo vypadat takto:

*{
margin:0;
padding:0;
}
#levy{
width:30%;
float:left;
background:green;
}
#pravy{
width:70%;
float:right;
background:red;
}
#levy-vnoreny{
padding:0 20px;
border-right:2px solid black;
}
#pravy-vnoreny{
padding:0 1em;
border-left:2px solid blue;
}

Opět si můžete příklad prohlédnout naživo. Do HTML kódu jsem byl nucen přidat dva další zbytečné bloky, které bych při použití nestandardního box-modelu použít nemusel. Ovšem s tímto souvisí i jistá zajímavost. Všimněte si, jak se v druhém případě počítá padding. Standardně se počítá tak, že se přičítá k šířce. Ovšem ve chvíli, kdy je blok roztáhnutý na 100% šířky (což jsou právě ty dva vnořené bloky levy-vnoreny a pravy-vnoreny, které mají 100% šířku rodičovského prvku), se již padding nepřičítá k šířce, protože by se tam nevlezl, ale snižuje šířku prvku, na který je aplikován. V tuto chvíli se tedy standardní box-model chová prakticky úplně stejně jako nestandardní box-model. Neroztáhne okraj mimo blok, ale naopak sníží velikost bloku (i když zmenší zároveň jeho šířku, což se u nestandarního neděje – výsledek je ovšem totožný). Tedy stručně řečeno, pokud chci nějakému bloku dát padding, který je určen jinými jednotkami, než šířka elementu, musím ve standardním box-modelu zanořit další blok a nastavit padding až zde – tento padding potom sníží šířku bloku, čímž vlastně pouze záměrně simuluji nestandardní box-model (padding a width v podstatě jedno jest).

Příkladů na kolize, pokud nepoužívám stejné jednotky by se daly vymyslet spousty, ale všechny by byly prakticky stejné. Zkrátka v nestandardním box-modelu nejsem nucen používat stejné jednotky a mohu si zvolit jaké chci bez toho aniž bych musel používat nějaké pomocné vnořené elementy. Schválně si někdy zkuste použít nestandardní box-model, neříkám, že musí každému sednout (mně sedl), ale alespoň to zkuste. Říkat, že vám standardní box-model vyhovuje, když jste nezkusili ten opačný není zrovna košer :-). Kompatibilita je zaručena, neboť všem současným prohlížečům lze box-model přenout: -moz-box-sizing: border-box pro Firefox a box-sizing: border-box pro Operu. llook ještě zmiňoval -khtml-box-sizing:border-box pro prohlížeče založené na KHTML. Navíc v návrhu CSS3 již vlastnost box-sizing je, takže lze očekávat, že i budoucí prohlížeče budou tento box-model znát.

Má-li někdo nějaký opačný příklad (tedy kdy je standardní daleko výhodnější), sem s ním.

Linkuj.cz!

Komentáře

# Roj
7. March 2006, 10:29

Predevsim chci pozdravit (teoretickeho) priznivnce vymirajiciho druhu webdesigneru s FLEXI lejoutem :-) Zatim si nevybavim konkretni priklad, kdy je standardni boxmodel prakticky pouzitelnejsi, ale urcite ho nekdy najdu.

Jen jsem si absolutne jisty, ze i ve standardnim boxmodelu jsou vsechny situace resitelne.

Ono asi neni cilem mit VSECHNY casti stranky procentni. Preci jenom grafika je fixni, takze se postranni sloupecky udelaji fixne siroke a pruzne zalamovani textu se necha jen v urcitych sloupcich.

Takze tvuj negativni priklad byl jen teoreticky. Jeste se k tomu vratim, az vstanu z postele :-)

# Lokutus
7. March 2006, 10:30

Jestli jsem to dobře pochopil, musel bych jet v quirk režimu, takže bye bye xhtml strict ????

7. March 2006, 15:01

Roj
Ano, všechny zde uvedené příklady jsou ve standardním box-modelu řešitelné, vždyť také řešení uvádím :o). Kdo ví, jestli existuje příklad, který v jednom box-modelu jde, ale ve druhém nejde (za žádných okolností, i kdybych přidával divy jak bych chtěl). IMHO takový příklad neexistuje, zanoření by mělo vždy pomoci. Jde ale o to, že tento příklad je v nestandardním daleko snadněji řešitelný.

Lokutus
Nemusíš se vzdát XHTML strict (ač by to nebylo od věci), stačí před <!DOCTYPE> vrazit nějaký komentář nebo třeba xml deklaraci a tím pošleš IE do quirku a donutíš ho používat nestandardní box-model. Ostatní prohlížeče donutíš používat tento box-model pomocí CSS vlastností -moz-box-sizing: border-box a box-sizing: border-box.

# Lokutus
7. March 2006, 17:03

Jenže IE7 pošle mě zase do kytek… nebo ne?

7. March 2006, 17:18

Lokutus
Nevím, jak funguje přepínání box-modelů v IE7, nicméně by již mohl podporovat box-sizing. Nějak to každopádně jít musí.

# Vašek
7. March 2006, 23:23

Souhlas, toto mě napadlo už dříve. Akorát sem neměl to srdce „ponižovat“ mozillu do nestandarního režimu :-) V nějakém dalším projektu to zkusím. Přepisování paddingu při ladění designu mě vždy s prominutím sralo.

# Bumbo
8. March 2006, 07:34

Uz jsem si nejak zvykl na matrjosku – navic ani neni vzdy nutne pridavat nejaky element navic – v podstate si vystacim se semantickymi elementy a boxy pro vyznaceni souvisejicich dat, ktere mi pomohou pri rozvrhovani layoutu.

Kazdopadne v teto veci se tezko shodnou vsichni, jelikoz jsou pro a proti na obou stranach, ale box-model podle W3C mi prijde mnohem logictejsi, pokud pouzijes rozmery v em – tedy pokud se snazis obsah formatovat spise v zavislosti na typografickych pouckach, nez-li na ruznych rozlisenich uzivatelu, kteri na stranky pristupuji (tato cesta vede vetsinou do pekel, jelikoz rozpal je zde velky a diky ruznorodosti pristupujicich zarizeni se naroky na univerzalnost zvysuji).

# Roj
10. March 2006, 02:01

Souhlas s Bumbem. Me totiz standardni model pripada natolik prirozeny a logicky, ze ani nedokazu vyjmenovat jeho vyhody ;-)

Napriklad vyhoda je i to, ze kdyz zadam EXPLICITNE sirku, mam jistotu, ze obsah tu sirku bude mit a nemuze se mi stat, ze mi sirka vyjde treba zaporna. Naprotitomu kdyz sirku nezadam explicitne, prizpusobi se, viz spot. takze i ve standardnim modelu mam moznost volny, coz v nestandardnim nemam. Takze polopaticky receno: Standardni model ma jednoznacnou vyhodu, ze mam moznosy volny, jestli chci mit sirku zarucenou, nebo jen dopocitanou.

Matrjoska resi vzdy vse. K tematu jsem kdysi napsal i jeden pekny trik. http://roj.blo­guje.cz/…notkach­.html

Ale nedoporucuju prehanet :-)

10. March 2006, 10:01

Roj

Souhlas s Bumbem. Me totiz standardni model pripada natolik prirozeny a logicky, ze ani nedokazu vyjmenovat jeho vyhody ;-)

Možná proto, že jsi ten druhý pořádně nezkusil ;-). Mně skutečně přijde ten standardní nelogický.

Napriklad vyhoda je i to, ze kdyz zadam EXPLICITNE sirku, mam jistotu, ze obsah tu sirku bude mit a nemuze se mi stat, ze mi sirka vyjde treba zaporna.

Už i ta Matrjoška dokazuje, že vlastně nemáš pravdu. I ve standardním box-modelu se mi může zadaná šířka měnit. Nebo jsem něco nepochopil? Občas po ránu nebývám bystrý :-).

Bumbo

box-model podle W3C mi prijde mnohem logictejsi, pokud pouzijes rozmery v em

Já myslím, že rozměry v em se dají stejně úspěšně využít i v nestandardním box-modelu.

10. March 2006, 11:09

Píšete: „Předpokládám, že většina z vás používá standardní box-model a případně nestandardní pouze v Internet Exploreru.“

Tak buďto jsem já nejsem správný čtenář na tomto blogu a nepatřím mezi tu většinu, pro kterou je toto psáno, a nebo vy ste mimo. Já osobně neznám profesionálního HTML designera, který by používal na většině webech, jež mu jsou živobytím, standardní box model.

Standardní box model je IMHO opravdu jen věc několika málo blogů a „malinkých webíků“.

# Roj
10. March 2006, 11:15

Jelikoz svuj prvni web jsem udelal v roce 1998, muzes vzit jed na to, ze jsem si nestandardni model, ktery odpovida tabulkovemu lejoutu, zatracene zkusil :-)

Matrjoska dokazuje… ? Ted si nejsem jisty, jestli vis, co znamena pojem EXPLICITNE. Proste kdyz zadam, ze obsah chci mit siroky treba 10em, tak ho tech 10em siroky MAM. Bez ohledu na to, cim je obalen, velikost okna, frejmu, cehokoliv. Dokonce i za cenu pretejkani.

Opravdu nevim, co je dokazano (vyvraceno). Ono je to delsi, asi to blognu :-)

10. March 2006, 11:24

Jan Bien

Buď jsme se nepochopili nebo já nejsem schopný najít žádný další web, který by mozillu přepínal do nestandardního box-modelu.

# Roj
10. March 2006, 11:27

Tak jsem namatkou koukl na ceske noviny a at jsem hledal, jaxem hledal, nestandardni boxmodel jsem tam neobjevil

http://css.cn­.cz/2006/cn.css

Amateri to jsou :-)

10. March 2006, 11:31

Roj

Matrjoska dokazuje… ? Ted si nejsem jisty, jestli vis, co znamena pojem EXPLICITNE. Proste kdyz zadam, ze obsah chci mit siroky treba 10em, tak ho tech 10em siroky MAM. Bez ohledu na to, cim je obalen, velikost okna, frejmu, cehokoliv. Dokonce i za cenu pretejkani.

Aj, tady jsem se sekl, už jsem to pochopil, vyzkoušel a dávám za pravdu ;-).

10. March 2006, 22:11

On má každý model svá pro a proti. A dost to souvisí s tím, o jaké použití se zrovna jedná. Jestliže nejdříve vytvořím obal a pak do něj házím obsah (u většiny webů asi častější případ), pak má větší logiku ten nestandardní. Naopak standardní má smysl v případě, že mám obsah a tvořím mu obal.

Třeba při práci s obrázky nebo jiným obsahem, který má pevně dané rozměry, je prostě standardní model lepší.

Takže já osobně jsem pro oba modely ;). Nestadardní pro kostru layoutu, standardní pro práci s obsahem.

Komentáře jsou uzavřeny