CSS3 Box Sizing

Změna způsobu počítání šířky a výšky elementu, jinak též řečeno box-modelu.

Dozvíte se, proč box-sizing: border-box milují vývojáři, kteří dělají fluidní layout, a taky nepřátelé počítání. Čtěte dále.

Syntaxe

box-sizing: content-box | border-box | padding-box;

Vzpomínáte na tradiční box-model, který počítal IE6 a starší v nestandardním módu? Nevzpomínáte? Gratuluji, jste šťastní lidé. wikipedia.org/wiki/Internet_Explorer_box_model_bug

Šířka nebo výška elementu =
viditelná šířka nebo výška obsahu
+ padding + border.

Už víte? To je border-box box-model.

Box Sizing

Naproti tomu content-box neboli „W3C box-model“ používají všechny moderní prohlížeče. Výpočet znáte:

Šířka nebo výška elementu =
viditelná šířka nebo výška obsahu.

A to je taky přednastavená hodnota vlastnosti box-sizing, kterou – naštěstí – můžeme změnit.

Pro pořádek uveďme, jak se počítá šířka a výška elementu u box-sizing: padding-box – je to vlastně border-box, kde se do výpočtu nepřipočítá šířka vlastnosti border.

Dobře, ale jak to můžeme využít? Podívejme se na několik možných scénářů.

Příklady využití

* { box-sizing: border-box }

Někdo využívá vlastnosti box-sizing v situaci, kdy se mu špatně pracuje s W3C box modelem. Ten totiž významná část webových vývojářů považuje za neintuitivní. Takoví pak prohlížeče nechávají počítat v border-box všechny elementy. Podobný přístup mají i moderní frontend frameworky Bootstrap nebo Foundation.

Fluidní layout

Mnoho využití má tato vlastnost v responzivním webdesignu, konkrétně při práci s layoutem definovaným v procentuálních jednotkách. Představte si například navigaci, jež má vždy 5 položek. Šířka jedné pak bude 20 %. Oddělovač mezi položkami je vytvořený rámečkem fixní šířky:

.nav li {
  width: 20%;
  display: inline-block;
  border-left: .25em solid #fff;
}

Jenže takhle nám pátá položka navigace odskočí na další řádku. Potřebujeme však jen prohlížeči oznámit, ať laskavě šířku položek navigace počítá pomocí box-sizing: border-box:

.nav li {
  box-sizing: border-box;
  width: 20%;
  display: inline-block;
  border-left: .25em solid #fff;
}

Živá ukázka příkladu je na cdpn.io/e/FeLkJ.

Změna počítání rozměrů formulářových elementů

Vlastnost box-sizing se moc hodí na sjednocení způsobu počítání výšky nebo šířky formulářových elementů. Některé z nich totiž prohlížeče počítají jako content-box a některé border-box způsobem (např. input type=„submit“nebo select). Pokud chcete zajistit stejnou výšku formulářových prvků ve vašem designu, než je začnete stylovat, přepněte si je nejlépe do box-sizing: border-box. Živá ukázka problému s formulářovými elementy je na cdpn.io/e/iBquK.

Podpora v prohlížečích

IE7+ a všechny moderní prohlížeče. Pokud jste vlastnost neznali, budete se divit, jak výborně je podporována. caniuse.com/box-sizing

Je ale dobré vědět, že méně používanou hodnotu padding-box podporuje jen Firefox.

Poznámka: Ukázky kódu v článku obsahují pouze standardní syntaxi podle CSS3 norem. Ve některých případech je potřeba použít vendor prefix varianty. Na aktuální situaci se podívejte na shouldiprefix.com.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii CSS.

Vkládaná média se zachováním poměru stran

19. 7. 2017 v příručce

Jak zařídit, aby se obrázky, video a prvky vkládané přes `<iframe>` přizpůsobovaly šířce rodičovského elementu a ještě k tomu zachovávaly poměr stran?

Pár poznámek ke komentářům v CSS

10. 7. 2017 na blogu

Keith J. Grant napsal moc hezký článek o komentářích v CSS: „Thoughts on Self-Documenting CSS“. Tady je to nejdůležitější doplněné o mé poznámky.

Veřejná školení

Dnešní webová kodéřina

Dnešní webová kodéřina

Kurz, který aktualizuje vaše znalosti webové kodéřiny. Citlivě mixuje novinky jako CSS3, Flexbox nebo SVG a osvědčené postupy. Ty nejdůležitější části si sami vyzkoušíte. Příští termín: 27. září.

14. září Mistrovský vývoj webů na WordPressu
5. října Optimalizace rychlosti načítání
19. října SVG
16. listopadu Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Vydal jsem novou knihu: „Vzhůru do (responzivního) webdesignu“

„Vzhůru do (responzivního) webdesignu“

Kniha „Vzhůru do (responzivního) webdesignu“
Jak navrhovat a implementovat responzivní UI?

Více informací