La fonction CSS calc() est un outil extrêmement puissant pour les développeurs web, et son utilisation présente plusieurs avantages, particulièrement pour les étudiants en développement web.
Calc() permet de mélanger différentes unités de mesure dans une seule expression, comme combiner des pourcentages avec des pixels…
Premièrement, calc() permet de mélanger différentes unités de mesure dans une seule expression, comme combiner des pourcentages avec des pixels ou des em. Cela offre une flexibilité immense pour des mises en page réactives et dynamiques.
Deuxièmement, elle simplifie le code en permettant de faire des calculs directement dans les feuilles de style, réduisant ainsi le besoin de scripts supplémentaires. Par exemple, vous pouvez utiliser calc() pour ajuster dynamiquement la taille d’un élément en fonction de la taille de l’écran ou d’autres éléments.
Enfin, calc() est pris en charge par tous les navigateurs modernes, ce qui en fait un outil fiable pour créer des interfaces utilisateurs cohérentes sur différents appareils.
En somme, calc() est essentiel pour créer des designs web flexibles et adaptatifs, tout en simplifiant le processus de développement.
Exemple d’une image avec une marge adaptative
Le code présenté utilise CSS pour styliser une page web contenant une image. La fonction calc() est appliquée aux propriétés width et height de l’image, définissant sa largeur à 100% de la largeur de l’écran moins 20px, et sa hauteur à 100vh (100% de la hauteur de la fenêtre de visualisation) moins 20px. Cela permet à l’image de s’adapter à la taille de l’écran tout en conservant une marge uniforme de 20px autour d’elle. De plus, l’image est configurée pour couvrir l’espace défini (grâce à object-fit: cover) et est encadrée d’une bordure noire de 1px.
See the Pen calc objet-fit by Jerome Mercier (@jmercier) on CodePen.0