Descubra alguns dos recursos interessantes que foram lançados em navegadores da Web estáveis e Beta em maio de 2024.
Versões estáveis do navegador
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.
Funções de valor escalonado do CSS: round()
, mod()
e rem()
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.
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() .
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.
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.
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.
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()
.