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 do pré-processador CSS agora está integrado à linguagem: regras de estilo aninhadas.

Antes do aninhamento, cada seletor precisava ser declarado explicitamente, separadamente um do outro. Isso leva à repetição, folha de estilo em massa e uma experiência de criação esparsa.

Antes
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

Depois do anilhamento, os seletores podem ser continuados, e as regras de estilo relacionadas podem ser agrupadas.

Depois
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

A aninhamento ajuda os desenvolvedores porque reduz a necessidade de repetir seletores e também coloca as regras de estilo em conjunto para elementos relacionados. Isso também pode ajudar os estilos a corresponder ao HTML de destino.

Se o componente .nesting no exemplo for removido do projeto, você poderá excluir o grupo inteiro em vez de procurar arquivos para instâncias de seletor relacionadas.

A aninhação pode ajudar com:

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

Confira este artigo para conferir dicas sobre como aproveitar ao máximo o aninhamento de CSS. Você também pode encontrar o suporte para aninhamento no DevTools aqui.

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 é o processamento do elemento que recebe o foco 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 foco se ele tiver o atributo de foco automático definido.

O elemento <dialog> recebe o foco como substituto em vez de ser "redefinido" para o elemento <body>.

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

Ignorar manipuladores de busca de no-op do service worker.

A partir do Chrome 112, a inicialização do worker de serviço e o envio do listener do caminho crítico de navegação serão omitidos se um agente do usuário identificar que todos os listeners de busca do worker de serviço são no-ops.

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

Ter o gerenciador de busca era um dos requisitos do PWA para que um app da Web pudesse ser instalado. 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 sem operação só aumenta a sobrecarga, sem trazer nenhum dos benefícios que podem ser implementados com o service worker certo, como armazenamento em cache ou recursos off-line. Por isso, o Chrome agora os ignora para melhorar a navegação.

Como parte dessa mudança, o Chrome vai mostrar avisos no console se todos os listeners de busca do service worker forem no-ops e incentivar os desenvolvedores a remover esses listeners de busca.

Avisos no DevTools para manipuladores de busca de service workers vazios.

E muito mais.

Claro que há muito mais.

  • O setter de document.domain foi descontinuado.
  • Há um teste de origem para a descontinuação do X-Requested-With header na WebView
  • O gravador nas ferramentas do desenvolvedor agora pode gravar com seletores de perfuração.

Leitura adicional

Isso inclui apenas alguns destaques importantes. Consulte os links abaixo para outras mudanças no Chrome 112.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba 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, vou estar aqui para contar as novidades do Chrome.