[HTML|JS|CSS] CSS3: calc

Calc to funkcja, która umożliwia przeliczanie różnych jednostek długości w stylach CSS. Wsparcie dla calc dostarcza coraz więcej przeglądarek, niektóre wymagają jeszcze użycia tzw. vendor prefixes.

Przykład użycia calc w Sassie:

@mixin calc($property, $expression) { 
  #{$property}: -moz-calc(#{$expression}); 
  #{$property}: -o-calc(#{$expression}); 
  #{$property}: -webkit-calc(#{$expression}); 
  #{$property}: calc(#{$expression}); 
} 

.outer{
 width: 100%;
 background-color: red;
 height: 100px;
}

.inner{
 @include calc("width","100% - 200px");
 background-color: blue;
 height: 100px;
}

Szerokość wewnętrznego diva będzie przeliczana przy każdej zmianie rozmiaru okna.

.outer {
  width: 100%;
  background-color: red;
  height: 100px; }

.inner {
  width: -moz-calc(100% - 200px);
  width: -o-calc(100% - 200px);
  width: -webkit-calc(100% - 200px);
  width: calc(100% - 200px);
  background-color: blue;
  height: 100px; }

Pozostaje pytanie, co w przypadku, gdy przeglądarka nie obsługuje calc. Do tego, by wykryć, czy przeglądarka wspiera calc wystarczy znana biblioteka Modernizr od wersji 2.6. Samo przeliczenie wystarczy wykonać w JS np. odejmując od szerokości parenta zadaną powyżej szerokość 200px. .