CSS3 Box Sizing: způsob počítání velikosti boxu

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.

Ebook „Vzhůru do CSS3“ verze 1.4: nové texty o Media Queries, prohlížečích a další

9. 1. 2017 na blogu

Kapitola o Media Queries je zgruntu nová atd. 12 stránek navíc.

Podcast: S Robinem Pokorným o CSS v Javascriptu

8. 12. 2016 na blogu

V dalším podcastu ze Vzhůru dolů jsme se s Robinem zaměřili na téma tepající mezi frontend kodéry i javascriptovými vývojáři – CSS uvnitř Javascriptu.

Kurz „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. Kurz vede Martin Michálek. Příští termín: 23. února.

Termíny dalších veřejných školení

9. března Responzivní design
23. března Optimalizace rychlosti načítání
4. dubna SVG
20. dubna Bootstrap
11. května 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.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč