Traditionnellement, quand on veut partager une largeur en trois portions égales, on écrit width: 33.3333%;. Alors oui, d'accord, à l'époque pré-industrielle nous n'avions pas vraiment le choix. Mais aujourd'hui ?

Les décimales arbitraires 

Savez-vous ce qui pêche avec les décimales ? Plusieurs choses, en fait — à commencer par le fait que vous définissez arbitrairement à quelle décimale vous vous arrêtez…

La précision

Et bien oui, forcément : si vous faites 33.33333% × 3, vous n'obtenez pas 100 %. Il vous manque 0.00001 %. Négligeable ? Peut-être.

Les arrondis et la troncature

Mais si je vous rappelle qu'IE tronque systématiquement les valeurs à la deuxième décimale, ça peut commencer à jouer un peu. En effet sur IE 11 il vous manque donc 0.01 % sur votre largeur totale.

Et si je vous rappelle que sur la même valeur, Chrome va arrondir à la treizième décimale ? Plutôt compliqué à anticiper.

Et alors ?
OSEF !

Admettons. On ne vit qu'une fois, après tout…

C’est probablement anecdotique effectivement, puisque dans le pire des cas vous n'aurez qu'un pixel de plus ou de moins. Cependant si ce « détail » vous intrigue, il est plutôt bien détaillé dans cet article d'Alex Kilgour intitulé Browser Rounding and Fractional Pixels.

Personnellement, je me sens un peu sale en laissant traîner des valeurs arbitraires — comme je l'ai déjà évoqué quand je parlais de calcul magique.

La fonction calc 

Finis les tours de passe-passe : calc() vous permet d'écrire de manière concise et précise une valeur égale à un tiers.


.⅓ {
width: calc(100% / 3);
}

Et voilà[1] ! Vous avez désormais une expression en CSS qui exprime clairement ce que vous voulez : un tiers de la largeur disponible. Plutôt cool, non ?

Compatibilité

Et le top, c'est la compatibilité : tout est au vert depuis IE 9. Voyez plutôt le tableau sur Can I Use?. Les seules tâches qui subsistent concernent des navigateurs pour téléphones, pour lesquels on peut raisonnablement supposer qu'un affichage d'un tiers de la largeur ne sera pas utile.

Alors, demeure-t-il une raison valable d'utiliser des valeurs décimales arbitraires, selon vous ?

  1. Au fait, si dans le bout de code le .⅓ vous choque, sachez que ça fonctionne — Hugo Giraudel a même déterré une expérience de Mathias Bynens à ce propos : https://mothereff.in/css-escapes#0%E2%85%93 — et que ça me paraît un excellent nom de classe pour exprimer un tiers. Pas vous ? 

Article rédigé par . Modifié le . Mots-clés :  compatibilité, css, css3, intégration, optimisation, sources.