Plataforma da Web novidade em junho

Descubra alguns dos recursos interessantes que foram lançados em navegadores da Web estáveis e Beta em junho de 2024.

Em junho de 2024, o Firefox 127 e o Chrome 126 se tornaram estáveis. Esta postagem aborda os novos recursos adicionados à plataforma da Web.

Métodos de conjunto do JavaScript

Os conjuntos são uma estrutura de dados essencial em qualquer linguagem de programação. Agora você pode usar os métodos integrados do JavaScript para realizar operações de conjunto. Os seguintes métodos de conjunto agora estão disponíveis no Firefox 127 e passaram a fazer parte da versão de referência:

Compatibilidade com navegadores

  • Chrome: 122
  • Edge: 122.
  • Firefox: 127.
  • Safari: 17.

Origem

Para saber mais, leia Os métodos Set de JavaScript agora fazem parte da meta.

API Async Clipboard

A API Clipboard agora tem suporte total no Firefox 127. O Firefox agora oferece suporte à interface ClipboardItem, além dos métodos read() e write() da interface da área de transferência. Saiba mais sobre a API Clipboard em Como desbloquear o acesso à área de transferência.

Compatibilidade com navegadores

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 127.
  • Safari: 13.1.

Origem

Interpolação de cores em gradientes CSS

Os gradientes CSS são especificados para aceitar um <color-interpolation-method>, e isso agora é aceito no Firefox, tornando-o interoperável em todos os principais mecanismos. Agora é possível, por exemplo, especificar um linear-gradient() usando o sistema de cores hsl e uma interpolação mais longa.

.longer {
 
background: linear-gradient(90deg in hsl longer hue, red, blue);
}

Compatibilidade com navegadores

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 127.
  • Safari: 16.2.

Transições de visualização entre documentos

Antes, você precisava reprojetar seu site para um SPA para usar a API View Transitions. Entretanto, esse não é mais o caso. No Chrome 126, as transições de visualização agora são ativadas por padrão para navegações de mesma origem. É possível criar uma transição de visualização entre dois documentos diferentes de mesma origem.

Para permitir uma transição de visualização de vários documentos, as duas extremidades precisam ativar o recurso. Para fazer isso, use a regra @view-transition e defina o descritor de navegação como auto.

@view-transition {
 
navigation: auto;
}

Compatibilidade com navegadores

  • Chrome: 126
  • Borda: 126.
  • Firefox: incompatível.
  • Prévia da tecnologia do Safari: compatível.

Saiba mais na documentação sobre transições de visualização entre documentos.

A extensão trigger-rumble da API Gamepad

O Chrome 126 estende a interface GamepadHapticActuator para expor o recurso trigger-rumble na Web para gamepads compatíveis. Essa extensão permite que aplicativos da Web que usam a API Gamepad também vibrem os gatilhos dos dispositivos de gamepad que têm essa funcionalidade.

Versões do navegador Beta

As versões Beta do navegador oferecem uma prévia do que vai estar na próxima versão estável do navegador. É um ótimo momento para testar novos recursos ou remoções que podem afetar seu site antes que o mundo receba a versão. As novas versões Beta são o Firefox 128, o Chrome 127, o Safari 18 e o Safari 17.6. Essas versões trazem muitos recursos excelentes para a plataforma. Confira as notas da versão para saber todos os detalhes. Estes são alguns destaques.

O Safari 17.6 é uma versão com correções de recursos atuais. O Safari 18 tem vários recursos novos e interessantes, incluindo consultas de contêiner de estilo, a API de transição de visualização para apps de página única e suporte à palavra-chave safe em propriedades flexbox.

O Chrome 127 inclui a propriedade CSS font-size-adjust, a capacidade de especificar texto alternativo no conteúdo gerado como um número arbitrário de elementos e a capacidade de adicionar informações de capítulos individuais em MediaMetaData.

O Firefox 128 inclui propriedades e valores do CSS, tornando esse recurso disponível como padrão. Use @property para definir um type e um valor substituto para as propriedades personalizadas do CSS.