Esta página foi traduzida pela API Cloud Translation.

Novidades do Chrome 93

Pete LePage

Veja o que é necessário saber:

Agora é possível carregar folhas de estilo CSS com instruções import, assim como os módulos JavaScript.
Os PWAs instalados podem ser registrados como gerenciadores de URL, o que permite que os usuários acessem diretamente o PWA.
A API Multi-Screen Window Placement foi atualizada com base no seu feedback, e ela inicia um segundo teste de origem.
O PWA Summit vai acontecer de 6 a 7 de outubro.
E há muito mais.

Sou Pete LePage, trabalhando e gravando em casa. Vamos conferir as novidades para desenvolvedores no Chrome 93.

Scripts do módulo CSS

Agora é possível carregar folhas de estilo CSS com instruções import, assim como os módulos JavaScript. As folhas de estilo podem ser aplicadas ao documento ou às raízes paralelas da mesma forma que as folhas de estilo construtáveis.

O novo recurso de scripts do módulo CSS é ótimo para elementos personalizados. Ao contrário de outras formas de aplicar CSS a partir de JavaScript, não é necessário criar elementos ou alterar as strings JavaScript de texto CSS.

Para usá-la, importe a folha de estilo com assert {type: 'css'} e aplique-a a document ou shadowRoot chamando adoptedStyleSheets.

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

Porém, se você não usar assert, o arquivo será tratado como JavaScript e não funcionará.

Confira Como usar scripts do módulo CSS para importar folhas de estilo em web.dev para ver detalhes completos.

API Multi-Screen Window Placement

Para alguns apps, abrir novas janelas e colocá-las em lugares ou telas específicas é um recurso importante. Por exemplo, ao usar as Apresentações para apresentar, quero que os slides apareçam em tela cheia na tela principal e minhas anotações do apresentador apareçam na outra tela.

Com a API Multi-Screen Window Placement, é possível enumerar as telas conectadas à máquina do usuário e posicionar janelas em telas específicas. Este é o segundo teste de origem, e fizemos várias mudanças com base no seu feedback.

É possível verificar rapidamente se há mais de uma tela conectada ao dispositivo:

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

No entanto, a funcionalidade principal está em window.getScreens(), que fornece todos os detalhes sobre as telas anexadas.

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

Por exemplo, você pode determinar a tela principal e usar requestFullscreen() para mostrar um elemento nessa tela.

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

Além disso, ela oferece uma maneira de detectar mudanças, por exemplo, se uma nova tela for conectada ou removida.

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

Confira o artigo de Tom Como gerenciar várias telas com a API Multi-Screen Window Placement (link em inglês) no web.dev para mais detalhes.

Ciclo de lançamento reduzido

Em março, anunciamos nossos planos de encurtar o ciclo de lançamento e enviar uma nova versão do Chrome a cada quatro semanas.

Essa hora chegou, e vamos enviar o Chrome 94 em 21 de setembro. É possível encontrar as datas de lançamento planejadas para cada versão no Agenda do Chrome.

Novos recursos de PWA

Se você está criando um Progressive Web App, vale a pena conferir dois novos testes de origem.

Gerenciadores de URL para PWAs

Se você tiver um PWA instalado e clicar em um link para esse PWA, provavelmente quer que ele o abra no PWA, e não em uma guia do navegador.

Ao especificar url_handlers no manifesto do app da Web e adicionar um arquivo web-app-origin-association ao diretório .well-known/, você pode informar ao navegador que, se um usuário clicar em um link para seu PWA, ele será aberto no PWA instalado.

Exemplo de url_handlers no arquivo manifest.json:

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

Exemplo de arquivo web-app-origin-association:

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

Com um pouco mais de verificação, é possível até mesmo fazer com que o PWA processe links de outras origens suas.

Todos os detalhes sobre o teste de origem estão em PWAs como gerenciadores de URL em web.dev.

Sobreposição de controles da janela

A sobreposição de controles da janela estende a área do cliente para cobrir toda a janela, incluindo a barra de título e os botões de controle da janela, como os botões "Fechar", "Maximizar" e "Minimizar".

Você pode usar esse recurso para deixar o PWA instalado mais parecido com outros apps instalados.

Para saber mais sobre o teste de origem, consulte Personalizar a sobreposição de controles da janela da barra de título do PWA.

PWA Summit

O PWA Summit será em outubro. É uma conferência on-line sem custo financeiro voltada para ajudar todos a ter sucesso com Progressive Web Apps. O PWA Summit é uma colaboração entre pessoas de várias empresas diferentes envolvidas na criação de tecnologias de PWA: Google, Intel, Microsoft e Samsung.

Há muitas palestras e conteúdos incríveis. Saiba mais e registre-se em PWASummit.org.

E muito mais.

Claro, há muito mais.

Os itens flexbox e flexbox adicionaram suporte às palavras-chave de alinhamento start, end, self-start, self-end, left e right.
A API da área de transferência assíncrona agora oferece suporte a arquivos SVG.
Além disso, o atributo media será honrado ao definir o meta theme-color, para que você possa especificar cores de tema diferentes para os modos claro e escuro.

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

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