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