Novidades do Chrome 133

Rachel Andrew

O que você precisa saber:

• A função avançada attr() do CSS permite tipos além de <string> e uso em todas as propriedades do CSS.
• Com as consultas de contêiner de estado de rolagem CSS, é possível usar consultas de contêiner para estilizar descendentes de contêineres com base no estado de rolagem deles.
• O CSS text-box, text-box-trim e text-box-edge permitem um controle mais preciso do alinhamento vertical do texto.
• E tem muito mais.

Função avançada attr() do CSS

Esse recurso adiciona à função attr() atual recursos especificados no CSS Nível 5. Isso permite tipos além de <string> e o uso em todas as propriedades CSS (além do suporte atual para o conteúdo do pseudoelemento).

No exemplo a seguir, o valor da propriedade color para div usa o valor do atributo data-color. Esse valor de atributo é analisado em um <color> usando attr() e type(). O valor substituto é definido como red.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

Saiba mais em O CSS attr() recebe uma atualização.

Consultas de contêiner de estado de rolagem do CSS

Use consultas de contêiner para estilizar descendentes de contêineres com base no estado de rolagem.

O contêiner de consulta é um contêiner de rolagem ou um elemento afetado pela posição de rolagem de um contêiner de rolagem. É possível consultar os seguintes estados:

• stuck: um contêiner posicionado de forma fixa fica preso a uma das bordas da caixa de rolagem.
• snapped: um contêiner alinhado com ajuste de rolagem está ajustado horizontal ou verticalmente.
• scrollable: indica se um contêiner de rolagem pode ser rolado em uma direção consultada.

Um novo tipo de contêiner: scroll-state permite que os contêineres sejam consultados. Exemplo:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

Saiba mais e confira algumas demonstrações em Consultas de estado de rolagem do CSS.

CSS text-box, text-box-trim e text-box-edge

A propriedade text-box-trim especifica os lados a serem cortados, acima ou abaixo, e a propriedade text-box-edge especifica como a borda deve ser cortada.

Essas propriedades permitem controlar o espaçamento vertical com precisão usando as métricas de fonte.

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Saiba como usar essas novas propriedades em CSS text-box-trim.

E muito mais.

Claro que há muito mais.

• Animation.overallProgressoferece uma representação conveniente e consistente de quanto uma animação avançou nas iterações, independentemente da natureza da linha do tempo.
• O Node.prototype.moveBefore permite mover elementos em uma árvore DOM sem redefinir o estado do elemento.
• A interface FileSystemObserver notifica os sites sobre mudanças no sistema de arquivos.
• O método PublicKeyCredential getClientCapabilities() permite determinar quais recursos do WebAuthn são compatíveis com o cliente do usuário.

Confira as notas da versão completa do Chrome 133 para mais detalhes sobre esses e muitos outros recursos novos do Chrome.

Leitura adicional

Isso abrange apenas alguns destaques importantes. Confira os links a seguir para mais mudanças no Chrome 133.

• Notas da versão do Chrome 133.
• Novidades do Chrome DevTools (133).
• Atualizações do ChromeStatus.com para o Chrome 133.
• Calendário de lançamentos do Chrome.

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.

Assim que o Chrome 133 for lançado, vamos contar tudo o que há de novo no Chrome!