Utiliser le modèle des boites CSS

Pour simplifier le dimensionnement des éléments

Paul Underwood

Traducteur

Sébastien Germez

Dans ce tutoriel, nous allons voir une nouvelle méthode pour dimensionner des éléments HTML en CSS.

Commentez

- Titre : Utiliser le modèle des boites CSS

- Auteur : Paul Underwood

- Traducteur : Sébastien Germez

- Parution : 22 novembre 2012

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2012 Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Traduction

- II. Introduction

- III. La propriété « box-sizing »

- IV. Appliquer cette méthode à tous les éléments

- V. Support des navigateurs

- VI. Conclusion

- VII. Remerciements

I - Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Use Box Model For Easier Widths.

II - Introduction

Dans cet article nous allons voir une petite astuce pour modifier la taille des éléments HTML en CSS. Il y a plusieurs choses qui définissent la taille d'un élément comme sa largeur, les marges intérieures ou encore les bordures.

Taille totale = largeur + marges intérieures + bordures.

Cela signifie que si la largeur de votre élément est de 500px avec une marge intérieure de 50px et une bordure de 10px, la taille totale sera alors de 620px.

620px = 500px + (50px * 2) + (10px * 2).

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Ce calcul complique un peu la mise en page lorsqu'elle est un peu complexe, si vous souhaitez modifier les marges intérieures ou encore les bordures à l'avenir, il faudra également modifier la largeur de l'élément.

III - La propriété « box-sizing »

Il existe une propriété CSS box-sizing qui peut simplifier ce calcul. En effet en utilisant box-sizing avec la valeur border-box les marges intérieures ainsi que les bordures seront incluses dans la largeur de votre élément. Cela change donc le calcul présenté ci-dessus.

div {
box-sizing: border-box;
}

La taille totale est donc maintenant l'addition de la largeur, des marges intérieures et des bordures de l'élément.

Taille totale = (largeur - marges intérieures - bordures) + marges intérieures + bordures.

Si nous reprenons le même exemple, un élément dont la largeur est de 500px avec des marges intérieures de 50px et une bordure de 10px aura une taille totale de 500px.

500px = 380px + (50px * 2) + (10px * 2).

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

IV - Appliquer cette méthode à tous les éléments

Si vous préférez cette façon de procéder, il est possible de l'appliquer automatiquement à tous vos éléments.

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

Vous penserez peut-être qu'utiliser le sélecteur * ralentira le chargement du CSS. Paul Irish a mis en évidence après une série de tests que l'utilisation de ce sélecteur ajoute une charge de 4 % seulement, ce qui est négligeable.

V - Support des navigateurs

La propriété box-sizing est supportée par tous les principaux navigateurs.

Internet Explorer la supporte depuis la version 8.
Firefox la supporte depuis la version 2 mais uniquement avec le préfixe -moz.
Chrome la supporte en version préfixée (-webkit) jusqu'à la version 9, et en version non préfixée pour les versions supérieures.

Pour rester au courant des évolutions du support des navigateurs, vous pouvez consulter ce lien : http://caniuse.com/css3-boxsizing.

VI - Conclusion

Nous avons vu dans ce tutoriel une nouvelle méthode pour définir la taille de vos éléments HTML en CSS. Cette méthode simplifie les calculs lors d'une mise en page complexe, en intégrant les marges intérieures et les bordures dans la taille définit en CSS.

VII - Remerciements

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également zoom61 pour sa relecture orthographique.