Mudanças de herança para o estilo de seleção de CSS

Stephen Chenney

Publicado em 8 de outubro de 2024

A partir do Chrome 131, a herança de destaque do CSS vai mudar para as pseudoclasses ::selection e ::target-text. Isso serve para criar um modelo mais intuitivo herança e se alinham ao ::highlight, ::spelling-error adicionado recentemente e pseudoclasses ::grammar-error. Esta postagem explica a mudança, que não deve causar um impacto visível na maioria dos sites.

Estilo da seleção

Dar estilo à aparência do texto selecionado pode transmitir significado aos usuários, como o propósito do conteúdo selecionado ou a incapacidade de selecionar o texto. GitHub, por exemplo, cores selecionadas ao código de forma diferente do diretório selecionado na estrutura dos preços.

O CSS oferece suporte a estilos de seleção com o pseudoelemento ::selection, um de um conjunto de pseudoelementos conhecidos como pseudoelementos de destaque. Esses pseudoelementos controlam como o texto aparece em várias ações do usuário, do navegador ou do script. Além da seleção, é possível estilizar a ortografia erros (::spelling-error), erros gramaticais (::grammar-error), texto incorporado ao URL metas (::target-text) e destaques gerados pelo script (::highlight).

Como acontece com qualquer coleção de propriedades CSS, o comportamento de herança é um uma consideração importante ao criar um site. Em geral, os desenvolvedores esperam que as propriedades CSS sejam herdadas pela árvore de elementos DOM (por exemplo, font) ou que não sejam herdadas (por exemplo, background).

Mudanças no comportamento de seleção no Chrome 131

Considere este fragmento de documento:

p {
  color: red;
}

.blue::selection {
  color: blue;
}

<p class="blue">Some <em>emphasized</em> text that one would expect to be blue</p>

As declarações de estilo do fragmento modificam a cor do texto selecionado, com uma regra correspondendo a todos os elementos e outra correspondendo aos que correspondem à classe "blue". Quando selecionado no Chrome 130 ou anterior, este é o resultado:

Quando selecionado no Chrome 131, o resultado muda para este:

O que mudou? O comportamento de herança das propriedades de seleção tem foram historicamente implementadas por meio da herança de elemento de origem, em que a seleção usa as propriedades de um ::selection que corresponde ao elemento que está sendo selecionado. As versões 130 e anteriores do Chrome usam esse modelo, em que o texto em negrito não tem ::selection correspondente porque o .blue::selection só corresponde a elementos com a classe "blue", que o elemento <em> não tem.

O Chrome 131 tem um novo comportamento, em que os elementos herdam o comportamento da seleção de seus pais. No exemplo anterior, o elemento <em> não tem ::selection. correspondente, para que ele herde as cores de seleção do elemento <p>. Isso é também chamada de herança de destaque de CSS, e é possível testar isso antes Versões do Chrome ativando os recursos experimentais da plataforma da Web no chrome://flags.

Sites que dependem de propriedades de seleção que não são herdadas provavelmente vão notar mudanças na aparência do texto selecionado, mas evidências de relatórios de bugs sugerem que há poucos casos de uso para esse comportamento.

As propriedades personalizadas de CSS para seleção ainda funcionam

Muitos sites simulam a herança de destaque de CSS com o uso de CSS personalizado propriedades. As propriedades personalizadas são herdadas pela árvore de elementos, fornecendo o "herdar do pai" com um snippet de código como este:

:root {
   --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text that is blue</p>

Esse é o resultado quando selecionado no Chrome 130 e 131:

Aqui, cada elemento herda algum valor para a propriedade --selection-color pela árvore de elementos, e essa cor é usada quando o texto é selecionado. Os elementos com a classe .blue e os descendentes deles ficam azuis quando selecionados, e os outros elementos ficam verdes claros. Muitos sites usam essa técnica, e esse é o método recomendado no Stack Overflow.

Para manter a compatibilidade, o modelo de herança de destaque do CSS especifica que ::selection (e outros pseudoelementos de destaque de CSS) herdam a propriedade personalizada valores do elemento de origem (o elemento no qual estão sendo aplicados Os sites que usam esse método não serão afetados pelas mudanças no Chrome 131,

As propriedades personalizadas definidas no próprio pseudoelemento ::selection são ignoradas. para evitar comportamentos de herança competitivos. É necessário definir as propriedades no elemento e, em seguida, fazer referência a elas no pseudoelemento.

Os Seletores universais para ::selection desativam a herança de destaque

Os sites que não usam propriedades personalizadas do CSS podem ter usado um seletor universal para definir a cor do texto selecionado. Assim como o CSS a seguir, por exemplo:

::selection /* = *::selection (universal) */ {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

Este é o resultado quando selecionado no Chrome 130 (e versões anteriores) e no Chrome 131 (e posteriores):

A herança de destaque de CSS não faz com que o segundo texto enfatizado herde azul em relação ao pai, porque o seletor universal corresponde ao elemento <em> e aplica a cor de destaque universal, verde-claro.

Para aproveitar os benefícios da herança de destaque do CSS, mude o seletor universal para corresponder apenas à raiz, que será herdada pelos descendentes:

:root::selection {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

O resultado no Chrome 131 é semelhante a este:

Se o site modificar as cores de seleção, mas não usar propriedades personalizadas, é provável que você tenha um seletor universal para o pseudoelemento ::selection. A boa notícia é que seu site não será afetado por essa mudança no Chrome, mas você perderá os benefícios ergonômicos da herança de destaque.

O estilo do ::target-text também está mudando

Todos os comportamentos e mudanças descritos aqui se aplicam ao pseudoelemento ::target-text assim como a ::selection. Os casos de uso para mais de um estilo de texto de destino em um único site são limitados, e o recurso é bastante novo, portanto, é muito improvável que o comportamento do ::target-text mude no seu site.

Qual é o motivo da mudança?

Quando os outros pseudoelementos de destaque estavam em desenvolvimento, o CSS Working Grupo resolvido para implementar herança com o modelo de herança de destaque. Esse já era o método na especificação da ::selection pseudoelemento, mas os navegadores não o implementaram. A não seleção pseudoelementos usam herança de destaque, em que o pseudoelemento é herdado como se fosse uma propriedade. Ou seja, os elementos herdam o destaque pseudoelementos do pai do documento.

Para manter a consistência em todos os pseudos de destaque, o grupo de trabalho do CSS reiterou o suporte à herança de destaque para ::selection, e os navegadores estão trabalhando para lançar o novo comportamento, tentando não quebrar os sites existentes.

Faça um teste

O CodePen a seguir demonstra as mudanças. Faça um teste no Chrome 131.