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. Las cosas que anteriormente requerían bibliotecas auxiliares ahora 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 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 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 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.
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
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 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 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
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 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 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 se interpone 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 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.
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.