Ahmad Shadeed explore dans cet article comment construire une mise en page de section moderne et dynamique en CSS, en s’appuyant sur des techniques avancées comme les container queries, le sélecteur :has(), la fonction clamp(), et les unités de requête de conteneur (cqw). Il propose une solution pour adapter automatiquement la disposition d’une section (en-tête + grille de cartes) selon le nombre d’éléments, en évitant les orphelins visuels et en optimisant l’espace. L’auteur détaille aussi l’utilisation de la typographie fluide, des layouts responsives pour les cartes, et des styles conditionnels (par exemple, si une image est absente). Des astuces comme display: contents pour intégrer l’en-tête dans la grille ou random() pour des bordures aléatoires (expérimental) sont également présentées. Une démonstration pratique et des exemples de code illustrent chaque concept, montrant comment le CSS moderne permet de créer des designs flexibles et adaptatifs sans JavaScript.
Nathan Long partage cinq articles qui ont marqué des tournants dans sa carrière. Il évoque notamment l’impact de l’article d’Ethan Marcotte sur le responsive design, qui l’a aidé à comprendre la conception pour des écrans de tailles variables et à décrocher son premier emploi dans le web. Il mentionne aussi l’influence de l’OOCSS de Nicole Sullivan pour une CSS plus durable, son initiation à Vim grâce à un article provocateur, et l’adoption de flexbox via les tutoriels de Chris Coyier. Enfin, il souligne comment les avancées d’ES6 ont transformé sa façon d’écrire du JavaScript. L’article se conclut par un appel à partager ses propres découvertes, rappelant que chaque publication, même modeste, peut inspirer d’autres développeurs. Une belle réflexion sur la transmission et l’évolution collective du métier.
Andy Clarke explique comment rendre les SVGs encore plus adaptatifs en utilisant les éléments <symbol> et <use> combinés aux Media Queries CSS, afin d’optimiser leur affichage selon les tailles d’écran. Plutôt que de se contenter du redimensionnement classique, il propose une méthode pour repositionner et redimensionner les éléments internes d’un SVG sans dupliquer le code ni alourdir la page. En définissant chaque élément graphique une seule fois dans une bibliothèque de <symbol>, puis en les réutilisant via <use> dans différentes mises en page (par exemple, une version portrait pour mobile et une version paysage pour desktop), il parvient à créer des SVGs qui s’adaptent intelligemment. Cette approche évite de charger plusieurs versions du même SVG et permet même d’animer des parties spécifiques. La technique repose sur l’utilisation astucieuse des attributs transform et des sélecteurs CSS pour cibler les éléments à animer, tout en gardant une structure légère et maintenable. Un exemple concret est donné avec une illustration inspirée de Quick Draw McGraw, démontrant comment basculer entre deux dispositions selon la taille de l’écran, le tout sans JavaScript. Une solution élégante pour des SVGs à la fois performants et flexibles.
L'auteur montre un cas d'utilisation des container queries : la création de sous layouts, au sein de media queries, qui grandissent alors que le viewport diminue.
Tout est dans le titre
Tout est dans le titre
Après les media queries, les container queries, et la typographie fluide... une démonstration impressionnante de ce que l'on peut faire avec clamp et les nouvelles unités (cqi - inline container query unit)
L'utilisation de la fonction css3 min() pour le design adaptatif... intéressant
Un article très complet sur les "container queries" et les "style queries" en CSS
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
L'auteur propose une approche alternative à l'utilisation de l'élément picture, utile si vous avez déjà une base de code... Il recommande néanmoins l'utilisation de picture si vous démarrez un nouveau projet.
L'autrice montre la réalisation de ces layouts avec l'aide de Grid ou de Flexbox
Tout est dans le titre
Plein de bons conseils sur la typographie (accessibilité et design responsive)
Apprendre le développement web : accessibilité, HTML, images, responsive web design, PWA, formulaires, et CSS avec les équipes de Google
Une présentation de la fonction CSS clamp