Aujourd’hui, focus sur une propriété CSS donc vous avez tous entendu parler au moins une fois : Flexbox.
Vous souvenez-vous de l’époque où nous utilisions des tables à tort et a travers pour désigner nos sites ? Je pense que tout le monde parmi nous s’accorde pour dire que cette époque était une période très sombre, avec un HTML absolument pas sémantique et un CSS plein de hack pour obtenir un design convenable sur la plupart des navigateurs. Mais que dire de notre Web actuel ?
Notre CSS actuel est plein d’éléments en Float, et notre HTML sémantique se retrouve plein de classes pas sémantiques du tout comme .row, .small-12 ou .columns. Comment en est-on arrivé là ? Mais avec le mobile mes amis ! La responsive demande des éléments flexibles, pouvant changer de positions les uns par rapport aux autres, et c’est quelque chose qu’un hack à base de float est possible d’amener.
La solution existe, pourtant, et elle s’appelle Flexbox.
Flexbox, qu’est-ce que c’est ?
Flexbox est un nouveau modelé de boîte (comme « block », ou « inline ») fait pour travailles avec des changements de taille. En quelques mots, il permet de créer des éléments flexibles et de déterminer leurs comportements en cas de diminutions de la taille de l’écran.
Permettre de créer un element faisant au minimum 250px alors que d’autres éléments se partagent l’espace restant, changer l’ordre vertical ou horizontal des éléments en fonction de la taille de l’écran ou de certains attributs, tout ces besoins très complexes à faire actuellement est d’une simplicité enfantine avec l’aide de Flexbox.
Voir : 20 tutos Flexbox pour apprendre à l’utiliser.
Pour plus d’informations, je vous propose cet excellent article en Français.
Autre article tres interessant sur le sujet, en anglais malheureusement.
Enfin, Solved by Flexbox recence de nombreux exemples d’utilisation de Flexbox pour nous simplifier la vie.
Enfin, si vous avez envie d’essayer Flexbox par vous-même, je vous invite à faire vos tests dans ce pen prévu pour.
Flexbox existe depuis longtemps, semble merveilleux, mais quand pourra-t-on l’utiliser ?
Tout dépend du support navigateur que vous considérez comme critique, mais si comme moi vous placez le seuil des techniques utilisables à 95% du parc navigateur, la réponse est… Maintenant ! 95.36% des navigateurs français supportent Flexbox, ce qui est un parc plus que suffisant pour la plupart des sites.
Beaucoup d’entre vous sont peut-être d’ailleurs déjà au courant et l’utilise régulièrement, mais je ne me suis pas rendu compte de la disparition des IE<10 il y a quelques semaines à peine.
Et si nous n’avons pas envie d’abandonner des navigateurs derrière nous ?
Neutron CSS est un nouveau framework SASS vraiment très léger qui émule le fonctionnement de flexbox grace à un usage très intelligent des propriétés CSS calc() et nth-child(). De cette manière, vous pouvez obtenir un comportement vraiment très semblable à Flexbox avec un support navigateur étendu.
L’objectif est de changer le coeur du framework par Flexbox avec l’augmentation de son support, ce qui vous permettra de mettre à jour vos sites avec Flexbox sans le moindre effort de votre part.
Attention, ce framework n’est pas encore en version 1, et son API peut subir quelques changements entre les différentes versions.
Cette ressource est un set de mixins pour sass qui vous permettra de travailler avec Flexbox le coeur plus léger. Leur rôle est de fournir de manière automatique un failback pour les navigateurs ne supportant pas Flexbox. De cette manière, le site restera lisible sans efforts supplémentaires de votre part.