El cuadro de comentarios que tiene cuatro filas de alto y una fila con texto: cada sitio con un área de texto ha enviado el JavaScript que mide la entrada y hace crecer el cuadro. CSS ha absorbido el trabajo.
textarea {
field-sizing: content;
min-height: 3lh;
max-height: 12lh;
}que cambia
- tamaño de campo: el contenido ajusta el tamaño del control a su contenido, incluido el texto, para que el cuadro nunca esté vergonzosamente vacío o apretado.
- La altura mínima y la altura máxima se convierten en los rieles: más allá del máximo, aparece una barra de desplazamiento como debería.
- La unidad izquierda mantiene los rieles honestos en líneas de texto, no en píxeles de los que se arrepentirá con un tamaño de fuente diferente.
- También se aplica a la entrada y selección, donde seleccionar con muchas opciones deja de exigir una altura fija.
La única advertencia que hay que decir claramente
- Los navegadores sin la propiedad mantienen el comportamiento clásico: altura fija y desplazamiento manual, que es el estado actual de cada sitio en la actualidad, por lo que nada retrocede.
- Combínelo con un recuento de caracteres visible para límites obligatorios; El crecimiento automático es comodidad visual, no validación.
- Pruebe con el contenido local más alto que admita; este sitio escribe en cuatro idiomas y la copia en francés es confiablemente más alta que la en inglés.
Un detalle de formulario que elimina su propio JavaScript, mantiene el comportamiento de enfoque y funciona con autocompletar: exactamente el tipo de trabajo de plataforma que hace que los sitios pequeños se sientan profesionalmente optimizados, muy bueno para una sola declaración.