Une ligne de code pour le dimensionnement automatique des éléments dont le contenu est modifiable.
Sans field-sizing, pour créer un champ de saisie de taille appropriée, vous deviez deviner la taille moyenne d'une entrée de champ de texte ou utiliser JavaScript pour compter les caractères et augmenter la hauteur ou la largeur de l'élément en fonction du texte saisi par l'utilisateur. En d'autres termes, la tâche n'était pas simple et était sujette aux erreurs lors de la tentative de suivi du contenu saisi par un utilisateur dans une entrée.
Avec field-sizing, vous avez besoin d'une ligne de CSS pour activer le dimensionnement en fonction du contenu. Ce style de dimensionnement basé sur le contenu fonctionne également pour d'autres zones de texte.
textarea, select, input {
field-sizing: content;
}
Liens rapides
Vous aimez les vidéos courtes ?
Wes Bos et Jhey ont tous deux une excellente vidéo de présentation de field-sizing sur Twitter.
Quels éléments sont concernés par le dimensionnement du champ ?
Voici une liste des éléments <form> sur lesquels field-sizing fonctionne, avec un résumé des effets sur chacun d'eux.
<textarea>
L'entrée est réduite à une min-inline-size ou pour tenir dans l'espace réservé.
À mesure que l'utilisateur tape du texte, l'entrée augmente dans la direction intégrée jusqu'à atteindre une taille maximale. Le texte s'encapsule alors et la taille du bloc de l'entrée augmente pour s'adapter à la nouvelle ligne.
<select> et <select multiple>
L'élément sélectionné est réduit pour s'adapter à l'option sélectionnée.
Une sélection avec l'attribut multiple s'agrandit pour s'adapter à l'option la plus large et pour s'adapter au nombre d'options.
<input type="text">, <input type="email"> et <input type="number">
L'entrée est réduite à une min-inline-size ou pour tenir dans l'espace réservé.
À mesure que l'utilisateur tape du texte, l'entrée augmente dans la direction intégrée jusqu'à ce qu'elle atteigne un max-inline-size, auquel cas le dépassement rogne la valeur d'entrée.
<input type="file">
L'entrée est réduite 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 du fichier.
Voir, tester et comparer les résultats
Voici un exemple interactif et minimal des comportements avant et après de chaque élément du formulaire, tels qu'ils sont affectés par field-sizing.
En regardant 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 nous l'avons évoqué 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épassements
L'utilisation de field-sizing signifie que vous devez effectuer un travail supplémentaire. Ahmad Shadeed l'appelle CSS défensif. L'objectif n'est pas nécessairement d'expliquer précisément le comportement ou l'apparence d'un élément, mais de l'empêcher de devenir dans un état visuel indésirable. Auparavant, les entrées avaient une bonne partie de la taille fixe, mais après avoir appliqué field-sizing: content, les entrées peuvent devenir beaucoup trop petites ou beaucoup trop volumineuses.
Les styles suivants constituent un bon point de départ. Ils permettent aux éléments de ne pas se réduire dans une zone trop petite et, dans le cas de textarea, de ne pas 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 la taille. La nouvelle unité lh est idéale pour les tailles de bloc, tandis que ch fonctionne bien pour les tailles intégrées.
Quelle est la valeur par défaut du dimensionnement de champ ?
La valeur par défaut de field-sizing est fixed et n'accepte que les deux valeurs de fixed ou content.