Conception intrinsèque : dimensionnement piloté par le contenu

La conception intrinsèque, terme créé par Jen Simmons, consiste à laisser le contenu déterminer sa propre taille au lieu d'imposer des dimensions explicites en pixels. CSS fournit des mots-clés de dimensionnement intrinsèque qui rendent les mises en page naturellement adaptatives, sans surcharges dépendantes de points d'arrêt.

min-content : la plus petite taille qui permet d'afficher le contenu sans débordement (le texte passe à la ligne à chaque espace). max-content : la taille nécessaire pour afficher le contenu sur une seule ligne, sans retour à la ligne. Ces deux valeurs reflètent les dimensions réelles du contenu.

fit-content équivaut à min(max-content, max(min-content, available)). La taille augmente avec le contenu jusqu'à l'espace disponible, puis le contenu passe à la ligne. Cette valeur convient parfaitement aux boutons et aux libellés qui doivent être aussi larges que leur texte, sans dépasser la largeur de leur conteneur.

Dans grid-template-columns, minmax(min, max) définit les tailles minimale et maximale d'une piste. minmax(200px, 1fr) crée une colonne d'au moins 200px, qui peut toutefois s'agrandir. Associée à auto-fill, cette fonction permet de créer des grilles intrinsèquement adaptatives.

Les deux remplissent la ligne avec le plus grand nombre possible de pistes. auto-fill conserve les pistes vides, ce qui préserve le nombre de colonnes. auto-fit réduit les pistes vides afin que les pistes remplies s'agrandissent pour occuper tout l'espace. Utilisez auto-fit pour les mises en page pilotées par le contenu qui doivent s'étendre jusqu'à la largeur disponible.

clamp(min, preferred, max) maintient une valeur entre plusieurs limites. font-size: clamp(1rem, 2.5vw, 1.5rem) évolue entre 1rem et 1.5rem selon la largeur de la fenêtre d'affichage : une typographie fluide sans requêtes média.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) crée une grille adaptative qui ne comporte qu'une seule colonne dans les fenêtres d'affichage très étroites et ajoute automatiquement des colonnes lorsque l'espace le permet. Aucune requête média ni aucun JavaScript n'est nécessaire.

aspect-ratio: 16/9 permet à un élément de conserver ses proportions lorsque sa largeur change. Associé à width: 100%, ce paramètre fait occuper au conteneur vidéo toute la largeur de son parent tout en conservant toujours un rapport de 16:9, sans JavaScript ni astuces reposant sur des marges internes en pourcentage.

La conception intrinsèque s'associe aux propriétés logiques de CSS (inline-size, block-size, margin-inline) pour créer des mises en page compatibles avec les modes d'écriture horizontaux et verticaux. Le dimensionnement intrinsèque s'adapte automatiquement au sens d'écriture.

Fixe : width: 300px — toujours 300px, quel que soit le contenu. Intrinsèque : width: fit-content — aussi large que le contenu, dans les limites imposées. Les mises en page fixes nécessitent des points d'arrêt pour s'adapter ; les mises en page intrinsèques s'ajustent d'elles-mêmes en fonction de leur contenu et de leur contexte.

La conception intrinsèque est particulièrement efficace lorsque la taille du contenu varie naturellement. Forcer un dimensionnement intrinsèque alors que le contenu est connu et uniforme ajoute de la complexité sans apporter de bénéfice. Utilisez des tailles explicites pour les éléments fixes de l'interface (navigation, barre d'outils) et le dimensionnement intrinsèque pour les zones de contenu.

Quelle différence auto-fit présente-t-il par rapport à auto-fill dans grid-template-columns ?

La conception intrinsèque utilise les mots-clés de dimensionnement de CSS (min-content, max-content, fit-content), minmax() avec auto-fit, clamp() pour une mise à l'échelle fluide et aspect-ratio afin de créer des mises en page fondées sur les dimensions du contenu plutôt que sur des points d'arrêt de la fenêtre d'affichage. Le résultat est une mise en page naturellement adaptative, avec moins de CSS et moins de requêtes média.