L’article explore comment adapter des designs éditoriaux et distinctifs aux petits écrans, en évitant la monotonie des colonnes infinies. L’auteur, Andy Clarke, démontre que le design pour mobile ne doit pas se limiter à empiler du contenu verticalement, mais peut s’inspirer des magazines en créant des « moments » visuels uniques : utilisation du défilement horizontal pour regrouper des éléments (comme des pochettes d’albums), placement d’éléments hors-cadre pour conserver la personnalité du design, ou encore création de mini-maquettes défilables qui rappellent les doubles pages imprimées. Il propose des techniques CSS modernes comme les container queries, le shape-outside, et les media queries d’orientation pour recomposer dynamiquement les layouts selon l’espace disponible et l’orientation de l’écran. L’objectif est de préserver l’impact visuel et la narration, même sur mobile, en jouant sur la variété, le rythme et l’interaction.
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.
On n'utilise pas un table pour le design d'une interface... et les "id" sont uniques
Toutes les manières d'avoir un layout divisé en 2 colonnes, depuis l'arrière-plan avec un gradient jusqu'à l'utilisation de grid-layout
Tout est dans le titre
Un problème de mise en page CSS
Tout est dans le titre (via https://blog.shevarezo.fr/post/2022/05/19/css-layout-codes-css-mises-en-page-elements )
Liste de propriétés CSS déclenchant soit un recalcul du Layout, soit le réaffichage de certains pixels (Paint), soit la recomposition de la page (Composite) - certaines propriétés déclenchant ces 3 événements (via https://stephaniewalter.design/fr/blog/semaine-pixels-27-janvier-2017/ )
L'auteur explique la présence de plusieurs algorithmes pour le layout en CSS... ce qui explique certaines "bizarreries" que l'on peut rencontrer.
Tout est dans le titre
Tout est dans le titre
L'auteur explique son approche pour le redesign de son site, avec de bons conseils pour le choix d'une police
... 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
Tout est dans le titre
Les différentes manières de mettre en page avec les CSS