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 taille appropriée, 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, ce n'était pas facile et cela pouvait entraîner des erreurs lorsqu'on essayait de suivre le contenu qu'un utilisateur avait saisi dans une entrée.

Avec field-sizing, vous n'avez besoin que d'une 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;
}

Browser Support

• 123
• 123
• x
• 26.2

Source

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 le dimensionnement 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>

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

À mesure que les utilisateurs saisissent du texte, l'entrée s'agrandit dans le sens inline jusqu'à atteindre une taille inline maximale. À ce moment-là, le texte passe à la ligne et la taille de bloc de l'entrée s'agrandit 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 élément select avec l'attribut multiple s'agrandit pour s'adapter à l'option la plus large et à la hauteur nécessaire pour afficher le nombre d'options.

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

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

À mesure que les utilisateurs saisissent du texte, l'entrée se développe dans le sens inline jusqu'à atteindre une valeur max-inline-size, à partir de laquelle le contenu en trop est coupé.

<input type="file">

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

Lorsqu'un fichier est importé, 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.

Essayer sur CodePen

En détail

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

Essayer sur CodePen

Gestion des styles vides et débordants

L'utilisation de field-sizing implique un travail supplémentaire. Ahmad Shadeed l'appelle "CSS défensif", où l'objectif n'est pas nécessairement de préciser exactement comment quelque chose doit se comporter ou apparaître, mais plutôt de le protéger contre un état visuel indésirable. Auparavant, les entrées avaient un certain nombre de tailles fixes, 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. Ils permettent aux éléments de ne pas se réduire à une boîte 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 et ch fonctionne bien pour les tailles en ligne.

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

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