field-sizing llega a Chrome, Safari y Firefox: los campos ya se ajustan solos

La propiedad CSS field-sizing ya está disponible en los tres motores principales. Chrome la estrenó en la 123, Safari la incorporó en la 26.2 y Firefox acaba de añadirla en la 152, según el repaso que ha publicado un desarrollador web. Con field-sizing: content, un textarea, un input o un select calculan su tamaño a partir de su propio contenido en lugar de quedarse fijos.

Hasta ahora eso se resolvía con JavaScript. El patrón habitual era escuchar el evento input, resetear la altura del campo a auto —si no, el campo crece al escribir pero no encoge al borrar texto—, leer scrollHeight y devolver esa medida como altura en línea. Un script que se ejecutaba en cada pulsación de tecla para recalcular la disposición.

Qué cambia

El valor por defecto de field-sizing es fixed; al ponerlo en content el navegador calcula el tamaño preferido desde el contenido. El campo crece según se escribe y encoge al borrar. Se puede acotar con min-height y max-height, y aquí entra una unidad útil: lh equivale a la altura de línea actual, así que min-height: 3lh y max-height: 10lh atan el crecimiento a un número de líneas. Superado el máximo, aparece la barra de desplazamiento.

La trampa está en resize, que en un textarea vale both por defecto. En cuanto el usuario arrastra la esquina, field-sizing deja de aplicarse y el campo vuelve a comportarse como uno fijo. La recomendación del autor es poner resize: none cuando se use esta propiedad.

No es solo para áreas de texto. Funciona en input, incluidos los de tipo number y search, y respeta el placeholder: si el campo está vacío se dimensiona para que quepa el texto de ejemplo completo. En select, el comportamiento por defecto es adoptar el ancho de la opción más larga; con field-sizing: content se ajusta a la opción seleccionada. Y si el select se muestra como lista (multiple, o un size mayor que uno), se dimensiona para mostrar todas las opciones.

textarea {
  field-sizing: content;
  min-height: 3lh;
  max-height: 10lh;
  resize: none;
}

Una dependencia menos

Que los tres motores hayan convergido cierra la vía que obligaba a mantener un pequeño script de medición por cada formulario con campos de entrada libres. Para quien tenga componentes propios, es una pieza que se puede borrar del código. Los ejemplos y la documentación están en MDN.