Novidades do Chrome 111

Adriana Jara

Veja o que é necessário saber:

• Crie transições aprimoradas no seu app de página única com a API View Transitions.
• Leve as cores para o próximo nível com suporte para o CSS Color Level 4.
• Descubra novas ferramentas no painel de estilo para aproveitar ao máximo a nova funcionalidade de cores.
• E tem muito mais.

Meu nome é Adriana Jara. Vamos conferir as novidades para desenvolvedores no Chrome 111.

API View Transitions.

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

A transição de visualização padrão é um cross fade, e 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.

Quando isso for concluído, o callback transmitido para .startViewTransition() será chamado. É aí 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 a outros modelos também está sendo implementado.

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

Nível 4 de cor do CSS.

Com o nível 4 de cores do CSS, o CSS agora oferece suporte a telas de alta definição, especificando cores de gamas de alta definição e oferecendo espaços de cores com especializações.

Resumindo, isso significa 50% mais cores para você escolher! Você achou que 16 milhões de cores soavam muito. Eu também.

A implementação inclui a função color(), que pode ser usada para qualquer espaço de cores que especifique cores com canais R, G e B. color() recebe primeiro um parâmetro de espaço de cor, depois uma série de valores de canal para RGB e, opcionalmente, alguns valores Alfa.

Confira 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 mais documentação sobre como aproveitar ao máximo as cores de alta definição usando o CSS.

Novo DevTools de cores.

As ferramentas de desenvolvimento têm novos recursos para oferecer suporte à especificação de nível 4 de cores do CSS.

O painel Styles agora oferece suporte aos 12 novos espaços de cores e 7 novas gamas descritas na especificação. Confira exemplos de definições de cores CSS com color(), lch(), oklab() e color-mix().

Ao usar color-mix(), que permite misturar uma porcentagem de uma cor em outra, é possível conferir a saída de cor final no painel Computed

Além disso, o seletor de cores oferece suporte a todos os novos espaços de cores com mais recursos. Por exemplo, clique na amostra de cor de color(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.

O seletor de cores também oferece suporte à conversão de cores entre formatos.

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

E muito mais.

Claro que há muito mais.

• O CSS adicionou funções trigonométricas, unidades de fonte raiz adicionais e expandiu o pseudoseletor da n-ésima filha.
• 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.

Leitura adicional

Isso inclui apenas alguns destaques importantes. Confira os links abaixo para ver outras mudanças no Chrome 111.

• Novidades do Chrome DevTools (111)
• Descontinuações e remoções do Chrome 111
• Atualizações do ChromeStatus.com para o Chrome 111
• Lista de mudanças no repositório de origem do Chromium
• Agenda de lançamentos do Chrome

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 112 for lançado, estarei aqui para contar as novidades do Chrome!