Het creëren van een mooie CSS-lay-out begint met het toewijzen van formaten aan alle dingen die in een webapplicatie worden geplaatst. Een veelgevraagde functie is altijd de mogelijkheid geweest om maten te specificeren met behulp van een combinatie van maateenheden. Het zou bijvoorbeeld leuk zijn om 50% van een gebied te kunnen reserveren plus een vaste hoeveelheid ruimte, bijvoorbeeld 10px. Welnu, u kunt dat nu meteen doen met behulp van de eigenschap calc() . Je kunt deze functie overal gebruiken waar een lengte of getal wordt gebruikt, dus je kunt het gebruiken voor het positioneren van dingen, of ook voor rgb() -kleurwaarden, dus het heeft veel geweldige toepassingen in een stijlblad.
Wat kunt u doen met calc()?
De eigenschap calc() kan overal worden gebruikt waar uw stylesheet een CSS-lengte of -nummer bevat.
Het biedt u twee hoofdfuncties om de lay-out flexibeler te maken:
- Mengpercentages en absolute waarden.
- Maateenheden mengen.
Het mengen van percentages met absolute eenheden
Laten we eens kijken naar een voorbeeld van het mengen van percentages met absolute eenheden. Stel dat we 50% van het beschikbare gebied willen toewijzen minus een vast aantal pixels, dan kunnen we het als volgt schrijven:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Als het de achtergrondkleur groen had, zou het er als volgt uitzien:
en als je de oudergrootte verkleint, ziet het er als volgt uit:
Het leuke hier is dat we altijd weten dat de rechterrand van de inhoud 100 px links van het midden van het bevattende gebied zal zijn. Doordat u op deze manier verschillende waardetypen kunt combineren, kan uw webtoepassing de lay-out op apparaten van verschillende grootten verwerken met veel meer controle dan voorheen.
Mengeenheden
Een ander groot voordeel is de mogelijkheid om eenheden met verschillende afmetingen te combineren om zo een resulterende maat te krijgen. U kunt bijvoorbeeld de grootte instellen ten opzichte van de huidige lettergrootte door de eenheden 'em' en 'px' te combineren.
#bar {
height: calc(10em + 3px);
}
Hier en hier vindt u enkele geweldige voorbeelden van het combineren van waarden.
Probeer het eens
Met calc() kunt u +, -, * en / gebruiken om waarden op te tellen, af te trekken, te vermenigvuldigen en te delen, waardoor allerlei mogelijkheden ontstaan. U kunt calc() overal gebruiken waar een CSS-lengte of -nummer kan worden gebruikt. We werken er binnenkort ook aan om calc() toe te voegen voor hoek- en frequentie-eigenschappen. De eigenschap calc() voor lengtes is nu beschikbaar in Chrome 19 (ontwikkelaarskanaalbuild) door gebruik van de eigenschap -webkit-calc , in Firefox sinds versie 8 met de eigenschap -moz-calc en in Internet Explorer sinds versie 9 zonder prefix. Laat ons weten wat je ervan vindt door hieronder een reactie achter te laten.