Novidades no Chrome 117

Adriana Jara

O que você precisa saber:

Meu nome é Adriana Jara. Vamos analisar todos os detalhes e ver o que há de novo para desenvolvedores no Chrome 117.

Novos recursos de CSS para animações de entrada e saída.

Esses três novos recursos do CSS completam o conjunto para adicionar animações de entrada e saída com facilidade, e animar suavemente para e dos elementos dispensáveis da camada superior, como caixas de diálogo e popovers.

O primeiro recurso é transition-behavior. Para fazer a transição de propriedades discretas, como display, use o valor allow-discrete para transition-behavior.

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

Em seguida, a regra @starting-style é usada para animar os efeitos de entrada de display: none e na camada superior. Use @starting-style para aplicar um estilo que o navegador pode pesquisar antes que o elemento seja aberto na página.

/*  0. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

Por fim, para esmaecer um popover ou dialog da camada superior, adicione a propriedade overlay à sua lista de transições. Inclua a sobreposição na transição ou animação para animar a sobreposição junto com o restante dos recursos e garantir que ela permaneça na camada superior durante a animação. Isso vai deixar a aparência muito mais suave.

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

Confira Quatro novos recursos de CSS para animações de entrada e saída suaves e saiba como usar esses recursos para melhorar a experiência do usuário com movimento.

Agrupamento de matrizes

Na programação, o agrupamento de matrizes é uma operação extremamente comum, vista com mais frequência quando usamos a cláusula AGREGAR POR do SQL e a programação MapReduce (que é melhor pensada como map-group-reduce).

A capacidade de combinar dados em grupos permite que os desenvolvedores calculem conjuntos de dados de ordem superior. Por exemplo, a idade média de uma coorte ou os valores diários de LCP de uma página da Web.

O agrupamento de matrizes permite esses cenários adicionando os métodos estáticos Object.groupBy e Map.groupBy.

groupBy chama uma função de callback fornecida uma vez para cada elemento em um iterável. A função de callback precisa retornar uma string ou um símbolo que indique o grupo do elemento associado.

No exemplo a seguir, da documentação da MDN, há uma matriz de produtos com o método groupBy usado para retornar os itens agrupados por tipo.

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish">;, type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) = type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

Para mais detalhes, consulte a documentação do groupBy.

Substituições locais simplificadas no DevTools.

O recurso substituições locais agora está simplificado. Assim, é possível simular facilmente cabeçalhos de resposta e conteúdo da Web de recursos remotos no painel Rede sem acesso a eles.

Para substituir o conteúdo da Web, abra o painel Rede, clique com o botão direito do mouse em uma solicitação e selecione Substituir conteúdo.

As opções de substituição no menu suspenso de uma solicitação.

Se você tiver substituições locais configuradas, mas desativadas, o DevTools as ativará. Se você ainda não tiver configurado, o DevTools vai pedir na barra de ações na parte de cima. Selecione uma pasta para armazenar as substituições e permita que o DevTools acesse essa pasta.

Selecione uma pasta e permita o acesso a ela na barra de ações na parte de cima.

Depois que as substituições são configuradas, as DevTools levam você a Fontes > Substituições > Editor para permitir que você substitua o conteúdo da Web.

Os recursos substituídos são indicados com Salvo. no painel Rede. Passe o cursor sobre o ícone para ver o que foi substituído.

Um ícone de substituição ao lado de uma solicitação no painel Network.

Confira as novidades do DevTools para todos os detalhes e mais informações sobre o DevTools no Chrome 117.

E muito mais.

É claro que há muito mais.

Leitura adicional

Isso abrange apenas alguns destaques importantes. Confira os links abaixo para outras mudanças no Chrome 117.

Inscrever-se

Para ficar atualizado, 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.

Eu sou Adriana Jara e, assim que o Chrome 117 for lançado, vou estar aqui para contar as novidades do Chrome!