Dimensionnement des champs CSS

Une seule ligne de code pour redimensionner automatiquement les éléments avec du contenu modifiable.

Adam Argyle

Sans field-sizing, pour créer un champ de saisie de taille appropriée, vous deviez deviner la taille moyenne d'un champ de texte ou utiliser JavaScript pour compter les caractères et augmenter la hauteur ou la largeur de l'élément à mesure que l'utilisateur saisissait du texte. En d'autres termes, il n'était pas facile de suivre le contenu qu'un utilisateur avait saisi dans une entrée, et cela pouvait entraîner des erreurs.

Avec field-sizing, vous n'avez besoin que d'une seule ligne de CSS pour activer le dimensionnement en fonction du contenu. Ce style de dimensionnement basé sur le contenu fonctionne également pour plus qu'une zone de texte.

textarea, select, input {
  field-sizing: content;
}

Liens rapides

Spécification | Explication

Vous aimez les vidéos courtes ?

Wes Bos et Jhey ont chacun publié une excellente vidéo sur Twitter pour vous présenter field-sizing.

Quels éléments sont concernés par field-sizing ?

Voici une liste des éléments <form> sur lesquels field-sizing agit, avec un résumé des effets sur chacun d'eux.

<textarea>

L'entrée est réduite à un min-inline-size ou pour s'adapter à l'espace réservé.

À mesure que l'utilisateur saisit du texte, l'entrée s'agrandit dans la direction intégrée jusqu'à atteindre une taille intégrée maximale. À ce stade, le texte est renvoyé à la ligne et la taille du bloc de l'entrée augmente pour s'adapter à la nouvelle ligne.

<select> et <select multiple>

L'élément de sélection est réduit pour s'adapter à l'option sélectionnée.

Un élément select avec l'attribut multiple s'agrandit pour s'adapter à l'option la plus large et à la hauteur nécessaire pour s'adapter au nombre d'options.

<input type="text">, <input type="email"> et <input type="number">

L'entrée est réduite à un min-inline-size ou pour s'adapter à l'espace réservé.

À mesure que l'utilisateur saisit du texte, l'entrée s'agrandit dans la direction intégrée jusqu'à atteindre un max-inline-size, auquel cas le dépassement tronque la valeur d'entrée.

<input type="file">

Le champ de saisie se réduit au bouton et au texte du nom de fichier prérempli.

Lors de l'importation d'un fichier, l'entrée devient aussi large que le bouton plus le texte du nom de fichier.

Afficher, tester et comparer les résultats

Voici un exemple interactif et minimal des comportements avant et après de chaque élément de formulaire, tels qu'ils sont affectés par field-sizing.

Analyse…

Lorsque vous utilisez un [placeholder], l'espace réservé devient le contenu. Nous l'avons déjà mentionné, mais nous le rappelons ici, car il est important de le savoir lorsque vous appliquez un style à un formulaire. Un espace réservé long ou court modifie la taille intrinsèque des entrées avec field-sizing: content.

Gestion des styles vides et débordants

L'utilisation de field-sizing implique un travail supplémentaire. Ahmad Shadeed appelle cela le "CSS défensif", où l'objectif n'est pas nécessairement d'expliquer exactement comment un élément doit se comporter ou s'afficher, mais plutôt de l'empêcher d'entrer dans un état visuel indésirable. Auparavant, les entrées avaient une taille fixe, mais après l'application de field-sizing: content, elles peuvent devenir beaucoup trop petites ou beaucoup trop grandes.

Les styles suivants constituent un bon point de départ. Elles empêchent les éléments de se réduire dans une zone trop petite et, dans le cas de textarea, de devenir trop grands.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

Ce CSS utilise des unités relatives pour le dimensionnement. La nouvelle unité lh est idéale pour les tailles de bloc, et ch fonctionne bien pour les tailles intégrées.

Quelle est la valeur par défaut de field-sizing ?

La valeur par défaut de field-sizing est fixed, et il n'accepte que les deux valeurs fixed ou content.