calculaties en berekeningen maken met calc()

Alle CSS Preprocessors hebben wiskunde functies en ze zijn behoorlijk nuttig. Maar ze zijn niet zo krachtig als native wiskunde. De meest nuttige eigenschap van calc() is de mogelijkheid om eenheden te mixen, zoals percentages en pixels. Geen enkele Preprocessor zal dat ooit kunnen. Het is iets dat moet gebeuren tijdens het renderen. Dit is een handleiding met CSS voor gevorderden.

Met CSS optellen aftrekken vermenigvuldigen delen

calc() is een native CSS manier om eenvoudige wiskunde direct in CSS te doen als vervanging voor elke lengte-waarde (of zowat elke getalwaarde). Het heeft vier eenvoudige wiskunde operatoren:

• optellen (+)
• aftrekken (-)
• vermenigvuldigen (*)
• delen (/)

Voorbeelden calculaties en berekeningen maken met calc()

Aantal pixels van rechter onderhoek berekenen

We kunnen achtergrond-afbeelding gemakkelijk X pixels van de linkerbovenhoek plaatsen.

background-image: url(hond.png); background-position: 50px 20px;

Dat zou de hond 50px van links en 20px van boven in het elementenvak zetten. Maar wat als je hem 50px van rechts en 20px van onder wilt hebben? Niet mogelijk met alleen rechte lengte waarden. Maar calc() maakt het mogelijk!

background-image: url(hond.png); background-position: calc(100% - 50px) calc(100% - 20px);

Kolombreedte berekenen

Kolombreedte berekenen doe je zo heel nauwkeurig:

.column-1-7{width: calc(100% / 7);} .column-2-7{width: calc(100% / 7 * 2);} .column-3-7{width: calc(100% / 7 * 3);}

Padding links rechts berekenen met calculatie

Je kan padding links rechts berekenen met calculatie. Dit ziet er zo uit in CSS

padding-left: calc((100vw - 1200px) / 2); 

vw wil zeggen viewport-width, zeg maar schermbreedte.
Dit betekent dit:

• calc((100%-breedte-scherm – containerbreedte) / gedeeld-door-2);

In je CSS kan het totaal er dus zo uit komen te zien:

@media (min-width: 1201px) {
	.jouw-div-of-kader {
padding-left: calc((100vw - 1200px) / 2); 
padding-right: calc((100vw - 1200px) / 2);
} 
}

Lees hieronder meer over de vw-waarde:

Links en inspiratie voor berekeningen maken:

https://developer.mozilla.org/en-US/docs/Web/CSS/calc()
Tips calculaties voor kolommen in CSS

center-left-margin-but-right-margin-100-of-viewport-to-the-end