Plusieurs postes sont disponibles chez Nmédia!Amène ton talent, on fournit le plaisir!
No_image-blogue

Le défi de l'intégration Web mobile : le box-sizing

8 février 2016Par Marc-André Morin
Catégorie :

Depuis que Google a annoncé une pénalité au référencement pour les sites qui n'ont pas de version mobile, cela donne une excellente raison d'optimiser votre site pour les téléphones intelligents. Pour un intégrateur Web, passer de « standard » à mobile peut s'avérer être une adaptation brusque et difficile : un minimum de contenu extrêmement bien ciblé, un design finger-friendly, mais surtout une intégration sur un petit écran d'une résolution différente d'un appareil à l'autre.

C'est un peu comme un artiste qui doit faire évoluer un thème selon plusieurs grandeurs de toile : le rendu visuel ne sera pas le même d'une toile à l'autre. Il faut donc briser les conventions du Web fixe et statique, à 960 pixels de large, afin de faire un site à 100 % de largeur, selon un écran qui varie de 320 pixels (iPhone 3s) à 2048 pixels (iPad 3).

Cet article est le premier d'une série qui traitera des différents sujets liés à l'intégration Web pour support mobile.

CSS3 : Un atout important!

Le responsive design doit avoir un rendu parfait peu importe la taille de l'écran. Et des tailles d'écran, il y en a une multitude! C'est pour cela que le calcul des zones doit se faire en pourcentage : le rendu doit s'adapter sans qu'on ait à spécifier des milliers de possibilités.

Il faut cependant se méfier des petits détails visuels, tels que les bordures et les ombres. Si on prend deux zones qui sont côte à côte, l'une de 30 % et l'autre de 70 %, le fait de rajouter une bordure d'un seul pixel fait exploser le conteneur :

[img]deux-zones-bleu-supperpose.jpg|550|center|false| Deux zones bleu supperposé avec l'attribut <em>Box-sizing: border-box</em>|[/img]

<div style="border:1px solid red;background:blue;width:30%;float:left;"> </div>
<div style="border:1px solid red;background:blue;width:70%;float:right;"> </div>

Dans l'exemple ci-dessus, on se retrouve avec des boîtes qui font un total de 100 % de large et des bordures qui, cumulées, font 4 pixels de large. Le total dépasse donc 100 %, ce qui ne permet pas aux 2 boîtes de rester côte à côte.

Et si on décide de retrancher un pourcentage à nos boîtes afin de l'allouer aux éléments visuels, pour le padding par exemple? Eh bien, les tailles varieront en fonction de l'espace disponible et ce n'est pas l'effet voulu :

[img]deux-zones-bleu-supperpose-box-sizing.jpg|550|center|false| Deux zones bleu supperposé avec l'attribut <em>Box-sizing: border-box</em>|[/img]

<div style="padding:.5%;background:blue;width:29%;float:left;"><div style="background:#FFF;"> </div></div>
<div style="padding:.5%;background:blue;width:69%;float:right;"><div style="background:#FFF;"> </div></div>

Dans l'exemple ci-dessus, les boîtes ont l'espace nécessaire pour être côte à côte, mais on remarque que l'espace occupé par le padding bleu varie selon la dimension de la boîte parente.

Mais alors, comment combiner une unité de mesure fluide (les pourcentages) avec une unité de mesure fixe (les pixels)? Avec CSS3, une méthode nous facilite vraiment la vie : le box-sizing.

L'attribut box-sizing, lorsqu'on utilise la valeur border-box, change le comportement normal du calcul des dimensions de boîtes. Au lieu d'AJOUTER la valeur du border ou du padding au width de la boîte, la valeur est SOUSTRAITE au width de la boîte. Voici le résultat :

[img]deux-zones-bleu-cote-a-cote.jpg|550|center|false| Deux zones bleu côte à côte|[/img]

<div style="border:1px solid red;background:blue;width:30%;float:left;
box-sizing:border-box;"> </div>
<div style="border:1px solid red;background:blue;width:70%;float:right;
box-sizing:border-box;"> </div>

Ainsi, sur le 30 % de la première boîte, il est entendu que 2 pixels sont alloués à la bordure, même chose pour la 2e boîte. Les deux boîtes ont donc l'espace nécessaire pour rester côte à côte!

Le box-sizing est donc un incontournable dans la création de sites responsives ou fluides.