Introduction : CSS, au-delà du design

Quand on pense au CSS, on l'associe souvent à la mise en forme visuelle d'une page web. Cependant, CSS possède des capacités insoupçonnées, notamment pour effectuer des calculs mathématiques simples. 💡 Dans cet article, nous allons découvrir comment utiliser CSS pour calculer et afficher des prix remisés, une fonctionnalité courante sur les sites de commerce en ligne.

Les fonctions mathématiques en CSS

Les fonctions mathématiques en CSS, bien que récentes, ouvrent de nouvelles possibilités. Par exemple, elles permettent de calculer dynamiquement des prix remisés sans JavaScript. Cela peut réduire la charge du navigateur et accélérer le temps de chargement des pages. Voyons comment cela fonctionne.

Le balisage de base

Pour illustrer cela, imaginons une liste de services de streaming avec des prix remisés pour les étudiants. Voici comment cela pourrait être structuré en HTML :

<li>   <label>     <span>Netflix</span>     <div class="ott-price" data-price="7.99" data-discount="0.2">$7.99</div>     <input type="checkbox" class="is-ott-selected">   </label>   <label>     <span>Appliquer le rabais étudiant <br> 20%</span>     <input type="checkbox" class="is-ott-discounted">   </label> </li> 

Les attributs data-price et data-discount stockent respectivement le prix de base et le rabais offert. Lorsque l'utilisateur coche "Appliquer le rabais étudiant", le prix remisé est calculé.

Calculer le prix remisé avec CSS

Une fois que l'utilisateur décide d'appliquer le rabais, nous devons rayer le prix d'origine et afficher le prix remisé. Voici comment nous pouvons le faire :

/* Appliquer un texte barré sur le prix d'origine */ .ott-price {   text-decoration: line-through; }  /* Calculer le nouveau prix avec les données des attributs */ .ott-price::after {   content: attr(data-price number) * (1 - attr(data-discount number)); } 

Le prix remisé est calculé en multipliant le prix d'origine par (1 - pourcentage de rabais). 🧮

L'affichage du prix remisé

Pour afficher le prix remisé, nous utilisons la fonction calc() associée à des compteurs CSS :

.ott-price::after {   --n: calc(attr(data-price number) * (1 - attr(data-discount number)));   /* Afficher le prix remisé avec précision */   content: "$" counter(a) "." counter(b, decimal-leading-zero); } 

Les compteurs CSS permettent de gérer les valeurs avant et après la virgule décimale séparément, ce qui est crucial pour un affichage précis des prix.

Conclusion : vers une utilisation pratique

En combinant les nouvelles fonctionnalités de CSS, nous avons pu réaliser une tâche courante de manière élégante et sans script. Bien que certaines fonctionnalités comme attr() soient encore en développement, il est passionnant d'explorer ces possibilités pour le futur du web. 🚀

Article inspiré par « Computing and Displaying Discounted Prices in CSS » publié sur CSS-Tricks. Lire la source originale.