¡Hace mucho tiempo! El video de Novedades de Chrome está de vuelta con información sobre lo siguiente:
- Text-box de CSS, que te permite controlar el espaciado vertical con precisión mediante las métricas de fuente
- La API de acceso al sistema de archivos que ahora es compatible con Android y Webview.
- Una forma de mover un elemento DOM que preserva el estado con
moveBefore. - La eliminación de la luz llega al elemento
<dialog>. - Además, hay muchas actualizaciones en Baseline y mucho más.
Soy Mariko. Analicemos las novedades de Chrome en las últimas tres versiones.
Cuadro de texto de CSS
La propiedad text-box de CSS te permite controlar el espaciado vertical con precisión mediante las métricas de fuente.
Cada fuente produce una cantidad diferente de espacio sobre y debajo de los caracteres, lo que determina el tamaño del elemento.
Hasta ahora, era imposible controlar el tamaño de estos espacios.
La nueva propiedad text-box-trim especifica los lados que se recortarán, arriba o abajo, y la propiedad text-box-edge especifica cómo se deben recortar.
Por ejemplo, recortar en la altura de mayúsculas, que es la parte superior de los caracteres en mayúsculas.
También puedes escribir esto con la propiedad text-box abreviada.
Obtén más información para usar estas propiedades nuevas en el artículo text-box-trim de CSS.
API de File System Access
Se agregó en Chrome 133, una primitiva DOM Node.prototype.moveBefore que te permite mover elementos alrededor de un árbol DOM sin restablecer el estado del elemento.
Cuando quites y vuelvas a insertar un elemento para mover un elemento DOM, se restablecerá el estado de ese elemento. Con esta nueva primitiva, se conserva el estado de un nodo.
Por lo tanto, los iframes permanecen cargados, los elementos activos permanecen enfocados, los elementos como los popovers y los diálogos permanecen abiertos, y las transiciones o animaciones de CSS continúan.
Forma de mover un elemento DOM que conserva el estado
La API de acceso al sistema de archivos está disponible en Chrome para computadoras desde hace algún tiempo. Esta API permite que las apps web interactúen con archivos en el sistema de archivos local del usuario. A partir de Chrome 132, la API también está disponible en Android y en WebViews.
Para leer un archivo, llama a showOpenFilePicker(). Este método muestra un selector de archivos y, luego, muestra un identificador de archivo que puedes usar para leerlo.
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
Para guardar un archivo en el disco, puedes usar el mismo identificador de archivo que obtuviste antes o llamar a showSaveFilePicker() para obtener uno nuevo.
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
La eliminación ligera llega al elemento <dialog>.
Si usaste la API de Popover para crear un popover, conoces una de las funciones interesantes de la API de Popover: el comportamiento de descarte ligero. Los usuarios pueden hacer clic en el fondo y el elemento del cuadro flotante se cierra sin tener que presionar el botón de cierre.
Esta función de descarte ligero ahora también es compatible con el elemento <dialog>.
Cuando configuras el atributo closedby en any, puedes hacer clic fuera del diálogo o presionar la tecla Escape para descartarlo.
<dialog closedby="any">...</dialog>
Este es el mismo comportamiento que se produce cuando un popover se establece en automático.
Actualizaciones en Baseline
Y aquí tienes las novedades sobre Baseline
Modelo de referencia disponible recientemente
En primer lugar, Baseline, que está disponible recientemente, son funciones que se lanzaron recientemente en los cuatro navegadores principales.
scrollbar-gutter y scrollbar-width
Con la propiedad CSS scrollbar-gutter, puedes reservar un espacio para la barra de desplazamiento para evitar cambios de diseño no deseados cuando esta aparece o desaparece. Con scrollbar-width, puedes crear una barra de desplazamiento más estrecha o incluso ocultarla por completo sin afectar la capacidad de desplazamiento.
ruby-align
Con la propiedad CSS ruby-align, puedes especificar la alineación del texto base de ruby y el texto de la anotación de ruby.
Promise.try
Promise.try es un método conveniente para realizar el manejo de errores de las solicitudes síncronas. Con esto, puedes eliminar las funciones de devolución de llamada cuando intentas realizar una solicitud con Promise.resolve.
Recolección de elementos no utilizados de Wasm y optimizaciones de llamadas al final
WebAssembly ahora admite la recolección de elementos no utilizados y las optimizaciones de llamada de cola.
Modelo de referencia de gran disponibilidad
Array findLast() y findLastIndex()
Los métodos findLast() y findLastIndex() del array son muy convenientes para obtener elementos del final de un array. Esta función es compatible con todos los navegadores principales desde hace 30 meses, lo que significa que ahora está disponible en Baseline.
Propiedades de transformación individuales
Las propiedades de transformación individuales, que te brindan un control más detallado sobre las transformaciones de CSS, ahora también están disponibles en Baseline Widely .
Más información sobre Baseline
Si quieres obtener más información sobre el modelo de referencia y la diferencia entre los estados Disponible recientemente y Disponible ampliamente, mira el video breve que hice.
También puedes obtener más información sobre el estado del modelo de referencia de una función en el panel de estado de la plataforma web.
El proyecto de interoperabilidad regresa en 2025
Por último, el proyecto de interoperabilidad regresará en 2025 con una lista de áreas de enfoque, incluidas las transiciones de vista, el posicionamiento de anclas de CSS y la API de Navigation. Asegúrate de consultar el anuncio del proyecto.
Suscribirse
Para mantenerte al tanto, suscríbete al canal de YouTube de Chrome Developers y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.
Soy Mariko Kosaka y volveré en tres meses para contarte más sobre las Novedades de Chrome.