Novedades de Chrome 100

Pete LePage

Tenga en cuenta lo siguiente:

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

Chrome 100

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

Logotipo de Chrome y Firefox

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

Esto generó algunos problemas que se informaron, muchos de los cuales ya se solucionaron. Seguimos necesitando tu ayuda.

  • Si administras sitios 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 para llegar a la versión principal 100 en web.dev.

100 momentos web geniales

Imagen promocional de 100 momentos web geniales

Ha sido emocionante ver crecer la Web y ver todos los extraordinarios que creaste en las últimas 100 versiones de Chrome. Pensamos que sería divertido recordar el pasado y celebrar los eventos #100CoolWebMoments que ocurrieron en los últimos 14 años.

Cuéntanos qué momentos te gustaron más. Si nos perdimos algo (y estamos seguros de que lo hicimos), tuitea a @Chromiumdev con #100CoolWebMoments. ¡Que lo disfrutes!

Cadena de usuario-agente reducida

En cuanto al usuario-agente, Chrome 100 será la última versión en admitir una string de usuario-agente sin reducir 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á de forma gradual.

Consulta Prueba y fechas de origen de la 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 ubicación de ventana multipantalla

En el caso de algunas apps, abrir ventanas nuevas y ubicarlas en lugares específicos o pantallas específicas es una función importante. Por ejemplo, cuando uso Presentaciones para realizar una presentación, quiero que las diapositivas aparezcan en pantalla completa en la pantalla principal y que mis notas del orador aparezcan en la otra.

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

Puedes comprobar 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 adjuntas.

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

Por ejemplo, puedes determinar la pantalla principal y, luego, usar requestFullscreen() para que un elemento se muestre en pantalla completa.

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 enchufa o quita una nueva pantalla, 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;
  }
});

Para obtener información más detallada, consulta el artículo actualizado de Tom sobre cómo administrar varias pantallas con la API de ubicación de ventanas multipantalla en web.dev.

Y mucho más.

Por supuesto que hay mucho más.

Hay un nuevo método forget() para dispositivos HID que te permite revocar un permiso para un dispositivo HID otorgado por 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 abarca solo algunos de los aspectos más destacados. Consulta los vínculos a continuación para ver cambios adicionales en Chrome 100.

Suscribirse

Para mantenerte al día, suscríbete al canal de YouTube de Chrome Developers. 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 de Chrome.