box-sizing, et pourquoi pas ?

Je suis de plus en plus enclin à utiliser la propriété box-sizing systématiquement pour changer le calcul des tailles de boites, comme le préconise notre ami Paul Irish.

—

La syntaxe est simple :

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    }

L’avantage est immédiat : la largeur de la boîte est toujours connue, c’est celle de width. Même si on ajoute des padding et bordures.

Calculs de boîtes enfantins et intuitifs

• On a des mélanges d’unités en responsive web design (par exemple un bloc muni d’un width: 25% avec un padding de 10px)
• Quand on a des images en max-width: 100% et des bordures
• Quand on veut harmoniser facilement des tailles d’éléments variés (par exemple pleins de blocs de 400px de large mais certains ont un padding de 10px, d’autres une bordure de 1px, d’autres un padding-left de 5px uniquement, etc. … eh ben tous les blocs feront au final 400px, le calcul est vite fait)
• etc.

Du côté des inconvénients :

• Le principe même de box-sizing est d’émuler le modèle de boîte d’Explorer en mode Quirks à l’époque de la souveraineté d’IE6, et cela rappelle de mauvais souvenirs à tous
• Le sélecteur universel (*) est historiquement considéré comme étant peu performant. Cependant, de plus en plus de tests concrets (celui-ci par exemple) tendent à montrer que la perte en webperf est négligeable, de l’ordre de… 6ms (soit 0.006s) sur des gros gabarits complexes.
• box-sizing est une propriété CSS3 qui n’est nativement pas compatible IE6/IE7. Dans ce cas, soit on peut se permettre de laisser tomber ces antiquités, soit il existe un polyfill qui fonctionne bien, au prix d’une ressource à charger.)

Qu’en pensez-vous ?