Novidades no Chrome 120

Adriana Jara

Veja o que é necessário saber:

Sou Adriana Jara. Vamos nos aprofundar e conhecer as novidades para desenvolvedores no Chrome 120.

API CloseWatcher.

Um recurso importante dos componentes modal ou pop-up é que eles são fáceis de fechar,com um mecanismo consistente para fazer isso. Esses mecanismos são chamados de solicitações de fechamento e, normalmente, são a tecla ESC em plataformas de computador e o gesto ou botão "Voltar" no Android.

Os desenvolvedores Web não tinham uma boa maneira de lidar com solicitações de fechamento para seus próprios componentes. Isso é especialmente problemático em dispositivos Android, onde fornecer o comportamento simples de fechamento para o gesto "Voltar" é bastante complexo.

O Chrome 120 oferece a solução com a CloseWatcher, uma nova API para detectar e responder diretamente a solicitações de fechamento. Ela também inclui upgrades para o <dialog> e popover="" com o objetivo de usar o novo framework de solicitação de fechamento para responder ao botão "Voltar" do Android.

Confira a demonstração da API CloseWatcher para fazer um teste.

Atributo de nome <details>

O atributo name para o elemento <details> facilita a implementação do padrão de acordeão usando uma sequência de elementos HTML <details>.

Vários elementos <details> com o mesmo name formam um grupo. Com essa configuração, no máximo um elemento nesse grupo pode ser aberto por vez.

Confira um exemplo com um grupo que compartilha o nome cookies:

<details name="cookies">
  <summary>Chocolate chip</summary>
  Yum yum chocolate chip.
</details>
<details name="cookies">
  <summary>Snickerdoodle</summary>
   Yum yum snickerdoodle.
</details>
<details name="cookies">
  <summary>Maicenitas</summary>
   Yum yum maicenitas.
</details>
<details name="cookies">
  <summary>Sugar cookies</summary>
   Yum yum sugar cookies.
</details>

Relatórios de violação da política de permissões

Os relatórios de violação de políticas de permissões já estão disponíveis e integram a API Permissions Policy, que permite aos desenvolvedores controlar os recursos do navegador disponíveis para uma página, os iframes e sub-recursos dela. Basta declarar um conjunto de políticas que serão aplicadas ao navegador com a API Reporting. A API de relatórios fornece um mecanismo genérico de geração de relatórios a ser usado por aplicativos da Web para disponibilizar relatórios com base em vários recursos da plataforma.

Com a integração das APIs Permissions Policy e Reporting, os desenvolvedores Web podem configurar endpoints para receber os relatórios de violação da política de permissões. Assim, os proprietários de sites podem conferir quando recursos não permitidos são solicitados para as páginas em campo.

O artigo Como controlar os recursos do navegador com a política de permissões inclui mais detalhes de implementação.

E muito mais.

É claro que há muito mais.

  • A implementação de transição de CSS simplificada permite que as regras de estilo aninhadas comecem com um elemento, em vez de serem agrupadas com is() ou exigir um "e" comercial na frente.

  • Com a ação enterpictureinpicture na API Media Session, os sites podem registrar um gerenciador de ações para abrir uma janela picture-in-picture ou de documento.

  • E um lembrete de que o Chrome está trabalhando para descontinuar cookies de terceiros. Em janeiro, é iniciado um experimento que pode afetar seu site. Por isso, é importante marcar Como se preparar para o fim dos cookies de terceiros para conferir as etapas de auditoria e mitigação.

Leitura adicional

Isso cobre apenas alguns dos principais destaques. Verifique os links abaixo para outras mudanças no Chrome 120.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no Canal Chrome Developers no YouTube, e você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

Adriana Jara, nossa equipe deseja boas festas e, assim que o Chrome 121 for lançado, estarei aqui para contar as novidades do Chrome.