Novidades do Chrome 131

Mariko Kosaka
X

Veja o que é necessário saber:

Sou 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 destacado.

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ê seleciona um texto destacado, a cor do texto não mudava para azul, apesar da configuração da pseudoclasse ::selection 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. Nesse caso, a pseudoclasse ::selection só corresponde a elementos com a classe azul, que o elemento dentro desse 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.

Antes, 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 da Bramus Mais opções para definir o estilo <details> 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 que você defina o conteúdo na área da 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".
  • O WebHID é ativado dentro de contextos de worker dedicados.
  • Controlar o comportamento de emojis com a propriedade CSS font-variant-emoji.

Leitura adicional

Isso inclui apenas alguns destaques importantes. Consulte os links a seguir para conhecer 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.