- Con la evolución de las tecnologías web modernas, muchas tareas que antes debían implementarse con JavaScript ahora pueden resolverse fácilmente con HTML y CSS
- Nuevas tecnologías como el estilado centrado en componentes, el estilado de elementos padre y la definición de colores relativos ya pueden usarse ampliamente en varios navegadores
- Ofrecen a diseñadores y desarrolladores formas más simples y efectivas de crear componentes de UI
Consultas de contenedor y consultas de estilo en CSS
- Estilado centrado en componentes
Equilibrio de texto (text-wrap: balance)
- Mantiene el equilibrio tipográfico
- Calcula automáticamente la distribución uniforme del texto en títulos y títulos de tarjetas
- Referencia: Guía de Ahmad Shadeed
Ajuste automático del tamaño de campos de entrada de formularios
- Automatización del tamaño de entrada
- El tamaño de los campos de texto o menús de selección se ajusta automáticamente al contenido
- Puede implementarse con una simple línea de CSS
- Referencia: Explicación de Adam Argyle
Contenido oculto que se puede buscar (hidden=until-found)
- Mejora la accesibilidad de la UI
- El contenido oculto, como secciones de acordeón plegadas, puede encontrarse mediante la búsqueda en la página y en motores de búsqueda
- Referencia: Guía de Joey Arhar
Soporte para colores de alta resolución (OKLCH, OKLAB)
- Soporta 50% más colores
- Nueva especificación de color diseñada con base en la percepción humana del color
- Adecuada para sistemas de diseño y gradientes
- Referencia: Explicación de Vitaly Friedman
Colores relativos en CSS
- Cálculo de colores a partir de colores existentes
View Transitions API
- Transiciones de pantalla suaves
- Permite implementar transiciones fluidas con animaciones CSS al pasar de una pantalla existente a una nueva
- Soporta transiciones dentro de un solo documento o entre dos documentos
- Referencia: Guía de Bramus Van Damme
CSS Scroll Snap
- Ofrece una experiencia de desplazamiento precisa
- Permite configurar contenedores de desplazamiento para que el usuario encaje en elementos de contenido específicos
- Referencia: Guía de Ahmad Shadeed
Estilado del elemento padre (:has)
- Da estilo a elementos padre según el estado de sus hijos
- También permite ajustar estilos según el estado de otros elementos, más allá de la relación padre-hijo
- Referencia: Guía de Josh W. Comeau
Otras funciones destacadas
- Mejoras en el estilado del estado de entrada:
:user-valid, :user-invalid ofrecen retroalimentación después de que el usuario modifica su entrada
- Optimización del teclado móvil:
inputmode y enterkeyhint mejoran el teclado virtual
- Elemento HTML
<dialog>: implementación de modales y popovers accesibles
Conclusión
- Las nuevas y prácticas tecnologías de frontend tienen un impacto transformador en el diseño de UI y UX
- Funciones que llegarán en el futuro: diseño masonry, personalización de
<selectmenu>, alineación de cajas de texto y más
- Agradecemos a todos los desarrolladores que trabajan por el avance de la plataforma web, y esperamos que este artículo sea útil para mejorar proyectos y aplicaciones. ¡Que disfruten el trabajo!
4 comentarios
Como ya señalaron otras personas, el autor no toma en cuenta en absoluto la compatibilidad entre navegadores ni la consistencia del comportamiento. Además de eso, también hay casos en los que la implementación o el funcionamiento difieren entre navegadores, así que no se pueden elegir nuevas funciones a ciegas. Por más alta que sea la cuota de uso de Chrome, como existe iOS, al menos hay que considerar si funciona bien en Safari.
Estoy de acuerdo... creo que sería difícil usarlo sin más en un producto.
No implementado en Safari ni Firefox
hidden=until-found)No implementado en Firefox
En la práctica, es más fácil considerar que las nuevas funciones de frontend son básicamente funciones nuevas exclusivas de Chrome.
En casos extremos, puede tardar hasta 5 años, como con OffscreenCanvas. (Chrome 2018, Safari 2023)
Las container queries y
:hasson súper útiles.