Počítání v CSS funkcí calc()

Tato vlastnost se zadává jako hodnota obyčejné CSS vlastnosti:

element {width: calc(5px + 1em)}

Využití

Jak příklad výše napovídá, užitečná je možnost sčítat a odčítat (samozřejmě násobit i dělit) napříč různými jednotkami.

Lze tak elegantněji vyřešit:

  1. Problém sčítání width a paddingu v obsahovém boxmodelu (výchozí ve standardním režimu), kdy není elegantně řešitelná procentuální šířka a padding třeba v pixelech. (Musí se používat další obal jen pro padding a podobně.)
    element {width: 70%; padding: 10px}

    V prohlížeči podporující calc bude modrý a zelený pruh stejně široký.

    {width: 70%; padding: 10px}
    {width: calc(70% - 10px * 2); padding: 10px}
    {width: 70%}
  2. Vodorovné centrování absolutním posicováním vypadá nějak takto:
    element {position: absolute; left: 50%; width: 100px; margin-left: -50px}

    Využitím calc() lze rovnou zadat hodnotu left (50 % minus polovina šířky, tj. 100 px).

    element {position: absolute; left: calc(50% - 100px / 2); width: 100px}

    Obdobný způsob lze použít třeba i pro background-image.

  3. Počítání z lenosti – u nekulatých čísel je jejich ruční dopočítávání zdlouhavé a z výsledného čísla není úplně jasné, jak se k němu došlo. Tohle ale mohou už dnes nahradit CSS preprocesory, byť pochopitelně neumí počítat napříč jednotkami.

Starší prohlížeče

V nepodporovaných prohlížečích jde využít toho, že tyto prohlížeče hodnotu s calc() budou ignorovat.

Jde tedy zadat napřed nějakou přibližnou hodnotu a následně použít výpočet:

width: 33.3333%;
width: calc(100% / 3);

Tento fallback pro starší prohlížeče může jít zautomatisovat CSS postprocesorem. Pochopitelně s omezenými možnostmi, protože sčítat hodnoty s různými jednotkami jde přesně pouze v prohlížeči.

  • cssnext – CSS postprocesor umožňující používat zápisy „z budoucnosti“ už nyní

Zdroje a související odkazy

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS toggle()

CSS funkce toggle()

Nefunguje zatím snad nikde, měla by sloužit k pohodlnému zadávání hodnot pro zanořené elementy stejného názvu.

Proměnné v CSS

Proměnné v CSS – var()

Proměnné přímo v CSS přes funkci var().

Průhledné pozadí rgba()

Zápis průhledné barvy rgba()

Zadávání barev v CSS pomocí rgba() umožňuje vytvořit průhledné jednobarevné pozadí.

CSS gradient

Gradienty v CSS

Jak vytvořit barevný přechod (gradient) přímo v CSS bez použití obrázku.

CSS counter

CSS counter

Automatické číslování v CSS za pomocí counter-increment, counter-reset a counter.

Komentáře