Pour créer une mise en page CSS attrayante, vous devez commencer par attribuer des tailles à tous les éléments placés dans une application Web. Une fonctionnalité très demandée a toujours été la possibilité de spécifier des tailles à l'aide d'un mélange d'unités de taille. Par exemple, il serait pratique de pouvoir réserver 50% d'une zone plus une quantité fixe d'espace, disons 10 px. Vous pouvez le faire dès maintenant à l'aide de la propriété calc(). Vous pouvez utiliser cette fonctionnalité partout où une longueur ou un nombre est utilisé. Vous pouvez donc l'utiliser pour positionner des éléments ou dans les valeurs de couleur rgb(). Elle est donc très utile dans une feuille de style.
Que pouvez-vous faire avec calc() ?
La propriété calc() peut être utilisée partout où il y a une longueur ou un nombre CSS dans votre feuille de style.
Il offre deux fonctionnalités principales pour rendre la mise en page plus flexible:
- Mélanger des pourcentages et des valeurs absolues
- Mélanger des unités de dimensionnement
Combiner des pourcentages avec des unités absolues
Prenons un exemple de mélange de pourcentages avec des unités absolues. Imaginons que nous souhaitions allouer 50% de la zone disponible moins une quantité fixe de pixels. Nous pourrions écrire cela comme suit:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Si la couleur d'arrière-plan était verte, elle ressemblerait à ceci:
Si vous réduisez la taille du parent, le résultat sera le suivant:
L'avantage est que nous savons toujours que le bord droit du contenu se trouve à 100 pixels à gauche du milieu de la zone contenante. La possibilité de combiner différents types de valeurs de cette manière permet à votre application Web de gérer la mise en page sur des appareils de différentes tailles avec un contrôle beaucoup plus important qu'auparavant.
Unités de mélange
Autre avantage : vous pouvez combiner des unités de mesure différentes pour obtenir une taille. Par exemple, vous pouvez définir des tailles par rapport à la taille de police actuelle en mélangeant les unités "em" et "px".
#bar {
height: calc(10em + 3px);
}
Vous trouverez d'excellents exemples de combinaison de valeurs ici et ici.
Essayer
Avec calc(), vous pouvez utiliser les opérateurs +, -, * et / pour additionner, soustraire, multiplier et diviser des valeurs, ce qui ouvre toutes sortes de possibilités. Vous pouvez utiliser calc() partout où une longueur ou un nombre CSS peut être utilisé. Nous prévoyons également d'ajouter prochainement calc() pour les propriétés d'angle et de fréquence. La propriété calc() pour les longueurs est désormais disponible dans Chrome 19 (build du canal de développement) à l'aide de la propriété -webkit-calc, dans Firefox depuis la version 8 à l'aide de la propriété -moz-calc et dans Internet Explorer depuis la version 9 sans préfixe. N'hésitez pas à nous donner votre avis en laissant un commentaire ci-dessous.