Descubra alguns dos recursos interessantes que chegaram aos 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 ficaram estáveis. Esta postagem analisa os novos recursos adicionados à plataforma Web.
Posicionamento de âncoras de CSS
O Chrome 125 inclui o posicionamento de âncoras de CSS. Isso permite vincular um elemento posicionado de forma absoluta a um ou mais elementos na página (as âncoras), de maneira declarativa, sem usar JavaScript. O posicionamento de âncoras funciona de maneira eficiente quando as âncoras 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 sua lista de opções de pop-up.
Saiba mais em Introdução à API CSS anchor posicionamento.
Funções de valor em etapas do CSS: round(), mod() e rem()
O Chrome 125 também inclui as funções de valor em degraus, o que significa que essas funções agora estão
recém-disponíveis de referência. As funções de valor em degraus, round(), mod() e rem(), transformam um determinado valor de acordo com outro "valor de etapa".
Saiba mais em As funções matemáticas de valor em degraus do CSS agora estão no valor de referência de 2024.
A função light-dark()
Além do valor de referência recém-disponível, está a função de cor CSS light-dark(),
que está no Safari 17.5.
light-dark() é uma função que aceita dois argumentos, ambos precisam ser um <color>. Uma das duas é escolhida dependendo do esquema de cores usado.
- Se o esquema de cores usado for
lightou desconhecido, o valor calculado 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 CSS com light-dark() .
API Screen Wake Lock
O Firefox 126 tem a API Screen Wake Lock, outro recurso que agora faz parte do valor de referência recém-disponível. Essa API fornece uma maneira de evitar que o dispositivo escureça e bloqueie a tela.
Descubra como usar esse recurso em Manter ativado com a API Screen Wake Lock.
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 subjacentes 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 impossível de gerenciar.
Esse recurso está no Chrome 125. A Intel liderou o trabalho de design e implementação dessa API, que vai permitir que apps de videoconferência equilibrem recursos e desempenho de forma dinâmica.
Leia a documentação da API Compute Pressure.
A regra @starting-style
O Safari 17.5 inclui a regra @starting-style. Essa at-rule CSS permite aplicar um estilo que o navegador pode consultar antes de o elemento ser aberto na página, conforme necessário para animações de entrada.
A regra @starting-style é um dos recursos abordados em
Quatro novos recursos CSS para facilitar as animações de entrada e saída.
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. É um ótimo momento para testar novos recursos ou remoções que podem afetar seu site antes do lançamento ao público. As novas Betas são o Firefox 127 e o Chrome 126. Essas versões trazem muitos recursos excelentes para a plataforma. Confira as notas da versão para saber todos os detalhes. Veja alguns destaques do jogo.
O Chrome 126 inclui transições de visualização entre documentos para navegações na mesma origem. Antes, era preciso reestruturar 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 da mesma origem.
O Firefox 127 inclui outros métodos de conjunto de JavaScript: intersection(), union(), difference(), symmetricDifference(), isSubsetOf(), isSupersetOf() e isDisjointFrom().