Plataforma da Web novidade em maio

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

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

Posicionamento de âncora do CSS

O Chrome 125 inclui o posicionamento de âncora do CSS. Isso permite que você amarre um elemento posicionado de forma absoluta a um ou mais outros elementos na página (as âncoras) de forma declarativa, sem usar JavaScript. O posicionamento da âncora funciona bem quando elas são roláveis. Um caso de uso comum é posicionar um pop-up, como uma dica, ao lado do elemento que o invocou ou um menu de seleção e a lista de opções do pop-up.

Saiba mais em Introdução à API de posicionamento de âncora CSS.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

Funções de valor escalonado do CSS: round(), mod() e rem()

O Chrome 125 também inclui as funções de valor escalonado, o que significa que essas funções agora estão disponíveis como padrão. As funções de valor escalonado, round(), mod() e rem(), transformam um valor específico de acordo com outro "valor de etapa".

Saiba mais em As funções matemáticas de valor escalonado do CSS agora estão na versão de referência 2024.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: 118.
  • Safari: 15.4.

Source

A função light-dark()

A função de cor CSS light-dark(), que está no Safari 17.5, também está disponível na versão de referência.

light-dark() é uma função que aceita dois argumentos, ambos precisam ser <color>. Um dos dois é escolhido dependendo do esquema de cores usado.

  • Se o esquema de cores usado for light ou desconhecido, o valor computado do primeiro valor será retornado.
  • Se o esquema de cores usado for dark, o valor calculado da segunda cor será retornado.

Leia mais em Cores dependentes do esquema de cores do CSS com light-dark() .

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

API Screen Wake Lock

A API Screen Wake Lock, outro recurso que agora faz parte da baseline recém-disponível, está disponível no Firefox 126. Essa API oferece uma maneira de impedir que o dispositivo escureça e bloqueie a tela.

Saiba como usar esse recurso em Manter a tela ativa com a API Screen Wake Lock.

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

A API Compute Pressure

A API Compute Pressure oferece estados de alto nível que representam a carga da CPU no sistema. Ele permite que a implementação use as métricas de hardware corretas para garantir que os usuários possam aproveitar toda a capacidade de processamento disponível, desde que o sistema não esteja sob estresse incontrolável.

Esse recurso está no Chrome 125. A Intel liderou o trabalho de design e implementação dessa API, que permite que os apps de videoconferência balancem dinamicamente os recursos e o desempenho.

Leia a documentação da API Compute Pressure.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

Regra @starting-style

O Safari 17.5 inclui a regra @starting-style. Essa regra CSS permite aplicar um estilo que o navegador pode procurar antes que o elemento seja aberto na página, conforme necessário para animações de entrada.

A regra @starting-style é um dos recursos abordados em Quatro novos recursos do CSS para animações de entrada e saída suaves.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Versões Beta do navegador

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 Firefox 127 e Chrome 126. Essas versões trazem muitos recursos excelentes para a plataforma. Confira as notas da versão para saber todos os detalhes. Confira alguns destaques.

O Chrome 126 inclui transições de visualização entre documentos para navegações de mesma origem. Antes, você precisava reprojetar seu site para um SPA para usar a API View Transitions. Entretanto, esse não é mais o caso. 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 com a mesma origem.

O Firefox 127 inclui outros métodos de conjunto do JavaScript: intersection(), union(), difference(), symmetricDifference(), isSubsetOf(), isSupersetOf() e isDisjointFrom().