Pour créer une mise en page CSS de qualité, 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 dimensionnement. Par exemple, il serait intéressant de pouvoir réserver 50% d'une zone plus une quantité fixe d'espace, disons 10 px. Vous pouvez le faire dès maintenant en utilisant 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 également dans des valeurs de couleur rgb(). Elle présente donc de nombreuses utilisations intéressantes dans une feuille de style.
Que pouvez-vous faire avec calc() ?
La propriété calc() peut être utilisée partout où votre feuille de style comporte une longueur CSS ou un nombre.
Elle offre deux fonctionnalités principales pour rendre la mise en page plus flexible:
- Combiner des pourcentages et des valeurs absolues.
- Mélanger les unités de dimensionnement.
Combiner des pourcentages et des unités absolues
Examinons un exemple de combinaison de pourcentages et d'unités absolues. Imaginons que nous souhaitions allouer 50% de la zone disponible moins une quantité fixe de pixels, nous pourrions alors l'écrire comme suit:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Avec une couleur d'arrière-plan verte, le code se présenterait comme suit:
Si vous réduisez la taille du parent, vous obtenez le résultat suivant:
L'avantage ici, c'est que nous savons toujours que le bord droit du contenu sera de 100 pixels à gauche du milieu de la zone conteneur. 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.
Mélange d'unités
Un autre avantage est la possibilité de combiner des unités avec différentes mesures pour obtenir une taille résultante. Par exemple, vous pouvez définir des tailles relatives à la taille de police actuelle en mélangeant les unités "em" et "px".
#bar {
height: calc(10em + 3px);
}
Pour obtenir d'excellents exemples de combinaison de valeurs, cliquez ici et ici.
Essayer
Avec calc(), vous pouvez utiliser +, -, * et / pour ajouter, soustraire, multiplier et diviser des valeurs, ce qui autorise toutes sortes de possibilités. Vous pouvez utiliser calc() partout où une longueur CSS ou un nombre peuvent être utilisés. Nous travaillons également sur l'ajout bientôt de 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 (version en développement) à l'aide de la propriété -webkit-calc, dans Firefox depuis la version 8 avec la propriété -moz-calc et dans Internet Explorer depuis la version 9 sans préfixe. Dites-nous ce que vous en pensez en entrant un commentaire ci-dessous.