Novidades do Chrome 131

Mariko Kosaka
X

Veja o que é necessário saber:

Meu nome é Marik Kosaka. Vamos conferir as novidades para desenvolvedores no Chrome 131.

Herança de destaque do CSS

A herança de destaque do CSS está mudando para as pseudoclasses ::selection e ::target-text. Isso cria um modelo mais intuitivo para a herança de estilo e se alinha com as pseudoclasses ::highlight, ::spelling-error e ::grammar-error adicionadas recentemente.

Pense neste snippet de código com texto em negrito.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

Nas versões anteriores do Chrome, quando você selecionava um texto em negrito, a cor dele não mudava para azul, apesar de a pseudoclasse ::selection estar definida no elemento de parágrafo pai.

Texto destacado em rosa

Isso ocorre porque ele foi implementado usando o modelo de herança de elementos de origem. Portanto, a pseudoclasse ::selection, nesse caso, só corresponde a elementos com a classe azul, que o elemento dentro deste parágrafo não tem.

Com a mudança na herança de destaque, quando o mesmo texto é selecionado no Chrome 131, a cor dele muda para azul.

Texto em destaque em azul

Há mais algumas mudanças relacionadas a isso. Confira Mudanças de herança para estilização de seleção de CSS, escrito por Stephen Chenney, da Igalia, que trabalhou nesse recurso.

Melhorias de estilo em <details> e <summary>

Agora você tem mais opções para estilizar a estrutura dos elementos <details> e <summary> para criar widgets de abertura ou acordeão.

As mudanças introduzidas nesta versão permitem o uso da propriedade display e adicionam um pseudoelemento ::details-content para estilizar a parte que se expande e se contrai.

Historicamente, era impossível mudar o tipo de exibição do elemento details. Essa restrição foi relaxada, permitindo que você use layouts flexíveis ou de grade.

Neste exemplo exclusivo de acordeão, feito de vários elementos details, quando um deles é aberto, o conteúdo é colocado ao lado do summary.details

Widget de acordeão com layout flexível

Isso é feito usando um layout flexível no elemento details. Você também pode testar outros padrões de layout com outros valores de exibição, como grid.

Confira o artigo Mais opções de estilo para <details> (em inglês) para uma explicação mais detalhada.

@page caixas de margem

Foi adicionado suporte a caixas de margem de página ao imprimir um documento da Web ou exportá-lo como PDF.

As caixas de margem da página permitem definir o conteúdo na área de margem de uma página. Assim, você pode fornecer cabeçalhos e rodapés personalizados em vez de usar os cabeçalhos e rodapés integrados gerados pelo navegador.

A margem da página é definida usando a regra @page no CSS.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

A aparência e o conteúdo de uma caixa de margem são especificados com propriedades CSS dentro das regras at que representam as 16 caixas de margem usando conteúdo gerado.

Para a numeração de páginas, os contadores também são aceitos com page para o número de página atual e pages para o número total de páginas.

Confira o artigo da Rachel Adicionar conteúdo às margens das páginas da Web quando impresso usando CSS para uma explicação mais detalhada.

E muito mais.

E, claro, há muito mais.

  • Suporte a recursos SVG externos para "clip-path", "fill", "stroke" e "marker".
  • A WebHID é ativada em contextos de worker dedicados.
  • Controle o comportamento do emoji com a propriedade CSS font-variant-emoji.

Leitura adicional

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

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 é Mariko Kosaka. Assim que o Chrome 132 for lançado, vamos informar as novidades do Chrome.