Una línea de código para ajustar automáticamente el tamaño de los elementos con contenido editable.
Sin field-sizing, para crear un campo de entrada de tamaño adecuado, tenías que adivinar el tamaño promedio de una entrada de campo de texto o usar JavaScript para contar caracteres y aumentar la altura o el ancho del elemento a medida que el usuario ingresaba el texto. En otras palabras, no fue fácil y era propenso a errores cuando se intentaba seguir el contenido que un usuario había ingresado en una entrada.
Con field-sizing, necesitas una línea de CSS para habilitar el tamaño según el contenido. Este estilo de tamaño basado en el contenido también funciona para más que un área de texto.
textarea, select, input {
field-sizing: content;
}
Vínculos rápidos
¿Te gustan los videos de formato corto?
Wes Bos y Jhey tienen un excelente video en Twitter en el que se te presenta field-sizing.
¿Qué elementos se ven afectados por el tamaño del campo?
A continuación, se muestra una lista de los elementos <form> en los que funciona field-sizing, con un resumen de los efectos que tiene en cada uno.
<textarea>
La entrada se contrae a un min-inline-size o para ajustarse al marcador de posición.
A medida que los usuarios escriben, la entrada aumenta en la dirección intercalada hasta que alcanza un tamaño intercalado máximo, momento en el cual el texto se une y el tamaño del bloque de la entrada crece para ajustarse a la nueva línea.
<select> y <select multiple>
El elemento de selección se reduce para adaptarse a la opción seleccionada.
Una selección con el atributo multiple aumenta para adaptarse a la opción más amplia y ser tan alta como sea necesario para adaptarse a la cantidad de opciones.
<input type="text">, <input type="email"> y <input type="number">
La entrada se contrae a un min-inline-size o para ajustarse al marcador de posición.
A medida que los usuarios escriben, la entrada aumenta en la dirección intercalada hasta llegar a un max-inline-size, momento en el cual el desbordamiento recorta el valor de entrada.
<input type="file">
La entrada se contrae hacia el botón y el texto ya completado del nombre del archivo.
Cuando se sube un archivo, la entrada se vuelve tan ancha como el botón y el texto del nombre del archivo.
Ver, probar y comparar resultados
A continuación, se muestra un ejemplo interactivo y mínimo de los comportamientos de antes y después de cada elemento del formulario, según lo afectado por field-sizing.
Una mirada más de cerca
Cuando usas un objeto [placeholder], el marcador de posición se convierte en el contenido. Esto se mencionó anteriormente, pero se menciona aquí, ya que es importante saberlo a la hora de definir el estilo de un formulario. Un marcador de posición largo o corto cambiará el tamaño intrínseco de las entradas con field-sizing:
content.
Manejo de estilos vacío y desbordado
El uso de field-sizing implica que debes realizar un trabajo adicional. AhmadShadeed lo llama "CSS defensivo". El objetivo no es necesariamente explicar exactamente cómo debería comportarse o verse algo, en lugar de evitar que entre en un estado visual no deseado. Anteriormente, las entradas tenían una gran cantidad de tamaños fijos, pero después de aplicar field-sizing: content, las entradas pueden volverse demasiado pequeñas o demasiado grandes.
Los siguientes estilos son un buen punto de partida. Ayudan a que los elementos no se contraigan en un cuadro demasiado pequeño y, en el caso de textarea, a no crecer demasiado.
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;
}
Este CSS usa unidades relativas para el tamaño. La nueva unidad lh es perfecta para los tamaños de bloques y ch funciona bien con los tamaños intercalados.
¿Cuál es el valor predeterminado del tamaño del campo?
El valor predeterminado de field-sizing es fixed y solo acepta los dos valores de fixed o content.