Leave your thoughts

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 :

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 :

tips1_css_bug_Firefox

 

Et voici la même page, sous Chrome :

tips1_css_bug_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 :

 

Et voilà ! Plus de problème d’alignement foireux avec Firefox. Je vous laisse admirer le résultat :

tips1_css_bug_Firefox_corrigé

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 !

A propos de l'Auteur

Hadrien

Webdesigner & Développeur Freelance. Sound Designer, grand technophile et Gamer averti.

http://hadrien.co