# Responsive design · Veille technologique

[Source canonique](<https://sebastien.rigaux.be/veille/tags/responsive-design>)

Adaptation des interfaces aux dimensions d’écran et aux modes d’interaction.

## [Taste Skill : des règles de design et des contrôles navigateur pour les agents de code](<https://sebastien.rigaux.be/veille/liens/taste-skill-des-regles-de-design-et-des-controles-navigateur-pour-les-agents-de-code>)

Taste Skill fournit aux agents de code un système pour construire des sites d’entreprise moins génériques : palettes, layouts de hero, fragments d’interface et images réelles, avec une direction adaptée au type d’activité. Le dépôt propose des intégrations pour Claude Code et Codex, ainsi qu’un usage via `npx skills`.

Le point distinctif est le contrôle automatisé dans Chrome headless : la page est rendue à quatre largeurs, de 390 à 1440 px, et vérifiée pour les visuels vides, les contrastes, l’alignement ou les images manquantes sur réseau lent. Les effets WebGL et de scroll sont réservés aux pages tech, gaming et software, avec des replis statiques pour mobile et la réduction des animations.

2026-11-06 · [Markdown](<https://sebastien.rigaux.be/veille/liens/taste-skill-des-regles-de-design-et-des-controles-navigateur-pour-les-agents-de-code.md>) · [Ressource originale](<https://github.com/Leonxlnx/taste-skill>)

## [Chrome : ajuster automatiquement la hauteur d’une iframe selon son contenu](<https://sebastien.rigaux.be/veille/liens/chrome-ajuster-automatiquement-la-hauteur-d-une-iframe-selon-son-contenu>)

Chrome 154 introduit la propriété CSS `frame-sizing: content-height` qui permet à une iframe de s’ajuster dynamiquement à la hauteur de son contenu, sans scripts ni échanges de messages. Cette fonctionnalité nécessite que la page embarquée ajoute une meta-tag spécifique et autorise explicitement le domaine parent, ce qui limite son usage immédiat aux cas où les deux parties coopèrent. L’article détaille les usages concrets (paiement, widgets, formulaires dynamiques), les contraintes de compatibilité et les bonnes pratiques pour éviter les fuites d’information ou les sauts de layout.

2026-10-16 · [Markdown](<https://sebastien.rigaux.be/veille/liens/chrome-ajuster-automatiquement-la-hauteur-d-une-iframe-selon-son-contenu.md>) · [Ressource originale](<https://alfy.blog/2026/10/09/iframe-that-finally-fit-their-content.html>)

## [Fluid Tailwind CSS : créer des interfaces adaptatives](<https://sebastien.rigaux.be/veille/liens/fluid-tailwind-css-creer-des-interfaces-adaptatives>)

Ce plugin ajoute des classes Tailwind CSS pour définir des valeurs fluides entre plusieurs tailles d’écran. Il permet de garder les ajustements typographiques et d’espacement dans le vocabulaire utilitaire du projet.

2026-03-26 · [Markdown](<https://sebastien.rigaux.be/veille/liens/fluid-tailwind-css-creer-des-interfaces-adaptatives.md>) · [Ressource originale](<https://github.com/nguyenviet02/fluid-tailwindcss>)

## [Tailwind Clamp : utiliser \`clamp()\` avec des classes Tailwind](<https://sebastien.rigaux.be/veille/liens/tailwind-clamp-utiliser-clamp-avec-des-classes-tailwind>)

Tailwind Clamp expose des valeurs CSS `clamp()` sous forme de classes utilitaires. Le plugin facilite la création d’échelles fluides de taille ou d’espacement sans multiplier les breakpoints.

2026-03-26 · [Markdown](<https://sebastien.rigaux.be/veille/liens/tailwind-clamp-utiliser-clamp-avec-des-classes-tailwind.md>) · [Ressource originale](<https://github.com/nicolas-cusan/tailwind-clamp>)

## [Utopia : construire des échelles fluides de texte et d’espacement](<https://sebastien.rigaux.be/veille/liens/utopia-construire-des-echelles-fluides-de-texte-et-d-espacement>)

Utopia définit des échelles pour petits et grands écrans puis laisse le navigateur interpoler entre elles. Cette approche aide à construire un système typographique cohérent avec moins de breakpoints.

2024-10-15 · [Markdown](<https://sebastien.rigaux.be/veille/liens/utopia-construire-des-echelles-fluides-de-texte-et-d-espacement.md>) · [Ressource originale](<https://utopia.fyi/>)
