Hoy hablaré sobre las funciones nativas que ya tenemos en los navegadores y algunas nuevas funciones nativas que vendrán a nuestros navegadores en los próximos meses y años. ¿Por qué hablaría especialmente de las funciones nativas? En primer lugar, generalmente son más rápidas que las implementaciones aprendidas por los usuarios, pero estarán disponibles incluso cuando tu framework o biblioteca favorita cambie o desaparezca porque podría suceder. Conocer las funciones nativas facilita la depuración porque al final es el lenguaje que los navegadores eligen, esa es la implementación real en el navegador, por lo que es bueno entender cómo funciona. Y algunas de las funciones nativas son realmente mágicas y quieres usarlas en una aplicación para hacerla más eficiente o más hermosa.
Antes de mostrarles algunas de esas funciones, debo mencionar el Proyecto de Interoperabilidad. El Proyecto de Interoperabilidad es un proyecto muy importante que comenzó con este nombre en 2021 y aún está en curso y es una cooperación de todos los principales navegadores para proporcionarnos a los desarrolladores web y proporcionar a nuestros clientes características de la plataforma web que funcionen de manera consistente en la misma forma en todos los navegadores. Y solo un pequeño descargo de responsabilidad, algunos ejemplos en esta presentación no son míos y no reclamo propiedad, solo quería mostrarles los mejores ejemplos de esas funciones nativas y cómo funcionan.
En primer lugar, la primera función nativa que fue parte de la Interoperabilidad 2022, por lo que en 2022 todos los navegadores decidieron que necesitaban implementar esta función de manera consistente en todos ellos, son las unidades de vista dinámicas, resolvieron un problema que podrías haber tenido antes con una vista pequeña y una vista grande que existen en los móviles. Entonces, si estabas usando la unidad de altura de la vista en tu CSS, era un problema porque en el móvil, en el escritorio este problema no existe, pero en el móvil hay una vista pequeña y una vista grande y una unidad de vista simplemente no era suficiente para adaptarse a eso. Y actualmente, tenemos esta altura de vista pequeña y altura de vista grande y también tenemos una altura de vista dinámica, por lo que esa es en realidad la mejor unidad para usar en la mayoría de los casos y funciona como esperarías. Entonces, si usas 100 alturas de vista dinámicas, tu ventana, tu elemento DOM siempre ocupará el 100% de la altura de la vista disponible, incluso en el móvil.
Otra función nueva interesante que se implementó en todos los navegadores como parte de la Interoperabilidad 2021 es un espacio para flexbox y grid. Entonces, finalmente no más problemas de margen, no más problemas de relleno, solo dices cuál es el espacio entre tus elementos en flex, en grid y obtienes el espacio que esperas. Tenemos consultas de contenedor como parte de la Interoperabilidad 2023 y esta es una función encantadora cuando puedes cambiar el estilo de tu elemento según el tamaño del contenedor, no solo el contenedor completo y creo que esta demostración encantadora muestra lo útiles que pueden ser las consultas de contenedor. Como parte de la misma Interoperabilidad 2023, hemos obtenido subgrid. Entonces, con una sola declaración de grid como ves aquí, lo siento, oh, este es el que quería mostrarte. Entonces, con una sola declaración de nuestro grid principal, podemos ir a los hijos de este grid y usar subgrid como ves aquí. Y luego todos esos hijos e incluso los hijos de esos hijos se colocan en el grid del padre, lo cual es súper útil para crear diseños complicados en tu sitio. Tenemos lienzo fuera de pantalla para que puedas hacer 3D de alto rendimiento como puedes ver aquí, 3D animations en un hilo diferente que tu hilo principal. Por lo que esto puede ser tan complicado como quieras y no bloqueará tu UI principal. Tenemos trayectoria de movimiento como parte de la Interoperabilidad 2023 que nos permite crear fácilmente esas encantadoras animations donde tu elemento se anima exactamente en la trayectoria dada. Como puedes ver aquí, en este encantador animation de planetas. Tenemos comportamiento de desplazamiento CSS para desplazamiento suave. Entonces, con una sola declaración, comportamiento de desplazamiento suave, y usando anclas de enlace, puedo desplazarme suavemente entre diferentes partes de mi página. Luego, como parte de la Interoperabilidad 2023, se nos han dado buenas implementaciones de recorte y máscara CSS. Entonces, podemos hacer cosas locas como esta con texto, un GIF puede ser un fondo para el texto, o puedes recortar tus elementos DOM en muchas y diferentes formas salvajes. Y también puedes animar esas formas de recorte. Se nos ha dado el selector HES. Entonces, el selector de padre que es súper útil, por ejemplo, para crear estados de formulario complicados y mostrar estados de formulario complicados.
Comments