Obtén información sobre algunas de las funciones que forman parte de Baseline.
Fecha de publicación: 10 de mayo de 2023
La Web evoluciona constantemente y los navegadores se actualizan de forma continua para brindarles a los desarrolladores nuevas herramientas que les permitan innovar en la plataforma. Los elementos que antes requerían bibliotecas de ayuda se convierten en parte de la plataforma web y son compatibles con todos los navegadores, junto con formas más cortas o fáciles de codificar elementos de diseño.
Si bien esta evolución y adaptación constantes son útiles, también pueden generar confusión. Puede ser difícil navegar por todas estas actualizaciones. Como desarrolladores, nos hacemos preguntas como "¿Cuándo admitirán esta nueva función todos los motores de navegadores?". "¿Cuándo puedo empezar a usar esas funciones en mi código de producción?" "¿Por cuánto tiempo debemos admitir navegadores más antiguos?"
La respuesta real es “depende”. Lo que se necesita y lo que se puede usar depende realmente de tu base de usuarios, la pila de tecnología, la estructura de tu equipo y los dispositivos compatibles. Sin embargo, todos coincidimos en que el panorama actual de la Web puede dificultar la toma de esas decisiones.
El equipo de Chrome está colaborando con otros motores de navegador y la comunidad web para brindar más claridad. Esto incluye nuestro trabajo en proyectos como Interop 2023, que ayuda a mejorar la interoperabilidad de un conjunto de funciones clave. Pero ¿qué sucede con las funciones que se lanzaron en los últimos años? ¿Las funciones experimentales de las que hablamos hace dos años están listas para usarse?
En esta publicación, quiero destacar algunas funciones que ahora están disponibles para todos los motores de navegadores principales de las últimas dos versiones principales. Este es el punto de corte en el que creemos que la mayoría de los desarrolladores considerará que una función es segura para usar y es el conjunto de funciones que llamamos modelo de referencia. Para obtener más información, consulta el anuncio de Baseline aquí.
El elemento de diálogo
El elemento <dialog> es un nuevo elemento HTML para crear indicaciones de diálogo, como ventanas emergentes y modales.
Para usarlo, define el elemento modal y, luego, abre el diálogo llamando al método showModal() en el elemento de diálogo.
<dialog id="d">
<form method="dialog">
<p>Hi, I'm a dialog.</p>
<button>ok</button>
</form>
</dialog>
<button onclick="d.showModal()">
Open Dialog
</button>
Como elemento HTML integrado, incluye funciones como la administración de enfoque, el seguimiento de pestañas y el mantenimiento del contexto de apilamiento. Para obtener más información, lee Cómo compilar un componente de diálogo.
Propiedades de transformación de CSS individuales
El uso de transformaciones CSS es una forma eficiente de agregar movimiento a tu sitio. Es posible que estés familiarizado con la escritura de transformaciones de CSS con tres propiedades en una línea. Con las propiedades de transformación individuales, ahora puedes especificarlas de forma individual. Esto resulta útil cuando escribes animaciones de fotogramas clave complejas.
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
Para obtener una explicación detallada de este cambio, consulta Control más detallado sobre las transformaciones de CSS con propiedades de transformación individuales.
Nuevas unidades de viewport
En los dispositivos móviles, el tamaño del viewport está influenciado por la presencia o ausencia de barras de herramientas dinámicas.
A veces, puedes ver una barra de direcciones y una barra de herramientas de navegación, pero, en otras ocasiones, esas barras de herramientas están completamente ocultas.
El tamaño real del viewport será diferente según si las barras de herramientas son visibles o no.
Las nuevas unidades de viewport, como svh y lvh, les brindan a los desarrolladores web un control más preciso cuando diseñan para dispositivos móviles. Puedes obtener más información en el artículo Unidades de viewport grandes, pequeñas y dinámicas.
Copia profunda en JavaScript
En el pasado, para crear una copia profunda de un objeto sin referencia al objeto original, un hack popular era JSON.stringify combinado con JSON.parse. Este era un hack tan común que V8 (el motor de JavaScript de Chrome) mejoró de forma agresiva el rendimiento de este truco. Sin embargo, ya no necesitas este hack con structuredClone.
const original = {id: 0, prop: {name: "Tom"}}
/* Old hack */
const deepCopy = JSON.parse(JSON.stringify(original));
/* New way */
const deepCopy = structuredClone(original);
Consulta Copia profunda en JavaScript con structuredClone para obtener más detalles.
La seudoclase :focus-visible
Como desarrolladores web, todos conocemos el "anillo de enfoque" que aparece cuando navegas por una página con un teclado o haces clic en elementos de entrada. Es una función necesaria para la accesibilidad, pero a veces interfiere en el diseño visual para diferentes usuarios. La pseudoclase CSS :focus-visible verifica si el navegador considera que el enfoque debe ser visible. Ahora puedes especificar estilos solo para cuando el enfoque debe ser visible.
/* focus with tab key */
:focus-visible {
outline: 5px solid pink;
}
/* mouse click */
:focus:not(:focus-visible) {
outline: none;
}
Consulta la sección Enfoque en Learn CSS para obtener más información.
La interfaz de TransformStream
La interfaz TransformStream de la API de Streams permite canalizar flujos entre sí.
Por ejemplo, puedes transmitir datos desde un lugar y, luego, comprimir el flujo de datos a otra ubicación a medida que se pasan los datos. En el artículo Cómo transmitir solicitudes con la API de recuperación, se explica este caso de uso de ejemplo.
Conclusión
Recientemente, se agregaron muchas más funciones que son interoperables y estables para usar en la plataforma web. En el futuro, trabajaremos con el grupo de la comunidad de WebDX para brindar más claridad sobre estos conjuntos de funciones del modelo de referencia. Consulta la página de referencia para conocer los desarrollos nuevos.
Si quieres mantenerte al tanto de las novedades, nuestro equipo publica artículos cuando una función se vuelve interoperable y actualizaciones mensuales sobre lo que sucede en la plataforma web, desde funciones experimentales hasta funciones interoperables nuevas.
Nos interesa saber si lo que hacemos te ayuda o si necesitas otro tipo de asistencia. Comunícate con nosotros en el grupo de la comunidad de WebDX.