Esta página foi traduzida pela API Cloud Translation.

Novidades do Chrome 111

Adriana Jara

Veja o que é necessário saber:

Crie transições refinadas no app de página única com a API View Transitions.
Eleve as cores a um novo patamar com a compatibilidade com o CSS Color Level 4.
Descubra novas ferramentas no painel de estilo para aproveitar ao máximo a nova funcionalidade de cores.
E há muito mais.

Meu nome é Adriana Jara. Vamos nos aprofundar e ver as novidades para os desenvolvedores no Chrome 111.

API View Transitions.

Criar transições suaves na Web é uma tarefa complexa. A API View Transitions existe para simplificar a criação de transições refinadas, criando snapshots de visualizações e permitindo que o DOM mude sem qualquer sobreposição entre estados.

Transições criadas com a API View Transition. Teste o site de demonstração: é necessário ter o Chrome 111 ou mais recente.

A transição de visualização padrão é um cross-fade. O snippet a seguir implementa essa experiência.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Quando .startViewTransition() é chamado, a API captura o estado atual da página.

Depois disso, o callback transmitido para .startViewTransition() será chamado. É aqui que o DOM é alterado. Em seguida, a API captura o novo estado da página.

A API foi lançada para apps de página única (SPAs), mas o suporte para outros modelos também está sendo implementado.

Essa API tem muitos detalhes. Saiba mais em nosso artigo com exemplos e detalhes ou consulte a documentação de transições de visualização no MDN.

Nível 4 de cores CSS.

Com o nível de cor CSS 4, o CSS agora oferece suporte a telas de alta definição, especificando cores de gamas de alta definição, além de oferecer espaços de cores com especializações.

Em poucas palavras, significa 50% mais cores para você escolher! Você achou que 16 milhões de cores soavam muito. Também pensei nisso.

Uma série de imagens é mostrada fazendo a transição entre gamas amplas e estreitas, ilustrando a vívida da cor e os efeitos dela.
Faça um teste

A implementação inclui a função color() e pode ser usada para qualquer espaço de cores que especifique cores com os canais R, G e B. color() usa um parâmetro de espaço de cores primeiro e, em seguida, uma série de valores de canal para RGB e, opcionalmente, um valor alfa.

Aqui estão alguns exemplos de como usar a função de cor com diferentes espaços de cor.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Confira este artigo para acessar a documentação e aproveitar ao máximo as cores de alta definição usando CSS.

Novo DevTools de cores.

O Devtools tem novos recursos compatíveis com a especificação CSS de nível 4 de cores.

O painel Estilos agora é compatível com os 12 novos espaços de cor e as 7 novas gamas descritas na especificação. Veja exemplos de definições de cores CSS com color(), lch(), oklab() e color-mix().

Exemplos de definições de cores CSS.

Ao usar color-mix(), que permite misturar uma porcentagem de uma cor com outra, você pode conferir a saída de cor final no painel Calculado resultado da mistura de cores no painel Computed.

Além disso, o seletor de cores oferece suporte a todos os novos espaços de cor com mais recursos. Por exemplo, clique na amostra de cor de cor(display-p3 1 0 1). Uma linha de limite de gama também foi adicionada, distinguindo entre as gamas sRGB e display-p3 para uma compreensão mais clara da gama da cor selecionada. Uma linha de limite de gama.

O seletor de cores também permite converter cores entre formatos de cores.

Converter cores entre formatos de cores.

Confira esta postagem para mais informações sobre a depuração de cores e outros novos recursos no DevTools.

E muito mais.

Claro, há muito mais.

O CSS adicionou funções trigonométricas, outras unidades de fonte raiz e ampliou o pseudoseletor do enésimo filho.
A API Document Picture in Picture está em teste de origem
As ações previousslide e nextslide agora fazem parte da API Media Session. Confira a demonstração aqui.

Novidades do Chrome 111

API View Transitions.

Nível 4 de cores CSS.

Novo DevTools de cores.

E muito mais.

Leia mais

Fazer inscrição