Video Summary and Transcription
La charla de hoy cubre las características nativas en los navegadores, incluyendo las próximas y el Proyecto de Interoperabilidad. Las características nativas ofrecen velocidad, compatibilidad y una depuración mejorada. Algunos ejemplos destacados incluyen las unidades de vista dinámicas, el espacio entre flexbox/grid, las consultas de contenedor y la trayectoria de movimiento. El Proyecto de Interoperabilidad garantiza características consistentes de la plataforma web en diferentes navegadores. Las próximas características como el anidamiento nativo de CSS y las animaciones de entrada/salida están en el horizonte.
1. Funciones Nativas en Navegadores
Hoy hablaré sobre las funciones nativas en los navegadores y las próximas que vendrán. Las funciones nativas son más rápidas, están disponibles incluso cuando los frameworks cambian y facilitan la depuración. Algunas son mágicas y pueden mejorar el rendimiento y la estética de las aplicaciones. El Proyecto de Interoperabilidad garantiza características consistentes en la plataforma web en todos los navegadores. No reclamo propiedad, solo muestro ejemplos. Algunas funciones nativas destacadas incluyen unidades de vista dinámicas, espacio entre flexbox/grid, consultas de contenedor, subgrid, lienzo fuera de pantalla, trayectoria de movimiento, comportamiento de desplazamiento CSS, recorte/máscara CSS y selector HES.
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.
2. Próximas Funciones Nativas y Proyecto de Interoperabilidad
Las funciones nativas de anidación de CSS, los modelos nativos y las animaciones de entrada y salida son funciones próximas. Mejoran la creación de hojas de estilo y el diseño de la interfaz de usuario. Sigue el Proyecto de Interoperabilidad para conocer las últimas funciones implementadas en todos los navegadores. Confiables y listas para usar.
También, como parte de la Interoperabilidad 2023, en 2024, deberíamos tener un soporte completo en todos los navegadores para la anidación nativa de CSS, lo cual es realmente útil para crear hojas de estilo un poco más complicadas.
Como parte de la Interoperabilidad 2022, se nos han dado modelos nativos, que funcionan realmente bien. Todo esto es solo un elemento de diálogo nativo sin mucho JS o CSS. Simplemente funciona de forma nativa. Y creo que es realmente genial. Es muy útil para la parte de la interfaz de usuario.
También, en 2024, deberíamos tener un soporte completo para las animaciones de entrada y salida. Así que podremos hacer cosas locas como agregar una propiedad de visualización al final de nuestros keyframes de animación o transiciones. Y eso es todo. Quería mostrarte que ya tenemos algunas nuevas funciones excelentes implementadas y que están llegando a la plataforma. Quería mencionar que debes seguir el Proyecto de Interoperabilidad para obtener el conocimiento más reciente sobre las nuevas funciones geniales que se están implementando de manera segura en todos los navegadores. Puedes confiar en ellas y, ya sabes, usarlas. Muchas gracias.
Comments