Novidades no Chrome 126

Veja o que é necessário saber:

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

Transições de visualização de vários documentos para navegações de mesma origem

A API View Transitions permite criar transições visuais perfeitas entre visualizações diferentes. Agora, ela está disponível por padrão para navegações de mesma origem. Antes, ele só estava disponível para arquiteturas de aplicativos de página única.

Para implementar uma transição de visualização entre documentos, é necessário ativar as duas extremidades. Para fazer isso, use a regra de transição de visualização e defina o descritor de navegação como "auto".

As transições de visualização entre documentos usam os mesmos blocos de construção e princípios das transições de visualização no mesmo documento.

@view-transition {
  navigation: auto;
}

Acesse Transições suaves com a API View Transition para conferir detalhes e mais exemplos.

A API CloseWatcher foi reativada

Para elementos <dialog> e popover="", a API CloseWatcher facilita o processamento de solicitações de fechamento, como a tecla ESC em plataformas de computador ou o gesto de voltar no Android.

Esse recurso foi enviado originalmente no Chrome 120, mas foi desativado devido a uma interação inesperada com o elemento de caixa de diálogo. Ela foi reativada no Chrome 126 após melhorias para minimizar os problemas anteriores.

Para saber como usar o CloseWatcher, acesse a demonstração.

Extensão de ruído de gatilho da API Gamepad

O recurso de ruído de gatilho agora faz parte da API Gamepad. Ele melhora a experiência de jogos na Web para controles compatíveis.

trigger-rumble estende o GamepadHapticActuator, que é uma interface que representa o hardware no controlador projetado para fornecer feedback tátil ao usuário (se disponível). O trigger-rumble permite que aplicativos da Web que usam a API Gamepad também vibrem os gatilhos desses dispositivos.

Com o código abaixo, você pode verificar se a funcionalidade tem suporte no navegador e como acionar o recurso — trigger-rumble

// This assumes a `Gamepad` as the value of the `gamepad` variable.
const triggerRumble = (gamepad, delay = 0, duration = 100, weak = 1.0, strong = 1.0) => {
  if (!('vibrationActuator' in gamepad)) {
    return;
  }
  // Feature detection.
  if (!('effects' in gamepad.vibrationActuator) || !gamepad.vibrationActuator.effects.includes('trigger-rumble')) {
    return;
  }
  gamepad.vibrationActuator.playEffect('trigger-rumble', {
    // Duration in ms.
    duration: duration,
    // The left trigger (between 0 and 1).
    leftTrigger: leftTrigger,
    // The right trigger (between 0 and 1).
    rightTrigger: rightTrigger,
  });
};

Confira Jogar o jogo do dinossauro do Chrome com o gamepad para mais informações sobre como aproveitar ao máximo a API Gamepad.

E muito mais.

É claro que há muito mais.

Leia as notas da versão completas.

Leitura adicional

Isso inclui apenas alguns destaques importantes. Verifique os links a seguir para outras mudanças no Chrome 126.

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 127 for lançado, vou falar sobre as novidades do Chrome.