Obliczenia w CSS

Krzysiek Furtak CSS/SCSS 0 Comments

Aktualnie w arkuszach styli mamy już do dyspozycji animacje, placeholder’y czy nawet obserwatory eventów. Obliczenia w CSS’ie to kolejny sposób na odciążenie JavaScriptu.

Jeszcze nie tak dawno nawet najprostrze kalkulacje w arkuszach były nie do pomyślenia. Wyniekało to głównie ze statycznego harakteru samego CSS’a.

Dopiero po pojawieniu się preprocesorów CSSa (SASS, LESS), dostaliśmy do dyspozycji obliczenia arytmetyczne. W tej chwili obliczenia te możemy już używać w natywnych szablonach styli. Do dyspozycji mamy dodawanie, odejmowanie, mnożenie i dzielenie. Używamy ich w dowolnym miejscu za pomocą funkcji CALC.

Oto przykłady:

/* basic calc */
.simpleBlock {
width: calc(100% - 100px);
}

/* calc in calc */
.complexBlock {
width: calc(100% - 50% / 3);
padding: 5px calc(3% - 2px);
margin-left: calc(10% + 10px);
}

Wsparcie przez przeglądarki też wygląda bardzo ładnie. Należy pamiętać, że WebKit oraz Opera wymaga przedrostków do poprawnego działania.