Novedades de Chrome 93

Pete LePage

Tenga en cuenta lo siguiente:

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

Secuencias de comandos de módulos de CSS

Ahora puedes cargar hojas de estilo CSS con declaraciones 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 construibles.

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

Para usarla, importa la hoja de estilo con assert {type: 'css'} y, luego, aplícala a document o shadowRoot llamando a adoptedStyleSheets.

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

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

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

API de ubicación de ventanas multipantalla

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 exponer, 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 de los usuarios y colocar ventanas en pantallas específicas. Esta es su segunda prueba de origen, y realizamos varios cambios en función de tus comentarios.

Puedes comprobar 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 se encuentra 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 desconecta 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 Administra varias pantallas con la API de Multi-Screen Window Placement en web.dev para obtener más información.

Ciclo de lanzamiento más corto

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

Ese momento llegó, y lanzaremos 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 las AWP

Si estás creando una app web progresiva, vale la pena consultar dos nuevas pruebas de origen.

Controladores de URLs para AWP

Si tienes una AWP instalada 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 a tu directorio .well-known/, puedes indicarle al navegador que, si un usuario hace clic en un vínculo a tu PWA, esta se debe abrir dentro de la PWA 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/*"]
      }
    }
  ]
}

Y con un poco de verificación adicional, incluso puedes hacer que tu PWA controle los vínculos de otros orígenes que poseas.

Todos los detalles sobre la prueba de origen se encuentran en Las PWA como controladores de URLs en web.dev.

Superposición de controles de 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 la ventana, como los botones para cerrar, maximizar y minimizar.

Puedes usar esta función para que tu AWP instalada se parezca más a otras apps instaladas.

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

PWA Summit

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

Hay muchas charlas y contenido excelentes. Puedes obtener más información y registrarte en PWASummit.org.

Y mucho más

Por supuesto que hay mucho más.

  • Flexbox y los elementos de flexbox agregaron compatibilidad con las palabras clave de alineación: start, end, self-start, self-end, left y right.
  • La API de Async Clipboard ahora admite archivos SVG.
  • Además, se respetará el atributo media cuando se establezca meta theme-color, por lo que puedes 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 abarca solo algunos de los aspectos más destacados. Consulta los vínculos que aparecen a continuación para conocer 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 de Chrome.