Esta página foi traduzida pela API Cloud Translation.

Novidades no Chrome 127

Adriana Jara

Veja o que é necessário saber:

O font-size-adjust ajuda a melhorar a legibilidade das fontes substitutas.
As ativações de usuários agora são propagadas entre os documentos picture-in-picture e a abertura.
Os contêineres de rolagem agora são focalizáveis pelo teclado por padrão.
E tem muito mais.

Sou Adriana Jara. Vamos nos aprofundar e conhecer as novidades para desenvolvedores no Chrome 127.

CSS `font-size-adjust`

A legibilidade do site pode diminuir quando a família de fontes de primeira escolha não está disponível e a fonte substituta tem um valor de aspecto significativamente diferente.

A imagem a seguir mostra a diferença entre as fontes Verdana e Times, embora o texto tenha o mesmo tamanho.

Linhas de texto com o texto: "Este texto usa a fonte verdana (14px), que tem letras minúsculas relativamente grandes" e "Isto usa a fonte Times (14px), que é difícil de ler em tamanhos pequenos"

Se o site usar a fonte Times, a leitura será muito difícil.

A propriedade CSS font-size-adjust ajuda a ajustar o tamanho das fontes substitutas para manter o valor da proporção (altura de letras minúsculas dividida pelo tamanho da fonte) consistente, garantindo que o texto seja semelhante, independentemente da fonte usada.

Na imagem a seguir, o uso de "font-size-adjust" mantém a legibilidade entre as fontes Verdana e Times.

   font-size-adjust: 0.545;

Linhas de texto com a mensagem "Este texto usa a fonte verdana (14 px), que tem letras minúsculas relativamente grandes", "Este usa a fonte Times (14 px), que é difícil de ler em tamanhos pequenos" e "Este texto na fonte Times de 14px é ajustado para o mesmo valor de aspecto que a fonte Verdana, para que fontes minúsculas sejam normalizadas nas duas fontes

Com o lançamento do font-size-adjust no Chrome, esse recurso se torna o valor de referência recentemente disponível. Leia os detalhes em O CSS "font-size-adjust" agora está no valor de referência.

Documento picture-in-picture: propagar ativação do usuário

A API Document Picture-in-Picture agora propaga ativações do usuário entre a janela picture-in-picture do documento e a abertura.

Acesse a demonstração da propagação de ativação por gesto do usuário e veja as mudanças na cor de fundo da página quando uma ativação do usuário é detectada. O gesto do usuário é propagado em ambos os contextos, alterando o plano de fundo de ambas as janelas.

Isso torna as ativações do usuário em uma janela picture-in-picture do documento utilizáveis dentro da janela de abertura e vice-versa. Essa mudança torna o uso das APIs controladas por ativação do usuário mais ergonômico, já que, muitas vezes, os manipuladores de eventos na janela picture-in-picture do documento são executados no contexto da abertura. Portanto, esse contexto precisa de acesso ao gesto do usuário.

Para mais detalhes, acesse Picture-in-picture de qualquer elemento, não apenas <video>.

Contêineres de rolagem focalizáveis do teclado.

Os contêineres de rolagem que se tornam focalizáveis pelo teclado é importante para tornar os controles de rolagem e o conteúdo dentro deles mais acessíveis a todos os usuários.

A partir de agora, os controles de rolagem têm foco em cliques e têm foco programático por padrão. Antes dessa mudança, um elemento de rolagem só podia ser focado na guia se o tabindex fosse definido explicitamente como 0 ou maior.

Esse comportamento só acontece se o botão de rolagem não tiver filhos focalizáveis. Por exemplo, se o botão já tiver um botão, o foco da guia vai pular o botão e focar diretamente no botão.

As práticas recomendadas de acessibilidade recomendam que todos os recursos estejam disponíveis em um teclado. Por padrão, os controles de rolagem focalizáveis do teclado facilitam o uso da navegação sequencial por foco para acessar os controles de rolagem.

Confira mais detalhes em Rolagens focalizáveis do teclado.

E muito mais.

É claro que há muito mais.

Transições simultâneas de visualização de um mesmo documento em um frame principal e iframe de mesma origem já estão disponíveis.
O texto alternativo gerado a partir do conteúdo CSS agora oferece suporte a vários argumentos.
O painel de desempenho do DevTools agora captura eventos de mensagens do WebSocket e os exibe no rastreamento de desempenho.

Leia as notas da versão completas.

Leitura adicional

Isso cobre apenas alguns dos principais destaques. Verifique os links a seguir para mudanças adicionais no Chrome 127.

Para ficar por dentro das novidades, inscreva-se no Canal Chrome Developers no YouTube, e você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

Adriana Jara! Assim que o Chrome 127 for lançado, estarei aqui para contar as novidades do Chrome!