Bonne année 2016, et bienvenue dans mon premier CSS Tip ! J’ai décidé de créer cette petite série de Tips orientés CSS car dans mon travail j’ai souvent besoin de trouver des petits hacks et j’aimerais les partager avec vous, cela vous évitera peut être de passer des heures sur StackOverflow 😉
Description du problème
Pour ce premier tip, on va se pencher sur un problème récurrent avec l’excellent framework CSS Foundation (de ZURB) et Firefox : l’alignement des Columns.
En effet, lorsque l’on souhaite simplement créer deux colonnes dans une row en utilisant les classes « .columns.large-X » afin d’aligner une colonne à gauche et une colonne à droite sur cette même ligne, je vais donc créer deux divs :
|
1 2 3 4 |
<div class="columns large-12"> <div class="columns large-8"></div> <!-- 1er div --> <div class="columns large-4"></div> <!-- 2ème div --> </div> |
C’est simple et cela aura normalement pour effet de positionner le premier div à gauche, et le deuxième à droite. Néanmoins Firefox n’est pas de cet avis et nous offre souvent un décalage du plus bel effet :
Et voici la même page, sous Chrome :
La Solution
Rassurez-vous, cette dernière est on ne peut plus simple ! Il vous suffit simplement de placer dans votre feuille de style le code suivant :
|
1 2 3 4 5 |
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } |
Et voilà ! Plus de problème d’alignement foireux avec Firefox. Je vous laisse admirer le résultat :
Conclusion
Vous avez vu que ce hack est vraiment très simple et à l’époque grâce à normalize.css on pouvait éviter ce souci.
Néanmoins normalize.css utilise la valeur « inherit » à la place de « border-box« , et j’ai l’impression que les dernières versions de Firefox ont besoin de cette nouvelle valeur pour fonctionner comme à l’époque (je dois dire que Firefox me déçoit de plus en plus, en effet il me faut passer de plus en plus de temps à débugger mes intégrations sous Firefox, et c’est malheureux car ce navigateur est loin d’être mauvais).
J’espère que ce petit tip vous sera utile 😉 On se retrouve très prochainement pour un prochain CSS Tip !
