Suite de https://meyerweb.com/eric/thoughts/2025/08/07/infinite-pixels/ , Eric Meyer explore dans ce billet les comportements inattendus et parfois incohérents entre navigateurs (Safari, Chrome, Firefox) lors de l’utilisation du mot-clé CSS infinity
dans des calculs (calc()
). Il teste son impact sur des propriétés comme text-indent
, word-spacing
, letter-spacing
, z-index
ou encore animation-duration
. Résultat : selon le navigateur, les valeurs calculées varient énormément (de 33 millions de pixels à des nombres astronomiques), et certaines propriétés, comme z-index
, voient leur valeur plafonner à 2147483647, rendant impossible un "au-delà de l’infini". Les animations avec une durée infinie deviennent inutilisables, surtout sur Safari, tandis que diviser un nombre fini par l’infini donne systématiquement 0, une rare harmonie entre les navigateurs. Une plongée ludique et technique dans les limites (ou leur absence) de CSS ! [
Eric Meyer, au détour d'un message sur Mastodon, est tombé sur une règle CSS intrigante : width: calc(infinity * 1px);
Il a décidé de mener des tests avec Chrome, Safari et Firefox afin de voir quelles valeurs sont réellement utilisées, ce qui a donné des résultats assez étonnants.