Veja o que é necessário saber:
- Três novos recursos de CSS facilitam a adição de animações de entrada e saída.
- Calcule conjuntos de dados de ordem superior com o agrupamento de matrizes.
- O DevTools facilita as substituições locais.
- E há muito mais.
Meu nome é Adriana Jara. Vamos conhecer as novidades para os desenvolvedores no Chrome 117.
Novos recursos de CSS para animações de entrada e saída.
Esses três novos recursos CSS completam o conjunto para adicionar animações de entrada e saída com facilidade, além de criar animações de e para elementos dispensáveis da camada superior, como caixas de diálogo e pop-ups.
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
para a camada superior. Use @starting-style
para aplicar um estilo que o navegador pode consultar antes de abrir o elemento na página.
/* 0. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. 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;
}
/* 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 uma popover
ou um dialog
da camada superior, adicione a propriedade overlay
à sua lista de transições. Inclua 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 parecerá muito mais fácil.
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
Confira os quatro novos recursos CSS para facilitar as animações de entrada e saída e veja detalhes sobre como usar esses recursos para melhorar a experiência do usuário com o movimento.
Agrupamento de matrizes
Em programação, o agrupamento de matrizes é uma operação muito comum, vista com mais frequência quando usamos a cláusula GROUP BY e a programação MapReduce do SQL (considerada melhor 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 valores diários de LCP para uma página da Web.
O agrupamento de matrizes ativa 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, na documentação do MDN, há uma matriz de produtos com o método groupBy
usado para retorná-los 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, confira a documentação do groupBy
.
As substituições locais foram simplificadas no DevTools.
O recurso de substituições locais agora foi simplificado para que você possa simular facilmente cabeçalhos de resposta e conteúdo da Web de recursos remotos no painel Network, sem acesso a eles.
Para modificar 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.
Se você tiver substituições locais configuradas, mas desativadas, o DevTools vai ativá-las. Se você ainda não os configurou, o DevTools solicitará na barra de ações na parte superior. Selecione uma pasta para armazenar as substituições e permita o acesso do DevTools a ela.
Depois que as substituições forem configuradas, o DevTools acessará Sources > Overrides > Editor para permitir a substituição do conteúdo da Web.
Observe que os recursos substituídos são indicados com no painel Rede. Passe o cursor sobre o ícone para ver o que foi substituído.
Confira o que há de novo no DevTools para conhecer todos os detalhes e mais informações sobre o DevTools no Chrome 117.
E muito mais.
Claro, há muito mais.
O tão esperado valor
subgrid
paragrid-template-columns
egrid-template-rows
agora foi implementado no Chrome.Temos um teste de descontinuação do
WebSQL
e um teste para desenvolvedores para a descontinuação do eventounload
.A API
notRestoredReasons
para o bfcache, mencionada no vídeo sobre o Chrome 116, será iniciada nessa versão.
Leia mais
Isso aborda apenas alguns destaques importantes. Confira os links abaixo para ver outras mudanças no Chrome 117.
- Novidades do Chrome DevTools (117)
- Descontinuações e remoções do Chrome 117
- Atualizações do ChromeStatus.com para o Chrome 117
- 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.
Adriana Jara, Soy Soy. Assim que o Chrome 117 for lançado, estarei aqui para contar as novidades do Chrome.