Novedades de Chrome 93

Pete LePage

Tenga en cuenta lo siguiente:

Soy Pete LePage, trabajo y grabo desde casa. Comencemos y veamos las novedades para desarrolladores en Chrome 93.

Secuencias de comandos de módulos CSS

Ahora puedes cargar hojas de estilo CSS con sentencias import, al igual que los módulos de JavaScript. Luego, las hojas de estilo se pueden aplicar al documento o a las raíces de sombra de la misma manera que las hojas de estilo componibles.

La nueva función de secuencias de comandos de módulos de CSS es excelente para los elementos personalizados. A diferencia de otras formas de aplicar CSS desde JavaScript, no es necesario crear elementos ni manipular cadenas de texto CSS de JavaScript.

Para usarlo, importa la hoja de estilo con assert {type: 'css'} y, luego, llámala a adoptedStyleSheets para aplicarla a document o shadowRoot.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Pero ten cuidado, si no incluyes assert, el archivo se tratará como JavaScript y no funcionará.

Consulta Cómo usar secuencias de comandos de módulo CSS para importar hojas de estilo en web.dev para obtener todos los detalles.

API de Multi-Screen Window Placement

Para algunas apps, abrir ventanas nuevas y colocarlas en lugares o pantallas específicos es una función importante. Por ejemplo, cuando uso Presentaciones para hacer 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 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. Esta es la segunda prueba de origen, y realizamos algunos cambios en función de tus comentarios.

Puedes verificar rápidamente si hay más de una pantalla conectada al dispositivo:

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

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

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

Por ejemplo, puedes determinar la pantalla principal y, luego, usar requestFullscreen() para mostrar un elemento en esa pantalla.

try {
  const screens = await window.getScreens();
  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 pantalla nueva.

const screens = await window.getScreens();
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 de Tom Cómo administrar varias pantallas con la API de Multi-Screen Window Placement en web.dev para obtener más información.

Ciclo de lanzamiento reducido

En marzo, anunciamos nuestros planes para acortar el ciclo de lanzamiento y enviar una versión nueva de Chrome cada cuatro semanas.

Llegó ese momento y enviaremos Chrome 94 el 21 de septiembre. Puedes encontrar las fechas de lanzamiento planificadas para cada versión en el Calendario de Chrome.

Nuevas funciones de la AWP

Si estás compilando una app web progresiva, hay dos nuevas pruebas de origen que vale la pena probar.

Controladores de URL para AWP

Si tienes instalada una AWP y haces clic en un vínculo a esa AWP, es probable que quieras que se abra en la AWP, no en una pestaña del navegador.

Si especificas url_handlers en el manifiesto de la app web y agregas un archivo web-app-origin-association al directorio .well-known/, puedes indicarle al navegador que, si un usuario hace clic en un vínculo a tu AWP, esta se debe abrir dentro de la AWP instalada.

Ejemplo de url_handlers en el archivo manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Archivo web-app-origin-association de ejemplo:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Además, con un poco de verificación adicional, incluso puedes hacer que tu AWP controle vínculos de otros orígenes que sean de tu propiedad.

Todos los detalles sobre la prueba de origen se encuentran en AWP como controladores de URL en web.dev.

Superposición de controles de la ventana

La superposición de controles de ventana extiende el área del cliente para cubrir toda la ventana, incluida la barra de título y los botones de control de ventana, como los botones de cierre, maximización y minimización.

Puedes usar esta función para que la AWP instalada se vea más como otras apps instaladas.

Para obtener más información sobre la prueba de origen, consulta Cómo personalizar la superposición de controles de ventana de la barra de título de la AWP.

Cumbre de AWP

La Cumbre de AWP se realizará en octubre. Es una conferencia en línea gratuita que se enfoca en ayudar a todos a tener éxito con las apps web progresivas. PWA Summit es una colaboración entre personas de varias empresas diferentes involucradas en la creación de tecnologías de AWP: Google, Intel, Microsoft y Samsung.

Hay muchas charlas y contenido excelentes. Obtén más información y regístrate en PWASummit.org.

Y mucho más.

Por supuesto, hay mucho más.

  • Flexbox y los elementos flexbox admiten las palabras clave de alineación: start, end, self-start, self-end, left y right.
  • La API de portapapeles asíncrono ahora admite archivos SVG.
  • Además, se respetará el atributo media cuando configures meta theme-color, para que puedas especificar diferentes colores de tema para los modos claro y oscuro.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

Lecturas adicionales

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

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 94, estaré aquí para contarte las novedades.