Utiliser Grid ou Flexbox ? Rachel Andrew est certainement le plus ardent des promoteurs de CSS Grid Layout. Elle répond ici à la question de savoir quand et comment utiliser Flexbox ou CSS Grid Layout. Par Rachel Andrew Dans ma récente présentation à Fluent Conf, j’ai montré les caractéristiques communes et les différences existant entre Flexbox et CSS Grid Layout. Actuellement, nous ne pouvons utiliser CSS Grid Layout qu’en activant les fonctionnalités expérimentales des navigateurs, cependant lorsque Grid sera supporté, on pourra parfois s’interroger pour savoir lequel utiliser, de Grid ou de Flexbox. Voici quelques réflexions sur le sujet. 10 techniques avancées et secrets de CSS2 A l'heure où les anciennes versions d'Internet Explorer disparaissent, il devient plus que temps de s'ouvrir aux secrets d'un langage malheureusement trop peu connu : CSS2, ou plus précisément CSS2.1. De larges parties de CSS2 ont été occultées en raison des faiblesses d'IE6 puis d'IE7. Le marché actuel nous offre enfin la possibilité, au cas par cas, de négliger ces anciennes versions du navigateur de Microsoft.
Oui, Flexbox est buggué – La Tête dans le Flux À force de promettre monts et merveilles à propos de Flexbox, on finit par croire que ce module de positionnement est parfait et dénué de bugs. Bah non, sans surprise, Flexbox est buggué. Comme tous les autres. Zoomer une image avec les CSS - CSS Debutant Zoomer une image, à l'aide des CSS2, lors de son survol de la souris peut se faire très facilement. Il suffit de combiner le pseudo-élément :hover à la balise img (image). Hélas, tant que MSIE6 existera, il faudra utiliser d'autres moyens pour le même résultat. En effet, il n'implémente :hover que pour les liens... Ce tutoriel décrit deux méthodes pour zoomer une image 100% CSS, la première simplissime mais inopérante avec MSIE6, la seconde utilisant la technique des « portes coulissantes ».
Images responsive, flexbox et souci de ratio d'affichage Sur plusieurs navigateurs (sauf Firefox) nous avons constaté au sein de différents projets à l'agence un petit bug concernant le module CSS3 Flexbox. Le constat est celui-ci : lorsque l'on place une image responsive directement dans un container en flexbox, l'image s'affiche avec un petit souci de proportions : Pour en savoir un peu plus sur l'explication de ce comportement (qui n'est en fait pas un bug) je vous laisse lire cet article.
Le petit flexbox illustré chez Vincent Valentin. Nantes, le 7 septembre 2015. Flexbox est un nouveau module d’affichage CSS qui apporte quelques possibilités graphiques jusqu’alors impossibles et qui permet aussi de grandement simplifier les constructions habituelles. Son principal frein reste le support limité à IE 10+ (pas de souci pour la majorité des autres navigateurs), mais au regard des nouveautés offertes, il est d’ores et déjà intéressant d’en comprendre le fonctionnement et de résoudre certaines problématiques grâce à celui-ci. Jack in the flexbox Cousin germain de l'objet Media, qui fait les beaux jours de OOCSS, l'objet “Autogrid” a les particularités suivantes : s'adapte automatiquement au nombre d'éléments enfantschaque enfant est fluide, de même largeur et même hauteur par défautaffichage sur une seule ligne (pas de saut de ligne prévu)des gouttières précises sont possibles Cette configuration est présente dans un nombre impressionnants de gabarits et de designs. Et elle ne nécessite que quelques déclarations en Flexbox ! Le lien CodePen : EDIT : une journée après avoir créé mon CodePen, un article sur CSS-tricks traite de ce même sujet ;)