Veja o que é necessário saber:
- O CSS agora é compatível com regras de aninhamento.
- O algoritmo para definir o foco inicial nos elementos
<dialog>foi atualizado. - Os gerenciadores
fetch()autônomos em service workers são ignorados de agora em diante para tornar as navegações mais rápidas. - E há muito mais.
Meu nome é Adriana Jara. Vamos conhecer as novidades para os desenvolvedores no Chrome 112.
Suporte a CSS para aninhamento.
Um dos nossos recursos favoritos de pré-processador de CSS agora está integrado à linguagem: regras de estilo de aninhamento.
Antes do aninhamento, cada seletor precisava ser declarado explicitamente, separadamente um do outro. Isso leva à repetição, muitas folhas de estilo e a uma experiência de criação dispersa.
.nesting {
color: hotpink;
}
.nesting > .is {
color: rebeccapurple;
}
.nesting > .is > .awesome {
color: deeppink;
}
Após o aninhamento, os seletores podem ser continuados e as regras de estilo relacionadas a eles podem ser agrupadas.
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
O aninhamento ajuda os desenvolvedores porque reduz a necessidade de repetir seletores e colocaliza as regras de estilo para elementos relacionados. Ele também pode ajudar os estilos a corresponder ao HTML segmentado.
Se o componente .nesting do exemplo tiver sido removido do projeto, você poderá excluir todo o grupo em vez de pesquisar nos arquivos por instâncias do seletor relacionadas.
A transição pode ajudar com o seguinte:
- Organização:
- Reduzindo o tamanho do arquivo.
- Refatoração.
Confira este artigo (em inglês) para dicas sobre como aproveitar ao máximo o aninhamento de CSS. Para encontrar suporte para o aninhamento no DevTools, clique 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 maneira recomendada de criar esse conteúdo, porque seus recursos foram criados 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.
De agora em diante:
As etapas de foco da caixa de diálogo analisam os elementos focalizáveis do teclado em vez de qualquer elemento focalizável.
O próprio elemento <dialog> recebe foco se tiver o atributo autofoco definido.
O próprio elemento <dialog> recebe o foco como substituto, em vez de ser "redefinido" para o elemento <body>.
Leia a documentação para mais detalhes sobre o elemento <dialog>.
Ignorar gerenciadores de busca de ambiente autônomo do service worker.
A partir do 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 estão inativos.
Esse recurso torna a navegação nessas páginas mais rápida.
Ter o gerenciador de busca era um dos requisitos do PWA para que um app da Web pudesse ser instalado. Suspeitamos que essa possa ser a razão pela qual alguns sites têm essencialmente um gerenciador de busca vazio. No entanto, iniciar um service worker e executar um listener de ambiente autônomo apenas traz sobrecarga, sem trazer nenhum dos benefícios que poderiam ser implementados com o service worker correto, como armazenamento em cache ou recursos off-line. Por isso, o Chrome agora os pula para melhorar a navegação.
Como parte dessa mudança, o Chrome mostrará avisos no console se todos os listeners de busca do service worker estiverem inativos, e incentivará os desenvolvedores a removê-los.
E muito mais.
Claro, há muito mais.
- O setter de
document.domainfoi descontinuado. - Há um teste de origem para a descontinuação de
X-Requested-With headerno WebView. - O gravador no DevTools agora pode gravar com seletores de Pierce.
Leia mais
Isso aborda apenas alguns destaques importantes. Verifique os links abaixo para ver outras mudanças no Chrome 112.
- Novidades do Chrome DevTools (112)
- Descontinuações e remoções do Chrome 112
- Atualizações do ChromeStatus.com para o Chrome 112
- Lista de alterações do repositório de origem do Chromium
- Agenda de lançamentos do Chrome
Fazer inscrição
Para ficar por dentro, inscreva-se no canal do YouTube para desenvolvedores do Chrome. 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 dizer as novidades do Chrome.