Funciones de Baseline que puedes usar en la actualidad

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

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 deberíamos admitir navegadores anteriores?"

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 con la comunidad web para aportar 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 los atributos 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 límite en el que creemos que la mayoría de los desarrolladores sentirán que una función es segura de usar, y es el conjunto de funciones al que llamamos Baseline. 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, 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, se incorporan funciones como la administración del enfoque, el seguimiento de pestañas y el mantenimiento del contexto de apilado. Para obtener más información, consulta 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 especificar propiedades de transformación de manera 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 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.

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 estar 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 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 Solicitudes de transmisión 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 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.

Siempre estamos dispuestos a saber si lo que estamos haciendo te ayuda o si necesitas diferentes tipos de asistencia, así que comunícate con nosotros en WebDX Community Group.