Funciones de Baseline que puedes usar en la actualidad

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

Mariko Kosaka

La Web evoluciona constantemente y los navegadores se actualizan constantemente para ofrecerles a los desarrolladores nuevas herramientas para innovar en la plataforma. Los elementos que anteriormente requerían bibliotecas auxiliares forman 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, tenemos preguntas como: "¿Cuándo admitirán todos los motores del navegador esta nueva función?" "¿Cuándo puedo comenzar a usar esas funciones en mi código de producción?" "¿Por cuánto tiempo deberíamos admitir navegadores anteriores?"

La respuesta correcta es "depende". Lo que se necesita y lo que se puede usar realmente depende de tu base de usuarios, la pila tecnológica, la estructura de tu equipo y los dispositivos compatibles. Pero, en algo que todos estamos de acuerdo, es 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 aprendimos hace dos años están listas para usar?

En esta publicación, quiero destacar algunas funciones que ahora están disponibles para los motores de navegación principales en las últimas dos versiones. 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, consulte el anuncio de Baseline aquí.

El elemento de diálogo

El elemento <dialog> es un nuevo elemento HTML para crear instrucciones de diálogo, como ventanas emergentes y modales.

Navegadores compatibles

• (37)
• (79)
• (98)
• 15,4

Origen

Para usarlo, define el elemento modal y, luego, abre el diálogo llamando al método showModal() en ese elemento.

<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 individuales de transformación de CSS

Usar transformaciones CSS es una forma eficaz de agregar un 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 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;
}

Navegadores compatibles

• 104
• 104
• (72)
• 14.1

Origen

Para obtener una explicación detallada de este cambio, lee Control 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 se ve afectado por la presencia o ausencia de barras de herramientas dinámicas.
A veces, puedes ver una barra de URL y una de navegación, pero, en otras ocasiones, se retraen por completo.
El tamaño real del viewport variará en función de si las barras de herramientas son visibles o no.
Las nuevas unidades de viewport, como svh y lvh, brindan a los desarrolladores web un control más detallado cuando diseñan para dispositivos móviles. Para obtener más información, consulta el artículo Unidades de viewport grandes, pequeñas y dinámicas.

Navegadores compatibles

• 108
• 108
• Introducción
• 15,4

Texto profundo en JavaScript

En el pasado, para crear una copia profunda de un objeto sin referencia al objeto original, un truco popular era JSON.stringify combinado con JSON.parse. Este fue un truco tan común que V8 (el motor JavaScript de Chrome) mejoró significativamente el rendimiento de este truco. Sin embargo, ya no necesitas este truco 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

Para obtener más información, consulta Copia directa en JavaScript con estructuradosClone.

La seudoclase :focus-visible

Como desarrolladores web, todos estamos familiarizados con 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 se interpone en el diseño visual para diferentes usuarios. La seudoclase :focus-visible de CSS verifica si el navegador considera que el enfoque debe estar 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;
}

Navegadores compatibles

• (86)
• (86)
• (85)
• 15,4

Origen

Para obtener más información, consulta la sección Enfocarse en Aprende CSS.

La interfaz de TransformStream

La interfaz de TransformStream de la API de Streams permite canalizar transmisiones entre sí.

Por ejemplo, puedes transmitir datos desde un lugar y, luego, comprimir el flujo en 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 muestra.

Navegadores compatibles

• (67)
• (79)
• 102
• 14.1

Origen

Conclusión

Hay muchas más funciones que recientemente se volvieron interoperables y estables para usar en la plataforma web. De ahora en adelante, trabajaremos con WebDX Community Group para aportar más claridad a estos conjuntos de funciones de Baseline. Consulta web.dev/baseline para obtener detalles continuos.

Si quieres mantenerte al día, nuestro equipo publica artículos cuando una función se vuelve interoperable y publica actualizaciones mensuales sobre las novedades en la plataforma web, desde funciones experimentales hasta nuevas interoperables.

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.