Dimensionnement des champs CSS

Une 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 la bonne taille, vous deviez deviner la taille moyenne d'une saisie de 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 et sujet à des erreurs de suivre le contenu qu'un utilisateur avait saisi dans une entrée.

Avec field-sizing, vous avez besoin d'une ligne de code CSS pour activer le dimensionnement en fonction du contenu. Ce style de dimensionnement basé sur le contenu fonctionne également pour d'autres éléments que les zones de texte.

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

Liens rapides

Spécifications | Explication

Aimez-vous les vidéos courtes ?

Wes Bos et Jhey ont chacun une excellente vidéo sur Twitter qui vous présente field-sizing.

Quels éléments sont concernés par la mise à l'échelle des champs ?

Voici la liste des éléments <form> sur lesquels field-sizing fonctionne, avec un résumé des effets qu'il a sur chacun d'eux.

<textarea>

La saisie se réduit à un min-inline-size ou s'adapte à l'espace réservé.

À mesure que les utilisateurs saisissent du texte, la zone de saisie s'agrandit dans le sens de l'alignement en ligne jusqu'à atteindre une taille maximale en ligne. À ce stade, le texte se scinde et la taille du bloc de la zone de saisie augmente pour s'adapter à la nouvelle ligne.

<select> et <select multiple>

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

Un sélecteur avec l'attribut multiple se développe pour s'adapter à l'option la plus large et être aussi haut que nécessaire pour s'adapter au nombre d'options.

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

La saisie se réduit à un min-inline-size ou s'adapte à l'espace réservé.

À mesure que les utilisateurs saisissent du texte, la zone de saisie s'agrandit dans le sens de l'alignement jusqu'à atteindre un max-inline-size, auquel cas le débordement coupe la valeur de saisie.

<input type="file">

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

Lorsque vous importez un fichier, la zone de saisie devient aussi large que le bouton et le texte du nom du fichier.

Afficher, tester et comparer les résultats

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

De plus près

Lorsque vous utilisez un [placeholder], l'espace réservé devient le contenu. Ce point a été mentionné précédemment, mais il est important de le savoir lorsque vous définissez le style d'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 signifie que vous devez effectuer un travail supplémentaire. Ahmad Shaded l'appelle "CSS défensif", où l'objectif n'est pas nécessairement de spécifier exactement comment un élément doit se comporter ou se présenter, mais plutôt de le protéger contre un état visuel indésirable. Auparavant, les entrées avaient une quantité assez importante de tailles fixes, mais après l'application de field-sizing: content, les entrées peuvent devenir beaucoup trop petites ou beaucoup trop grandes.

Les styles suivants constituent un bon point de départ. Ils empêchent les éléments de se réduire dans un cadre trop petit et, dans le cas de textarea, de ne pas trop grossir.

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 parfaite pour les tailles de bloc et ch fonctionne bien pour les tailles intégrées.

Quelle est la valeur par défaut de la mise à l'échelle des champs ?

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