Novedades de Chrome 100

Pete LePage

Tenga en cuenta lo siguiente:

Soy Pete LePage. Analicemos las novedades para desarrolladores en Chrome 100.

Chrome 100

Cuando los navegadores alcanzaron por primera vez la versión 10, hubo algunos problemas, ya que el número de versión principal pasó de un dígito a dos. Esperemos que hayamos aprendido algunas cosas que facilitarán la transición de dos a tres dígitos.

Logotipos de Chrome y Firefox

Chrome 100 ya está disponible y Firefox 100 se enviará muy pronto. Estos números de versión de tres dígitos pueden causar problemas en los sitios que dependen de la identificación de la versión del navegador de alguna manera. En los últimos meses, el equipo de Firefox y el de Chrome ejecutaron experimentos en los que el navegador informaba el número de versión 100, aunque no era así.

Esto generó algunos problemas informados, muchos de los cuales ya se solucionaron. Sin embargo, aún necesitamos tu ayuda.

  • Si eres el encargado de mantener un sitio web, pruébalo con Chrome y Firefox 100.
  • Si desarrollas una biblioteca de análisis de usuario-agente, agrega pruebas para analizar versiones superiores o iguales a 100.

Para obtener más detalles, consulta Chrome y Firefox pronto alcanzarán la versión principal 100 en web.dev.

100 momentos geniales de la Web

Imagen promocional de 100 momentos geniales de la Web

Fue emocionante ver cómo crecía la Web y ver todo lo asombroso que creaste en las últimas 100 versiones de Chrome. Pensamos que sería divertido hacer un recorrido por el túnel de los recuerdos y celebrar los #100CoolWebMoments que ocurrieron en los últimos 14 años.

Dinos qué momentos te gustaron más. Si nos falta algo (y estamos seguros de que sí), twittea a @Chromiumdev con #100CoolWebMoments. ¡Que lo disfrutes!

String de usuario-agente reducida

A propósito del usuario-agente, Chrome 100 será la última versión que admitirá una cadena de usuario-agente no reducida de forma predeterminada. Esto es parte de una estrategia para reemplazar el uso de la string de usuario-agente por la nueva API de User-Agent Client Hints.

A partir de Chrome 101, el usuario-agente se reducirá gradualmente.

Consulta Prueba y fechas de origen de reducción de usuario-agente en el [blog de Chromium][crblog] para obtener más información sobre qué se quitará y cuándo.

API de Multi-Screen Window Placement

Para algunas apps, abrir ventanas nuevas y colocarlas en lugares o pantallas específicas es una función importante. Por ejemplo, cuando uso Presentaciones para presentar, quiero que las diapositivas aparezcan en pantalla completa en la pantalla principal y que mis notas del orador aparezcan en la otra pantalla.

La API de Multi-Screen Window Placement permite enumerar las pantallas conectadas a la máquina del usuario y colocar ventanas en pantallas específicas.

Puedes verificar rápidamente si hay más de una pantalla conectada al dispositivo con window.screen.isExtended.

const isExtended = window.screen.isExtended;
// returns true/false

Sin embargo, la funcionalidad clave está en window.getScreenDetails(), que proporciona detalles sobre las pantallas conectadas.

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Por ejemplo, puedes determinar la pantalla principal y, luego, usar requestFullscreen() para hacer que un elemento sea de pantalla completa en esa pantalla.

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Además, proporciona una forma de detectar cambios, por ejemplo, si se conecta o se quita una nueva pantalla, si cambia la resolución, etcétera.

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Consulta el artículo actualizado de Tom Cómo administrar varias pantallas con la API de Multi-Screen Window Placement en web.dev para obtener más información.

Y mucho más.

Por supuesto, hay mucho más.

Hay un nuevo método forget() para dispositivos HID que te permite revocar un permiso a un dispositivo HID que otorgó un usuario.

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

Y para WebNFC, el método makeReadOnly() te permite hacer que las etiquetas NFC sean de solo lectura de forma permanente.

const ndef = new NDEFReader();
await ndef.makeReadOnly();

Lecturas adicionales

Esto solo abarca algunos de los aspectos más destacados. Consulta los vínculos que aparecen a continuación para ver cambios adicionales en Chrome 100.

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 Pete LePage y, en cuanto se lance Chrome 101, estaré aquí para contarte las novedades.