Una novedad de CSS que no os podéis perder y que hoy he estado comentando y os la voy a explicar porque me parece tremendo, que está muy muy muy bien y es que durante mucho tiempo, si sabes CSS, si eres backend, ahora voy a hablar un poco más lento para que me entiendas, es broma, es broma backend, tú puedes, es muy fácil, ya verás, mira, el tema es, fíjate que tengo aquí este hover, ¿no?
Y puedes ver que cuando hago el hover, aquí tengo una altura, hago hover y aquí tengo otra altura y ese es porque en el article tengo 150 píxeles, es un tamaño fijo y cuando hago el hover le digo que me tome la altura en auto, o sea que automáticamente, pues diga, vale, pues utiliza la altura que te corresponde automáticamente.
Ahora, esto funciona, pero me gustaría hacer una animación entre esto, o sea, cuando está así y esto, ¿no?
¿Qué pasa? Que si tú añades un transition y dices, oye, quiero que la altura tarde medio segundo y que haga la transición, pues no funciona.
Y es ¿por qué? Porque es incapaz, y esto es un problema que ha tenido CSS de toda la vida, es incapaz de interpolar los valores entre un valor numérico, 150 píxeles, a otro que no es numérico, que es auto.
Claro, ¿cómo sabe que tiene que pasar 151, 151, etc, etc, etc? Así.
Esto hay unos cuantos hacks que te permiten arreglarlo, más o menos, porque dependiendo, por ejemplo, está el hack de utilizar display grid y pasar de 0fr a 1fr, porque ahí sí que es capaz de interpolar, ¿no?
0 a 1, pues dice, ah, vale, 0 a 1, pues ya está, ¿no?
Claro, si le pongo el 250, aquí sí que funcionaría, claro, si hago así, ¿ves? Sí que funciona.
Pero ¿cuál es el problema? El problema es que 250 no es suficiente.
Entonces, ¿cuál debería ser suficiente? 500, claro.
Pero 500 es demasiado. Por lo tanto, lo que deberíamos hacer es auto, pero auto no funciona.
Ahora, lo que acaban de sacar, si me sigues en Instagram ya te habrás enterado, es que hay una nueva propiedad que se llama interpolate, interpolate size.
Y le podemos decir allow keywords. ¿Por qué allow keywords?
Porque estamos diciendo que los keywords son palabras clave y lo que estamos diciendo es que nos va a interpolar el tamaño
y vamos a permitir que se puedan utilizar palabras clave, en este caso, auto.
Y solo con este cambio ya lo tenemos.
Y fíjate qué bonita queda la animación.
Esto es una cosa que hasta hoy no se podía hacer así de fácil en CSS.
Habría que hacer o hacks o un poquito de JavaScript o un montón de cosas.
Había un montón de soluciones.
Pero ahora, así de fácil, lo podéis hacer.
Ahora bien, antes de que nos pongamos a celebrar y nos empecemos a tocar todos, hay una mala noticia y una buena noticia.
La buena noticia es que interpolate size es una realidad.
Ya lo tenéis funcionando, ¿vale?
Y mira, ya tenéis soporte en Chrome.
Lo malo es que es un 0,02.
O sea, no soporta nadie.
¿Por qué?
Porque solo lo soporta Chrome.
Es que acaba de sacarlo Chrome.
Acaba de lanzarse.
Acaba de lanzarse.
Hay mucha gente que dirá, oh, un 0,02, no sé qué, no sé cuánto.
Bueno.
Lo bueno de utilizar este tipo de cosas, no soporta en el tato.
Ahí está, ¿eh?
Lo bueno de poder utilizarlo es que a las malas, lo que acaba de salir, ¿eh?
Ya veréis como la semana que viene, si queréis, lo miramos.
Y yo digo que la semana que viene, solo la semana que viene, ya va a tener un 20%.
¿Por qué?
Porque un montón de usuarios habrán actualizado a Chrome.
Chrome es el navegador más utilizado.
En menos de un mes tendrá un 60%.
Ya lo veréis.
Porque es lo que utiliza Chrome y casi todo el mundo actualiza Chrome bastante rápido.
Entonces, lo que bueno que tiene esto es que en el caso de que esto no lo soporte el
navegador, pues no pasa nada porque no verá la animación.
Ya está.
Pues no ve la animación y es lo que hay y punto.
No hay nada más.
Entonces, es de estas mejoras progresivas que podéis añadir sin ningún tipo de problema.
En el que, oye, si lo soporta, pues qué bien, porque verá la animación.
Si no lo soporta, pues no verá la animación, no se romperá nada.
Y puedo seguir con mi vida tranquilamente.
Esto es lo que se le llaman mejoras progresivas.
Y no pasaría absolutamente nada.
O sea, que ve, pero no lo ve en realidad.
Bueno, a ver, el que tenga el soporte, pues sí que lo vería y ya está.
De hecho, es progresivo porque normalmente conforme los usuarios van a ir mejorando,
¿no?
Y irán viendo, irán actualizando su navegador, digo yo, ¿no?
Pues conforme vayan mejorando y actualizando su navegador, pues bueno,
veremos que sí que tiene el soporte.
Y ya está.
Y de forma automágica, pues verán la animación.
Eso a punto de float sale.
Es sarcasmo.
No, hombre, se pueden hacer un montón de formas con JavaScript.
Hay también el hack de utilizar el calc para hacer ciertas cosas.
¿Qué ejemplo hay en CSS de mejora no progresiva?
Hostia, de mejora no progresiva.
Hombre, hay unas cuantas.
Por ejemplo, no puedes utilizar como mejora progresiva el Display Grid.
Display Grid no es una mejora progresiva.
Si tú te pones a maquetar tu página como Display Grid, el problema es que estás rompiendo el layout para usuarios que no soportan Display Grid.
Es que lo van a ver mal.
No es una mejora progresiva, que está roto.
Una mejora progresiva diríamos que es algo que, aunque no lo soporte, todo funciona bien,
solo que no tiene la mejor experiencia porque es una animación, porque a lo mejor el color, no sé, sería algo así, ¿no?
Así que ese sería el tema.
He venido a aprender JavaScript, dice Héctor de León.
Pues mira, estamos hablando de CSS.
¿Quieres que te lo explique?
¿Quieres que te lo explique otra vez?
Las transiciones se enseñan mal.
Bueno, CSS en general se enseña mal.
Se enseñan rebulinchis.
Las cosas como son.
Si queréis temas de animaciones, que sepáis que acaban de lanzar la gente de Framer Motion,
han sacado una nueva biblioteca muy interesante,
una mini biblioteca que se llama UseAnimate,
que además la podéis utilizar no solo con React, sino con diferentes frameworks,
y que de interesante que tiene, pues que ocupa solo 1,5K.
Ah, no, 2,5K, perdón, lo ponen aquí.
2,5K, mucho menos que Framer Motion.
Y aunque es un poco más manual, lo que podéis hacer es utilizar el Animate
y ahí lo que vais diciéndoles, vale, todos los pasos que tengo que animar.
Incluso podéis hacer animaciones basadas también en el scroll.
Y se ve bastante interesante porque muchas veces Framer Motion el problema que tiene
es que ocupa demasiado y este en cambio, aunque es un poco como más manual,
podéis hacer cosas increíbles poniendo Framer-Motion barra mini
y podéis tener este UseAnimate, vale, que es un poquito más pequeño,
pero que está bastante tremendo.
Os lo recomiendo mucho, echéis un vistazo.
Yo todavía no lo he probado, pero sí que he estado mirando la documentación
porque se veía bastante bien.
Gracias.
Gracias.
Gracias.