Novidades no Chrome 127

Adriana Jara

Veja o que é necessário saber:

Meu nome é Adriana Jara. Vamos conferir 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, mesmo que o texto tenha o mesmo tamanho.

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

Se o site voltar para a fonte Times, a leitura fica muito mais difícil.

A propriedade CSS font-size-adjust ajuda a ajustar o tamanho das fontes substitutas para manter o valor de aspecto (altura das letras minúsculas dividida pelo tamanho da fonte) consistente, garantindo que o texto apareça de forma 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 que dizem "Este texto usa a fonte Verdana (14 px), que tem letras minúsculas relativamente grandes", "Este texto usa a fonte Times (14 px), que é difícil de ler em tamanhos pequenos" e "Este texto em 14 px da fonte Times é ajustado para o mesmo valor de aspecto da fonte Verdana, portanto, as fontes em letras minúsculas são normalizadas entre as duas fontes

Com o lançamento do font-size-adjust no Chrome, esse recurso passa a estar disponível na versão de referência. Leia os detalhes em O CSS font-size-adjust agora está na versão de referência.

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

A API Document Picture-in-Picture agora propaga as ativações do usuário entre a janela de Picture-in-Picture do documento e o aplicativo que a abre.

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 de APIs de ativação do usuário mais ergonômico, já que os manipuladores de eventos na janela de imagem em miniatura do documento geralmente são executados no contexto do abridor. Portanto, o contexto do abridor precisa ter acesso ao gesto do usuário.

Acesse Picture-in-Picture para qualquer elemento, não apenas <video> para mais detalhes.

Contêineres de rolagem com foco no 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 poderão ser focalizados programaticamente 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 contêiner de rolagem não tiver filhos que podem ser focalizados. Por exemplo, se o controle de rolagem já tiver um botão, o foco da guia vai pular o controle e focar diretamente no botão.

As práticas recomendadas de acessibilidade recomendam que todos os recursos estejam disponíveis usando um teclado. Os controles de rolagem focalizáveis do teclado facilitam a navegação de foco sequencial para acessar os controles de rolagem.

Essa mudança está sendo ativada para os usuários aos poucos ao longo do tempo para que possamos monitorar os problemas causados por ela. Portanto, alguns usuários talvez não vejam esse recurso ativado até a versão 130 ou até mais tarde.

Confira mais detalhes em Rolagens focalizáveis do teclado.

E muito mais.

Claro que há muito mais.

  • As transições simultâneas de visualização do mesmo documento em um frame principal e em um iframe de mesma origem estão disponíveis.

  • O texto alternativo gerado a partir do conteúdo do CSS agora oferece suporte a vários argumentos.

  • O painel de desempenho do DevTools agora captura eventos de mensagem do WebSocket e os mostra no rastro de desempenho.

Leia as notas da versão completas.

Leitura adicional

Isso cobre apenas alguns dos principais destaques. Confira os links a seguir para ver outras mudanças no Chrome 127.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Adriana Jara, e assim que o Chrome 127 for lançado, vou falar sobre as novidades do Chrome.