Novidades no Chrome 112

Adriana Jara

Veja o que é necessário saber:

Meu nome é Adriana Jara. Vamos nos aprofundar e conhecer as novidades para desenvolvedores no Chrome 112.

Suporte a CSS para aninhamento.

Um dos nossos recursos favoritos de pré-processador de CSS agora está integrado à linguagem: o aninhamento de regras de estilo.

Antes do aninhamento, cada seletor precisava ser declarado explicitamente, separadamente do se complementam. Isso leva à repetição, folha de estilo em massa e à criação esparsa. do usuário.

Antes
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Após o aninhamento, os seletores podem ser regras de estilo contínuas e relacionadas a ele podem ser agrupadas.

Depois
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

A Transição ajuda os desenvolvedores a reduzir a necessidade de repetir seletores e, ao mesmo tempo, colocalizar regras de estilo juntas para elementos relacionados. Isso também ajuda os estilos a corresponder ao HTML segmentado.

Se o componente .nesting no exemplo tiver sido removido do projeto, você poderá excluir o grupo inteiro em vez de pesquisar instâncias de seletor relacionadas nos arquivos.

A Transição pode ajudar com:

  • Organização:
  • Reduzindo o tamanho do arquivo.
  • Refatoração.

Confira este artigo para dicas sobre como aproveitar ao máximo o aninhamento de CSS. Encontre suporte para aninhamento no DevTools neste link.

Atualização do algoritmo para o foco inicial de <dialog>.

O elemento HTML <dialog> é a maneira padronizada de representar uma caixa de diálogo ou outro componente interativo, como um alerta dispensável ou uma subjanela, que precisa ser exibido sobre todos os outros conteúdos em uma página da Web.

Esse elemento HTML é a forma recomendada de criar esse tipo de conteúdo, porque seus recursos foram desenvolvidos para fornecer usabilidade e acessibilidade melhores e consistentes.

Um desses recursos é gerenciar qual elemento é focado quando a caixa de diálogo é aberta. Nesta versão, o algoritmo que seleciona esse elemento foi atualizado.

A partir de agora:

As etapas de foco da caixa de diálogo analisam elementos focalizáveis do teclado em vez de qualquer elemento focalizável O próprio elemento <dialog> recebe o foco se tiver o atributo de autofoco definido.

O próprio elemento <dialog> recebe o foco como substituto em vez de "redefinido" ao elemento <body>.

Leia a documentação para saber mais detalhes sobre o elemento <dialog>.

Ignorando gerenciadores de busca autônomos de service worker.

No Chrome 112, a inicialização do service worker e o envio do listener do caminho crítico de navegação serão omitidos se um user agent identificar que todos os listeners de busca do service worker não são operacionais.

Esse recurso agiliza a navegação nessas páginas.

Esse era um dos requisitos de PWA para instalação de apps da Web. Suspeitamos que esse possa ser o motivo de alguns sites terem um gerenciador de busca vazio. No entanto, iniciar um service worker e executar um listener de ambiente autônomo apenas gera sobrecarga, sem trazer nenhum dos benefícios que poderiam ser implementados com o service worker certo, como armazenamento em cache ou recursos off-line. Por isso, o Chrome os pula para melhorar a navegação.

Como parte dessa mudança, o Chrome mostrará avisos do console se todos os listeners de busca do service worker estiverem inativos, e incentivará os desenvolvedores a remover esses listeners de busca.

Avisos no DevTools para gerenciadores de busca vazios do service worker.

E muito mais.

É claro que há muito mais.

  • O setter de document.domain foi descontinuado.
  • Existe um teste de origem para a descontinuação de X-Requested-With header no WebView.
  • O Gravador no DevTools agora pode gravar com seletores de nível.

Leitura adicional

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

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.

Meu nome é Adriana Jara, e assim que o Chrome 113 for lançado, estarei aqui para contar as novidades do Chrome.