Dos cositas de CSS que te van a encantar.
Ya que eres programador y te gusta la tecnología, seguro que te encanta.
Una es este efecto que me ha vuelto loco, me ha maravillado.
Fijaos, es de Jay, Jay lo hace todo este tío.
Es que imaginad que queréis hacer un scroll, ¿vale?
Que cuando hagas el scroll, ves que cuando haces el scroll y llegas arriba, se pierde.
Pues imaginad que podáis hacer que el scroll sea redondeado y suba hacia el borde de radios.
Fijaos en esto, fijaos en esto.
¡Hola!
¿Qué? ¿Qué?
¿What?
¿Habéis visto eso? ¿Habéis visto eso?
¿Con solo CSS?
¿Con solo CSS?
¡Ostras!
La verdad, increíble.
Lo mejor es que tenéis el code pen para verlo.
Tenéis el code pen para verlo.
Lo tenéis aquí.
No sé si, ¿veis?
Lo podéis ver.
Y os lo podéis copiar.
También es verdad que luego está mirando y tiene aquí magia con JavaScript.
También os digo, ¿eh?
Claro, yo lo he flipado.
Dicho, hostia, qué increíble.
Y luego me he dado cuenta de, claro, es que hay trampas aquí.
¿Qué es lo que pasa?
La trampa la tenéis toda aquí.
Que tiene aquí una de líneas de JavaScript que lo que hace es detectar básicamente dónde se supone que está el scroll.
No, en una sola línea no he dicho en ningún momento.
¿Vale?
No he dicho que es en una sola línea.
No, byte no es.
Pero obviamente, pero me parece espectacular.
Porque al final, tened en cuenta que esto al final lo podéis sacar en una biblioteca.
Él lo podría hacer.
Igualmente el rendimiento es bastante bueno porque está hecho con SVG.
Y utiliza el Resize, no sé si es Resize Observer, pero utiliza un Observer.
¿Sabes?
O sea, que no está leyendo constantemente el scroll.
Por lo tanto, está, o sea, funciona muy bien, ¿eh?
La verdad es que está muy, muy, muy bien.
Y el, o sea, el resultado final queda maravilloso.
Desde luego, efecto wow hace, ¿eh?
A mí me ha sorprendido bastante.
Vamos con otra que esta sí que es CSS puro, ¿vale?
Así que no os asustéis.
Pero esta está muy chula y es el CSS Reset del 2024.
No sé si saben lo que es el CSS Reset, ¿vale?
Pero el CSS Reset es lo que se utilizaba.
Era un poquito de CSS que se utilizaba para resetear los estilos por defecto de los navegadores.
Y durante mucho tiempo se han utilizado CSS Reset para intentar arreglar los estilos de los navegadores, ¿vale?
Y eran así, eran así de horribles, eran así de horribles.
Luego salieron los Normalizers.
Primero era el CSS Reset.
Fijaos, esto del 2008.
Luego salió el Normalize CSS, que la idea era normalizar.
Y la verdad es que a día de hoy con los frameworks, con Tailwind y todo esto,
ya no nos preocupamos por estas cosas porque normalmente ya nos hacen estos reseteos
o estas normalizaciones totalmente transparentes, ¿no?
¿Y qué pasa?
Pues que a día de hoy ha cambiado la cosa.
Y ojo con este, polémico, pero interesante.
Y lo vamos a comentar porque está bastante chulo.
Mirad, tenemos aquí, esto sería para todos los elementos, Box Sizing Border Box.
En este estoy totalmente de acuerdo.
Y esto lo que hace es incluir tanto el padding como el borde
en el cálculo del tamaño de los elementos de bloque, ¿vale?
Por ejemplo, si tú pones width 100 píxeles, van a ser siempre 100 píxeles sin importar el padding o el borde
porque ya está en el cómputo del cálculo del tamaño, ¿vale?
Y esto, si no, es un rollazo.
Así que esto sería bueno CSS Reset del 2024.
Este, yo a mí este no me gusta, pero bueno, entiendo por qué lo hace.
Dice ponerle position relative a todos los elementos.
Claro, ¿por qué hace esto?
Pues para que la posición de los hijos siempre esté basada en el padre inmediato.
Porque cuando tú pones un position absoluta a un elemento, su posición es absoluta
pero relativa al primer elemento padre que tenga el position relative.
Y si no, del body.
Y en este caso con esto lo arreglaría.
Pero yo creo que esto es más que la gente no tiene ni puñetera idea de cómo funciona CSS.
Bastante polémico, ¿eh?
Luego tendríamos aquí min width.
Que esto sí que me parece interesante porque esto lo que hace es evitar algunos problemas
que tienes con grid y con flex, con sus contenedores, ¿vale?
Con los elementos dentro del contenedor.
Luego el body, que tenga una mínima altura de 100 del viewport dinámico, ¿vale?
DVH, para el que no sepa lo que es, que mucha gente se pone por aquí, DVH, ¿vale?
DVH no es decoración de vidrio hueco, que lo podría ser, sino que es otra cosa, ¿vale?
Es una altura nueva que han sacado, que es esta.
¿Por qué?
Porque en los móviles cuando aparece el teclado o aparece la barra de tareas,
pues va cambiando la posición esta de DVH.
Así, 100 de DVH siempre es el máximo disponible de la altura que tengas independientemente
de si sale el teclado o no sale el teclado.
Siempre lo está calculando automáticamente.
Ya no te tienes que preocupar.
Porque si no, teníamos problemas.
Dynamic viewport height.
Gracias.
Luego tendríamos aquí de, en los títulos, H1, H2, H3 y H4, text grab balance.
Esto sí que está bastante chulo.
Lo tenéis que utilizar, que lo utilizáis muy poco.
Yo no sé todavía por qué lo utilizáis tan poco.
Esto es un título con text grab balance, ¿vale?
Esto sería así.
Imaginad que tenéis aquí H1.
Le ponemos un tamaño, 200 píxeles.
No, 400.
Vale, 500.
Esto.
¿Veis que normalmente pasa esto en los títulos?
Esto.
¿Qué pasa?
Que se te cae una palabrita.
Esto sería un título sin, sin el text grab balance, ¿no?
Que se te cae una palabra.
Pues con el text grab balance lo que haría es que automáticamente lo balancearía.
Y esto queda mucho mejor, ¿vale?
Queda mucho mejor que no dejar una palabra ahí suelta que normalmente queda bastante raro.
Pero una cosa que muy poca gente sabe es que también existe uno para los párrafos.
No es como justificar.
No tiene nada que ver.
No digáis que es como justificar porque no es justificar.
No es justificar.
Justificar es una cosa y una técnica totalmente diferente que no es lo que queremos.
Entonces, luego tendríamos el text grab pretty, ¿vale?
Que esto es más pensado para los párrafos.
Y que justamente también busca lo mismo, pero para las cajas de texto.
¿Qué significa esto?
Pues significa, imagínate que tenemos aquí...
Voy a poner aquí un párrafo.
Lorem, Ipsum, no sé qué, ¿vale?
¿Veis?
Ponemos aquí un Lorem, Ipsum, no sé cuánto.
Un P, Max Width, 300 píxels.
Imaginad que...
A ver si pillo uno...
Mira, ¿ves que les ha quedado ahí el hillo?
Pues también podéis utilizar text grab pretty.
Y este, ¿veis que ha hecho esto?
Pero este es diferente, ¿vale?
Este es diferente porque el pretty está pensado más para múltiples líneas.
Porque fijaos que lo que ha hecho es más ajustarlo todo, todo, para realmente poner una palabra más.
Y no es tan agresivo como el balance.
Es menos agresivo porque aprovecha que tiene muchas más líneas.
Así que si tenéis dudas de qué utilizar...
De hecho, a ver...
¿Veis que es mucho más agresivo el balance?
Que lo ha balanceado todo.
En cambio el pretty lo que intenta es no dejar la última línea, ¿vale?
Es totalmente diferente.
Para que lo tengáis en cuenta.
El pretty sería más para párrafos y el balance más para títulos.
Y la diferencia que hay entre el text wrap y el text align del justify...
Es que el justify lo que hace es poner espaciados entre las palabras, ¿vale?
Espaciados a veces muy molestos, para cuadrar el final de la línea.
No en la última línea, ¿vale?
Que no tiene absolutamente nada que ver.
Fijaos que la última línea queda igual de mal.
Y encima lo que realmente está pasando es que visualmente parece que sí, que está aquí alineado.
Pero el problema es que se lee mucho peor.
Porque fijaos aquí el huecazo que ha dejado ahí que casi cabe un cuerpo, ¿vale?
Así que justify esto está prohibido por las autoridades.
No lo hagáis.
Pues eso sería el CSS Reset del 2024.
Aquí cada uno que haga lo que le dé la gana, ¿eh?
Si os gusta, si no os gusta.
Esto no soporta Internet Explorer 11.
Internet Explorer 11 no soporta ni las ganas de vivir.
Eso es lo que no soporta Internet Explorer 11.
Ya no soporta...
No lo soporta ni tu ordenador.
Seguramente tu ordenador, si le dices voy a encender Internet Explorer 11, ni se enciende.
No se va a encender.
Va a decir que te den y no se va a encender.
Así que si ya lo han quitado...
De hecho, mira, esto es una noticia muy interesante, ¿vale?
Pero si ahora buscáis, por ejemplo, DVH, Dynamic Viewport High, fijaos que aquí...
¿Veis que han puesto esto?
Esto es porque ahora en Can I Use, que es una de las cosas que más se utilizan para ver el soporte de ciertas cosas,
ya no se actualiza el soporte de Internet Explorer 11.
O sea, ya no te van a decir si está soportado, ya no te lo van a decir.
Ya esto, dentro de poco, esto lo van a quitar.
Lo pone aquí.
Es decir, la data de soporte de Internet Explorer ya no se va a actualizar.
Y puede ser incorrecta.
O sea, que ojo, porque es que dentro de poco va a desaparecer, menos en tu empresa.
Va a desaparecer en todos los sitios.
Es que no sé, la gente que...
Alguna gente quiere utilizar Internet Explorer 11...
Y esto os lo voy a decir en serio, pero soportar Internet Explorer 11 es hasta negativo en el sentido de...
Puede ser peligroso para el usuario, porque de verdad, o sea, todavía tiene un montón de problemas de seguridad que no están siendo parcheadas.
O sea, que sí, sí, solo soportan las páginas de los gobiernos.
Bueno, pues dejémoselo a ellos, ¿vale?
Para que nosotros vivamos mejor.
Pero os lo digo en serio.
A mí una empresa que soporte Internet Explorer 11 es que es como poner en peligro a sus usuarios.
De verdad, yo prefiero que pongan...
Oye, por motivos de seguridad, no damos soporte a este navegador y te recomendamos que utilices Firefox, Chrome, Brave, DuckDuckGo, Safari o lo que sea.
Porque de verdad me parece hasta peligroso.
Me parece hasta peligroso que esa persona le pueden atacar y puede ser peor el remedio que la enfermedad.
Ahí lo dejo.
¡Bien!