Novedades de Chrome 93

Pete LePage

Tenga en cuenta lo siguiente:

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

Secuencias de comandos del módulo CSS

Ahora puedes cargar hojas de estilo CSS con instrucciones import, al igual que los módulos de JavaScript. Luego, las hojas de estilo se pueden aplicar al documento o a las shadow roots de la misma manera que las hojas de estilo constructables.

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

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

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

Pero ten en cuenta que si dejas el archivo assert, se tratará como JavaScript y no funcionará.

Consulta Usa secuencias de comandos del módulo de CSS para importar hojas de estilo en web.dev para obtener más información.

API de Multi-Screen Window Placement

Para algunas apps, abrir ventanas nuevas y ubicarlas en lugares o pantallas específicos 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. Esta es la segunda prueba de origen, y hicimos una serie de cambios basados en tus comentarios.

Puedes comprobar rápidamente si hay más de una pantalla conectada al dispositivo. Para ello, haz lo siguiente:

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

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 ella.

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 quita una nueva pantalla.

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;
  }
});

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

Ciclo de lanzamiento acortado

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

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

Nuevas funciones de la AWP

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

Controladores de URL para AWP

Si tienes una AWP instalada y haces clic en un vínculo a ella, 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/, podrás indicarle al navegador que, si un usuario hace clic en un vínculo a tu AWP, debería abrirse 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 tuyos.

Todos los detalles sobre la prueba de origen se encuentran en AWP como controladores de URL 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 hacer que la AWP instalada se vea como 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.

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. La Cumbre de AWP es una colaboración entre personas de varias empresas diferentes que participan en la creación de tecnologías de AWP: Google, Intel, Microsoft y Samsung.

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

Y mucho más.

Por supuesto que hay mucho más.

  • Se agregó compatibilidad con los elementos Flexbox y Flexbox para las palabras clave de alineación: start, end, self-start, self-end, left y right.
  • La API del portapapeles asíncrono ahora admite archivos SVG.
  • Además, se respetará el atributo media cuando se configure 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 a continuación para ver cambios adicionales en Chrome 93.

Suscribirse

Para mantenerte al día, 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.