Battre les frontières: le fléau de la mise en page réactive

Une conception réactive nécessite souvent de définir vos largeurs à l'aide de pourcentages. C'est assez facile à accomplir, c'est-à-dire jusqu'à ce que vous commenciez à ajouter des frontières. Si vos colonnes et votre largeur totale sont définies à l'aide de pourcentages, une taille de bordure statique fait des ravages dans votre présentation.

Aujourd'hui, nous allons examiner différentes façons de résoudre ce problème. Vous apprendrez à créer une mise en page totalement fluide qui ne craint pas les bordures supplémentaires ni le rembourrage.

La conception sensible est-elle facile? En théorie

La conception adaptative est actuellement notre meilleure solution pour proposer un contenu optimisé à la richesse de différents appareils et tailles d'écran qui accèdent au Web aujourd'hui. Avec quelques requêtes multimédia de base, nous pouvons rapidement et facilement transformer une conception statique en une chose qui évolue en fonction des besoins uniques de l'utilisateur. Comment est-ce incroyable?

Le codage dans le monde réel vous surprend?

En théorie, cela me semble simple et agréable. J'ai passé beaucoup de temps à lire et à écrire sur la conception réactive, donc je connais suffisamment la théorie et les pratiques pour ne jamais rencontrer d'obstacles majeurs. Cependant, le codage dans le monde réel peut vous surprendre. Peu importe votre état de préparation, au moment de concrétiser votre projet, des obstacles majeurs se présenteront. Surtout lorsque vous approchez de mises en page complexes en CSS.

Des millions de problèmes se posent dans des situations comme celle-ci, mais aujourd'hui, je souhaite m'attarder sur un problème qui m'a précisément lancé dans une courbe: les frontières. Lors de la conception de dispositions réactives, ces touches apparemment innocentes peuvent avoir pour effet de tout gâcher!

Math réactif

Lorsque vous codez un site complet sur responsive, une pratique fortement recommandée consiste à utiliser des largeurs en pourcentage sur votre contenu. Bien sûr, vous pouvez combiner des requêtes de supports avec des largeurs statiques, mais votre mise en page n’est pas aussi adaptative qu’elle pourrait l’être. Si c'est le but ultime, pourquoi ne pas aller jusqu'au bout?

La combinaison de dispositions de colonnes multiples avec des largeurs basées sur des pourcentages implique un peu de calcul, mais elle est en réalité super basique et peut être manipulée par toute personne possédant des compétences de base en addition et multiplication (nous avons effectué ce bit suivant dans notre tutoriel de galerie de vignettes réactif).

Disons que nous voulons une mise en page de cinq colonnes. La première chose que j'aime faire, c'est penser aux marges. Si nous voulons 4% de marges entre nos colonnes, 4% fois 5 colonnes = 20% de notre largeur étant réservée aux marges. Ensuite, nous soustrayons 20% de la largeur totale (100%) pour obtenir 80% restants pour les colonnes réelles. 80% divisé par cinq colonnes correspond à une largeur de 16% sur chaque colonne. Voici un graphique pour clarifier les choses:

Utiliser ces calculs à bon escient dans notre code CSS ressemblerait à ce qui suit. Assez facile non?

Le problème de la frontière

Pas si vite. Disons que nous voulons ajouter une bordure à notre conception. Comment fait-on cela? Normalement, nous ajoutons simplement une bordure à la classe de colonnes, mais nous avons déjà pris en compte 100% de la largeur dans la présentation ci-dessus. Ajouter une bordure complète complètement notre mise en page. Ici nous avons cinq colonnes distribuées via le CSS ci-dessus:

Et voici ce qui se passe lorsque nous ajoutons une bordure de say, 2px à une colonne:

La solution serait bien sûr de prendre en compte la frontière dans nos calculs précédents, mais comment s'y prendre? En fin de compte, nous ne pouvons pas définir la taille de la bordure sous forme de pourcentage, mais simplement de valeur statique. Cela pose problème car si nous utilisons des pourcentages pour tout le reste, la quantité d’espace que nous laisserons à la bordure sera une valeur variable, ce qui signifie qu’elle changera avec la largeur de la page. Cela rend presque impossible de choisir une largeur pour nos frontières! Alors que faisons-nous? Devrions-nous abandonner et abandonner l'idée de frontière?

Contour CSS à la rescousse

De toute évidence, nous avons besoin d’un moyen d’appliquer une bordure à une colonne sans visser sa largeur. Comme tout bon tricheur CSS le sait, il existe une propriété qui fait exactement cela: les contours. En utilisant le code suivant, nous pouvons laisser nos calculs exactement comme nous l’avons déjà fait et conserver un effet de type bordure qui ne casse pas notre mise en page.

Cela fonctionne très bien pour notre test, les colonnes s’écoulent bien et s’intègrent parfaitement dans l’espace prévu malgré le contour:

Maux de tête

Nous avons trouvé notre solution, félicitons-nous et appelons cela un jour! Malheureusement, il y a toujours une mise en garde. Dans ce cas, il y en a plusieurs.

Compatibilité du navigateur
Le premier problème qui se pose avec l'utilisation de la propriété de contour CSS est bien sûr la compatibilité du navigateur. Pour être juste, la situation ici pourrait être pire. Les navigateurs modernes bénéficient d’un excellent support: Safari, Chrome, Opera, voire IE! Malheureusement, IE ne prend en charge que IE8, IE6 et 7 n'ayant aucune assistance.

Récemment, de nombreux développeurs ont décidé de supprimer le support IE6. Je sais donc que beaucoup ne voudront pas faire de même pour IE7. Cependant, la bonne nouvelle est qu’il s’agit là d’une pure touche d’esthétique subtile et que cela ne va certainement pas gâcher ma journée si tout le monde voyait les grandes lignes, à l’exception des utilisateurs de IE7.

Problème Firefox Box-Shadow
Même si Firefox supporte pleinement la propriété de contour CSS, vous devez faire très attention à son utilisation. Plus précisément, vous rencontrerez des problèmes si vous combinez un contour avec une zone d'ombre. Pour voir ce que je veux dire par là, voici un aperçu et une boîte-ombre rendue dans Safari (la bonne façon):

Maintenant, voici exactement le même code rendu dans Firefox (à la manière foirée):

Comme vous pouvez le constater, pour des raisons insensées, Firefox place le contour en dehors de l’ombre plutôt que sur le bord réel de notre colonne. Cela aboutit à une laideur inacceptable!

Tout ou rien
Une dernière chose à retenir sur les contours CSS: vous ne pouvez pas les appliquer de manière sélective. Avec les bordures, vous pouvez utiliser border-right, border-top, etc., mais avec un contour, vous êtes obligé d'accepter l'idée qu'il soit uniforme sur tout le pourtour de votre objet.

Une autre solution: la taille de la boîte

Le contour CSS a beaucoup de bagages! Cela résout notre problème, mais vient avec un ensemble assez volumineux d'instructions que vous pourriez ne pas aimer. Si seulement il y avait un moyen d’utiliser la propriété de frontière bien supérieure mais d’ajuster le modèle de boîte CSS à nos propres périphériques. Eh bien, vous avez de la chance, car il existe en fait une telle propriété: la taille des boîtes.

Cette propriété magique nous permet de peaufiner ce modèle de boîte toujours déroutant. La valeur par défaut de la taille de la boîte est "content-box", qui est essentiellement le modèle de boîte que nous connaissons et aimons. Les valeurs de largeur et de hauteur déterminent la taille du contenu et tout remplissage ou bordure est dessiné en dehors de celui-ci et ajoute donc à la largeur. Donc, un div large de 200px avec une bordure de 2px consomme techniquement 204px d’espace.

boîte à bordure

L'autre valeur possible pour le dimensionnement de la boîte est "border-box", qui place en fait n'importe quel remplissage et bordure à l'intérieur de la hauteur et de la largeur spécifiées. Cela signifie qu'un div large de 200px avec une bordure de 2px n’est encore que de 200px! Voici à quoi cela ressemble si nous l'appliquons à nos colonnes:

Avec ce code, nos colonnes coulent parfaitement malgré l'application de bordures:

Nous pouvons même aller un peu plus loin et ajouter un peu de rembourrage à l'équation sans rien foirer. Tant que la propriété box-sizing est définie sur border-box, aucun calcul supplémentaire n'est nécessaire. Ajoutez toutes les bordures et le rembourrage que vous aimez et tout fonctionne toujours:

Compatibilité du navigateur

Il est intéressant de noter que la compatibilité du navigateur est la même que celle de contour, ce qui signifie que cela fonctionne à peu près avec tout sauf IE6 et IE7. Cependant, votre principale préoccupation est que, contrairement au contour, la présentation échouera dans les navigateurs qui ne prennent pas en charge cette propriété.

Quelle méthode est la meilleure?

La propriété de contour est définitivement la solution la plus simple, elle fonctionne dans de nombreuses situations et si elle échoue, rien ne se passe mal pour votre mise en page. Cependant, je pense que la méthode de dimensionnement de la boîte se sent beaucoup mieux. Je peux le combiner avec une ombre sans aucun problème grave, le support du navigateur n’est en fait pas mauvais et je peux toujours profiter de la bonté des frontières. Le fait que le rembourrage puisse également être incorporé dans le mélange est la cerise sur le gâteau et le met en avance sur la concurrence dans mon esprit. Si IE7 vous inquiète, vous pouvez toujours créer une feuille de style conditionnelle rapide qui résoud le problème.

Démo

Si vous souhaitez voir le dimensionnement de boîtes en action, dirigez-vous vers Dabblet pour voir la démonstration en direct de l'exemple ci-dessus.

Conclusion

La taille des contours et la taille des boîtes représentent deux solutions possibles au problème de la combinaison de bordures avec des largeurs basées sur des pourcentages dans les présentations CSS. Aucune des solutions n'est parfaite, mais tant que vous savez ce que vous faites, les deux peuvent être utilisés pour résoudre avec succès vos problèmes de mise en page.

Maintenant que vous avez vu mes solutions à ce problème, il est temps que vous interveniez. Comment gérez-vous le problème des frontières dans les présentations réactives? Avez-vous une solution différente non répertoriée ci-dessus?