Conozca solo algunas de las funciones que forman parte de Baseline.
La Web evoluciona constantemente y los navegadores se actualizan constantemente para brindarles a los desarrolladores nuevas herramientas que les permitan innovar en la plataforma. Los elementos que antes requerían bibliotecas auxiliares forman parte de la plataforma web y son compatibles con todos los navegadores, junto con formas más cortas o sencillas de programar los 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 serán compatibles todos los motores de navegador con esta nueva función?". “¿Cuándo puedo comenzar a usar realmente esas funciones en mi código de producción?”. "¿Por cuánto tiempo deberíamos admitir navegadores más antiguos?"
La respuesta verdadera es “depende”. Lo que se necesita y lo que se puede usar en realidad depende de la base de usuarios, la pila tecnológica, la estructura del equipo y los dispositivos compatibles. Sin embargo, 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 del navegador y con la comunidad web para aportar mayor claridad. Esto incluye nuestro trabajo en proyectos como Interoperabilidad 2023, que ayuda a mejorar la interoperabilidad de un conjunto de funciones clave. Pero ¿qué sucede con los atributos que se muestran en los últimos años? ¿Están listas para usar las funciones experimentales que aprendimos hace dos años?
En esta publicación, quiero destacar algunas funciones que ahora están disponibles para todos los motores de navegador principales en 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 que llamaremos Baseline. Para obtener más información, consulte el anuncio sobre Baseline aquí.
El elemento de diálogo
El elemento <dialog> es un nuevo elemento HTML que se usa para crear mensajes de diálogo, como ventanas emergentes y modales.
Para usarlo, define el elemento modal y 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 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 crear un componente de diálogo.
Propiedades individuales de transformación de CSS
Usar transformaciones de CSS es una forma eficaz de agregar movimiento a tu sitio.
Es posible que ya sepas cómo escribir transformaciones de CSS con tres propiedades en una línea.
Con las propiedades de transformación individuales, ahora puedes especificar las propiedades de transformación 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 el artículo 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 de la viewport se ve afectado por la presencia o ausencia de barras de herramientas dinámicas.
A veces, tienes una barra de URL y una de navegación visibles, pero a veces están completamente retraídas.
El tamaño real del viewport será diferente según las barras de herramientas sean visibles o no.
Las nuevas unidades de viewport, como svh y lvh, les brindan a los desarrolladores web un control más preciso a la hora de diseñar contenido para dispositivos móviles. Puedes obtener más información en el artículo Unidades de viewport grande, pequeño y dinámico.
Navegadores compatibles
- 108
- 108
- 101
- 15.4
Copia en JavaScript
Antes, para crear una copia profunda de un objeto sin referencia al objeto original, un truco popular era JSON.stringify combinado con JSON.parse. Este truco fue tan común que V8 (el motor JavaScript de Chrome) mejoró considerablemente su rendimiento. 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);
Para obtener más información, consulta Copia profunda en JavaScript con estructuradoClone.
La seudoclase :focus-visible
Como desarrolladores web, todos estamos familiarizados con ese “anillo de enfoque” que aparece cuando navegas por una página con un teclado o haces clic en los elementos de entrada. Es una función necesaria para la accesibilidad, pero a veces interfiere en el diseño visual de diferentes usuarios. La seudoclase de CSS :focus-visible verifica si el navegador cree que el enfoque debe ser visible. Ahora puedes especificar estilos solo cuando el foco 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 Enfócate en Aprende CSS para obtener más información.
La interfaz de TransformStream
La interfaz TransformStream de la API de Streams permite canalizar transmisiones entre sí.
Por ejemplo, puedes transmitir datos desde un lugar y, luego, comprimir el flujo de datos 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.
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 el grupo de la comunidad de WebDX para aportar mayor claridad al conjunto de funciones de Baseline. Consulta web.dev/baseline para conocer más detalles.
Si quieres mantenerte al día, nuestro equipo publica artículos cuando una función se vuelve interoperable y publica actualizaciones mensuales sobre lo que sucede en la plataforma web, desde funciones experimentales hasta nuevas funciones interoperables.
Siempre nos interesa saber si lo que estamos haciendo puede ayudarte o si necesitas diferentes tipos de asistencia, así que comunícate con nosotros a través del Grupo de la comunidad de WebDX.