Funkce calc()

Funkce, která umožňuje vložit matematický výraz namísto hodnoty vlastnosti.

Je velmi dobře podporovaná, ale málo se o ní ví. Je užitečná, i když se to občas zpochybňuje. Pojďme to napravit. Nejprve si ukažme dvě jednoduchá využití:

Reklama: Vzhůru do lepší práce

.el {
  width: calc(100% / 3);
  margin-bottom: calc(1em - 2px); 
}

Není to stejné jako matematika v preprocesorech?

Není. V preprocesoru se musíme spokojit s výrazy, které se mohou zkompilovat do CSS ještě předtím, než prohlížeč stránku vidí:

width: (100% / 3)
// → width: 33.33333333%

Jenže preprocesoru dochází dech v momentě, kdy potřebuji kombinovat více jednotek. Vezměme příklad třísloupcového rozvržení s vnějším okrajem o šířce 1em:

width: calc(100% / 3 - (2 * 1em))

Že se vám to někdy hodilo? Že to obcházíte podivnými hacky? Vítejte v klubu!

Podpora v prohlížečích

Funkci calc() nepodporuje hlavně Internet Explorer 8, jeho starší sourozenci a ani Android Browser. V době psaní textu mohou u průměrného českého webu tvořit maximálně něco kolem 3–4 % návštěvnosti.

Pokud funkci používáte, myslete na tyto uživatele, a pokud je to potřeba, poskytněte jim alternativu v podobě definovaného fallbacku. Může vypadat mírně jinak. Je to lepší, než když se ve starém prohlížeči rozpadnou důležité věci.

Definovaný fallback

/* IE8 a spol: */
width: 30%;
/* Moderní prohlížeče: */
width: calc(100% / 3 - (2 * 1em));

A prosím pěkně: pozor na chyby v některých nechvalně známých prohlížečích. Na této stránce doporučuji kliknout na „Known issues“ a hledat „crash“: caniuse.com/calc.

Polyfill

Vždycky říkám, že používání polyfillu na zásadní věci týkající se layoutu je dost nebezpečné. Myslete na situaci, kdy selže Javascript. Myslete na vykreslovací výkon. Myslete na svoje nervy.

Pokud je i tak použití calc ve starých prohlížečích nezbytné, z polyfillů vezměte tento: github.com/closingtag/calc-polyfill.

Detekce vlastnosti

Knihovna Modernizr umí funkci detekovat, takže směle do toho:

.no-csscalc .el {
  /* IE8 a spol: */
}
.csscalc .el {
  /* Moderní prohlížeče: */
}

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.

PostCSS jako jednoduchá náhrada preprocesoru

16. 2. 2017 v příručce

Jak PostCSS využít jako jednoduchý a rychlý preprocesor, který vám na spoustu projektů výborně poslouží. A proč ne CSSnext?

Jak v NejŘemeslníci.cz používají Tachyons

7. 2. 2017 na blogu

Matouš Borák z NejŘemeslníci.cz popisuje zkušenosti svého týmu s Tachyons, knihovnou atomických stylů.

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: 23. února.

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č

Kurz kodéřiny
Poznejte CSS3, Grunt,
SVG, Flexbox, HTML5
a další technologie
na kurzu autora.