Funciones de Baseline que puedes usar en la actualidad

Obtén información sobre algunas de las funciones que forman parte de Baseline.

Mariko Kosaka

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 preguntamos, por ejemplo, cuándo todos los motores de navegadores admitirán esta nueva función. "¿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 verdadera 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 que conocimos 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.

Navegadores compatibles

• 37
• 79
• 98
• 15.4

Origen

Para usarlo, define el elemento modal y, luego, llama al método showModal() en el elemento de diálogo para abrirlo.

<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 nativo, las funciones como la administración de enfoque, el seguimiento de pestañas y el mantenimiento del contexto de apilamiento están integradas. 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 escribir 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;
}

Navegadores compatibles

• 104
• 104
• 72
• 14.1

Origen

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 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 URL 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.

Navegadores compatibles

• 108
• 108
• 101
• 15.4

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);

Navegadores compatibles

• 98
• 98
• 94
• 15.4

Origen

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;
}

Navegadores compatibles

• 86
• 86
• 85
• 15.4

Origen

Consulta la sección Enfoque en Learn CSS para obtener más información.

La interfaz 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.

Navegadores compatibles

• 67
• 79
• 102
• 14.1

Origen

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 a estos conjuntos de funciones de Baseline. Consulta web.dev/baseline para obtener detalles continuos.

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.