Os voy a explicar unas cuantas cosas aquí y vais a alucinar, ¿vale?
Primero, normalmente sabéis que cuando tenéis un textarea, como este de aquí, ¿ves?
Esto, bueno, no lo veis, pero os lo enseño ahora.
Esto es un textarea, ¿no?
Y aquí tú puedes poner un comentario, escribir, hola, no sé qué, no sé cuánto.
Y veis lo que pasa, que conforme vosotros vais escribiendo, ¿vale?
Véis que el alto del textarea sigue igual.
Sigue igual y no cambia.
Para eso, podemos quitar este resize, por ejemplo.
Y entonces al usuario le dabas esta cosita de aquí horrible, esta cosita de aquí horrible.
Horrible porque no me gusta mucho como se ve, ¿eh?
No porque sea horrible la funcionalidad.
Y podías hacer que funcionase así, ¿no?
Y que cambiase y tal.
Entonces, claro, al menos cuando va escribiendo, por lo que sea, pues al menos puede hacer algo así.
Esto, muchas veces, se podía llegar a arreglar, se podía llegar a arreglar con JavaScript
o con algunos truquitos de CSS un poco polémicos.
De detectar cuántas líneas había creado el usuario y entonces, pues, cambiaba la altura.
Pero lo que estaría chulo es decir, bueno, voy a evitar, yo no quiero que esto se cambie.
Por ejemplo, resize.
Que, por cierto, el resize por defecto es both, pero le podéis poner aquí que solo sea vertical, por ejemplo.
Y entonces ya no le puede cambiar de derecha a izquierda y solo de arriba a abajo.
Que esto está muy chulo, que muy poca gente hace y buena idea.
Evitar que si hacéis un resize que lo haga por cualquier sitio.
Porque si le ponéis el both, que es el por defecto, al final lo que conseguís es que se rompa la UI y no tiene mucho sentido.
Así que si lo único que queréis es que lo haga más grande, vertical, acordaos de hacer esto, que queda mucho mejor, ¿vale?
También, además, podéis evitar, pues le podéis decir, oye, que como mínimo tenga 36 píxeles,
porque es justamente lo que he hecho, y que como máximo, ¿vale?
Tenga 100.
Y esto también va a hacer que tenga un límite, ¿ves?
Ya no lo puedes hacer más grande.
Esto estaba muy bien.
Esto estaba todo muy bien, muy bien, muy bien.
Pero, pero, el problema sigue siendo el mismo.
El problema, a ver si...
Vale, el problema es que si sigues escribiendo, ¿vale?
No cambia la altura.
Y para cambiar esto, tenías que utilizar JavaScript, lo que sea, y es un rollo.
Hasta ahora.
Y es que, amigos, llega por fin a CSS otra de las cosas más pedidas del mundo, del mundo del desarrollo web,
para poder hacerlo sin JavaScript.
Porque normalmente aquí lo que tienes que hacer es utilizar JavaScript, ir detectando y cambiar la altura.
Porque ahora tenemos una nueva propiedad de CSS que se llama Form Size Content.
Y fíjate la maravilla que es.
Form Sizing Content.
Lo que le estamos diciendo es que este Control Input, porque el TextArea es un Control Input multilínea,
el tamaño se va a adecuar al contenido, ¿vale?
Así que ahora le dices, hola, este es un mensaje muy largo que va a hacer que salte de línea automáticamente,
sin necesidad de JavaScript.
O sea, ahora lo que está haciendo es que conforme va cambiando el tamaño,
vas viendo que la caja del TextArea se va modificando automáticamente.
Y obviamente esto también puedes hacer que tenga un máximo.
O sea, si aquí le ponemos que el máximo son 100 píxeles,
tú aquí, por más que, ¿ves?
Por más que hagas que el texto sea más grande,
pues vas a conseguir que no se siga haciendo más grande y aparezca el scroll.
O sea, maravilloso.
Porque tenemos todo lo bueno del mínimo, el máximo,
todo lo bueno de lo dinámico y que no rompa nuestro diseño,
sin necesidad de tener que hacer el típico resize este que muchas veces hemos tenido que hacer, ¿no?
Así que el Form Sizing es una cosa nueva que va a llegar.
Ahora bien, no ha llegado.
¿Dónde funciona esto?
Esto a día de hoy solo funciona en Chrome Canary.
¿Por qué?
Porque es que acaba de llegar.
Está llegando exactamente ahora.
Así que si buscáis el Form Sizing en Canary Use,
vais a ver que esto no lo puede utilizar ni el tato, ¿vale?
No lo puede utilizar ni el tato.
De hecho, esto no es.
Esto no es.
Es que no aparece.
No aparece ni siquiera, ¿vale?
Lo bueno que va a llegar.
Lo malo que no ha llegado, ¿ok?
¿Cuándo va a llegar?
A ver, esto es una cosa que está llegando ya a la especificación
y por lo tanto, yo creo que antes de que termine este año,
lo vamos a tener aproximadamente en el 60% de los navegadores,
que es bastante.
O sea, un 60% de navegadores es bastante.
¿Por qué?
Porque va a llegar a la siguiente versión de Chrome,
seguramente a la que llegue en noviembre.
Si llega en noviembre, pues en Brave, Edge y todos los demás,
va a llegar a lo largo de diciembre.
Y eso es más o menos el 60%.
Está confirmado que va a llegar a Safari y a Firefox también,
así que un poquito de paciencia.
Pero yo creo que esto, sí, va a llegar como regalo de Navidad.
Entonces, es una cosa nueva que ya podéis probar en Canary
y que sepáis que llegará muy pronto,
pero a día de hoy todavía no lo podéis utilizar en vuestras páginas.
Una cosa que sí que se puede hacer,
que creo que todavía mejor será un poco pronto,
pero es buscar que haya un Form Sizing, un Polyfill.
Yo creo que todavía no lo hay, ¿eh?
Yo creo que todavía no lo hay.
Habría que probar todavía si se puede,
pero yo creo que todavía no hay un Polyfill.
No sé si por aquí, a ver, alguien dice...
Polifill, no sé qué...
No, es que todavía no han hecho el Polyfill.
Todavía es demasiado pronto.
Pero bueno, que sepáis que va a llegar.
De hecho, aquí está funcionando perfectamente
y que tiene muy buena pinta, ¿eh?
CSS no para, ¿eh?
¿Cómo te has enterado eso de CSS?
Pues viendo una PR por ahí.
He visto la PR y he dicho,
ostras, que esto lo van a añadir.
Lupaco dice, con esto CSS acabará con JavaScript
y nos quitará el trabajo.
Abro hilo.
Nada, nos va a quitar el trabajo, hombre.
CSS...
Pero al final es súper importante aprender CSS.
Es que si quieres ser desarrollador web,
hay dos cosas que hay que aprender.
Una es HTML,
que pongo curso de HTML desde cero, este miércoles.
Y que hay mucha gente que quiere aprender desarrollo web
y, por ejemplo, pues dice,
pues voy a aprender Python, que está bien.
O voy a aprender JavaScript.
Pero claro, luego las páginas que generan
no tienen mucho sentido, ¿no?
Y es todo deep, es todo deep.
O meten botones dentro de anchors
y no entienden cómo...
O sea, no saben HTML realmente.
Entonces, saber HTML es la base
de cualquier desarrollo web,
independientemente del lenguaje de programación
que utilices después.
Porque es lo que vas a construir
la interfaz del usuario.
Da igual el lenguaje, Java, PHP, no importa.
El HTML es con lo que se construye la web.
Así que es súper importante.
Y la semana siguiente vamos a hacer
un curso de CSS desde cero.
Así que si también queréis saber CSS,
que lo sepáis, lo vamos a tener por ahí.
¿Vale?
¿Vale?
¿Vale?