Novidades do Chrome 133

Rachel Andrew

O que você precisa saber:

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

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

No exemplo abaixo, 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 um upgrade.

Consultas de contêiner de estado de rolagem do CSS

Use consultas de contêiner para definir o estilo de descendentes de contêineres com base no estado de rolagem deles.

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. Os seguintes estados podem ser consultados:

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

Um novo container-type: 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 da 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 no CSS text-box-trim.

E muito mais.

Claro que há muito mais.

  • O Animation.overallProgress fornece uma representação conveniente e consistente de até onde uma animação avançou nas iterações, independentemente da natureza da linha do tempo.
  • 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 getClientCapabilities() PublicKeyCredential permite determinar quais recursos da WebAuthn são compatíveis com o cliente do usuário.

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

Leitura adicional

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

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 informar as novidades do Chrome.