Änderungen bei der Übernahme von Stilen für Preisvergleichsportal-Auswahl

Stephen Chenney

Veröffentlicht: 8. Oktober 2024

Ab Chrome 131 ändert sich die Übernahme von CSS-Highlights für die Pseudoklassen ::selection und ::target-text. Dies dient dazu, ein intuitiveres Modell für Übernahme und Anpassung an die kürzlich hinzugefügte ::highlight, ::spelling-error und ::grammar-error. In diesem Beitrag wird die Änderung erläutert. deutliche Auswirkungen auf die meisten Websites haben.

Auswahlstil

Durch das Stilisieren des ausgewählten Texts kann Nutzern ein bestimmter Zweck vermittelt werden, z. B. der Zweck der ausgewählten Inhalte oder die Unmöglichkeit, den Text überhaupt auszuwählen. In GitHub wird beispielsweise ausgewählter Code anders als die ausgewählte Verzeichnisstruktur dargestellt.

CSS unterstützt das Auswählen von Elementen mit dem Pseudoelement ::selection. Es gehört zu einer Reihe von Pseudoelementen, die als Pseudoelemente für Hervorhebungen bezeichnet werden. Mit diesen Pseudoelementen wird festgelegt, wie Text bei verschiedenen von Nutzern, Browsern oder Scripts ausgelösten Aktionen angezeigt wird. Neben der Auswahl können Sie auch die Rechtschreibung Fehler (::spelling-error), Grammatikfehler (::grammar-error), in URL eingebetteter Text Ziele (::target-text) und per Skript generierte Highlights (::highlight).

Wie bei jeder Sammlung von CSS-Eigenschaften ist das Übernahmeverhalten beim Entwerfen einer Website ein wichtiger Faktor. Entwickler erwarten im Allgemeinen CSS Eigenschaften, die entweder über die DOM-Elementstruktur übernommen werden (z. B. font) oder überhaupt nicht übernommen wurde (z. B. background).

Änderungen am Auswahlverhalten in Chrome 131

Sehen wir uns dieses Dokumentfragment an:

p {
  color: red;
}

.blue::selection {
  color: blue;
}

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

Die Stildeklarationen des Fragments ändern die Farbe des ausgewählten Texts. Dabei entspricht eine Regel allen Elementen und eine Regel den Elementen mit der Klasse "blue". Wenn Sie diese Option in Chrome 130 oder niedriger auswählen, passiert Folgendes:

Wenn diese Option in Chrome 131 ausgewählt wird, ändert sich das Ergebnis so:

Was hat sich geändert? Das Vererbungsverhalten von Auswahleigenschaften wurde bisher durch Übernahme des Ursprungselements implementiert. Dabei werden für die Auswahl die Properties aus einem ::selection verwendet, das mit dem ausgewählten Element übereinstimmt. Chrome bis Version 130 verwenden dieses Modell, bei dem der Für den hervorgehobenen Text gibt es keine Übereinstimmung mit ::selection, da der .blue::selection stimmt nur Elemente mit der Klasse "blue" überein, die dem Element <em> fehlt.

In Chrome 131 wird ein neues Verhalten aktiviert, bei dem Elemente das Auswahlverhalten ihres übergeordneten Elements übernehmen. Im vorherigen Beispiel hat das <em>-Element kein übereinstimmendes ::selection. Daher werden die Auswahlfarben des <p>-Elements übernommen. Diese Funktion wird als CSS-Hervorhebungsübernahme bezeichnet. Sie können sie in früheren Chrome-Versionen ausprobieren, indem Sie in chrome://flags die experimentellen Webplattform-Funktionen aktivieren.

Bei Websites, die auf Auswahleigenschaften ohne Übernahmen angewiesen sind, werden wahrscheinlich Änderungen vorgenommen angezeigt wird. Fehlerberichte deuten darauf hin, dass es sind nur wenige Anwendungsfälle für ein solches Verhalten.

Benutzerdefinierte CSS-Eigenschaften für die Auswahl funktionieren weiterhin

Viele Websites simulieren die CSS-Übernahme von Highlights durch benutzerdefinierte CSS-Eigenschaften. Benutzerdefinierte Properties werden über den Elementbaum übernommen. Das Ergebnis „vom übergeordneten Element übernehmen“ wird mit einem Code-Snippet wie diesem erzielt:

: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>

Das Ergebnis, wenn sowohl in Chrome 130 als auch in Chrome 131 ausgewählt wird:

Hier übernimmt jedes Element einen Wert für das Attribut --selection-color durch die Elementstruktur. Diese Farbe wird beim Auswählen von Text verwendet. Elemente mit der Klasse .blue und deren Nachfolgerelemente sind blau, wenn sie ausgewählt werden, und andere -Elemente hellgrün sind. Viele Websites verwenden diese Methode, die auch auf Stack Overflow empfohlen wird.

Zur Wahrung der Kompatibilität wird im Modell für die Übernahme von CSS-Highlights festgelegt, dass ::selection (und andere CSS-Highlight-Pseudoelemente) benutzerdefinierte Attributwerte von ihrem ursprünglichen Element (dem Element, auf das sie angewendet werden) übernehmen. Websites, die diese Methode verwenden, sollten von den Änderungen in Chrome 131 nicht betroffen sein.

Benutzerdefinierte Eigenschaften, die für das Pseudo-Element ::selection selbst definiert sind, werden ignoriert, um konkurrierende Vererbungsmechanismen zu vermeiden. Sie müssen die Eigenschaften im Element selbst definieren und dann im Pseudo-Element darauf verweisen.

Mit universellen Selektoren für ::selection wird die Übernahme von Highlights deaktiviert

Auf Websites ohne benutzerdefinierte CSS-Eigenschaften wurde möglicherweise ein Universalselektor verwendet um die ausgewählte Textfarbe festzulegen. Hier ein Beispiel:

::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>

Dies ist das Ergebnis, wenn Chrome 130 (und früher) und Chrome 131 ausgewählt sind (und später):

Durch die Übernahme von CSS-Highlights wird der zweite hervorgehobene Text nicht blau von seinem übergeordneten Element übernommen, da der universelle Selektor mit dem <em>-Element übereinstimmt und die universelle Hervorhebungsfarbe (hellgrün) anwendet.

Ändern Sie den universellen Selektor, um die Vorteile der CSS-Highlight-Vererbung zu nutzen , um nur die Stammdatenbank abzugleichen, die dann von den Nachfolgern übernommen wird:

:root::selection {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

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

Das Ergebnis in Chrome 131 sieht so aus:

Wenn auf Ihrer Website Auswahlfarben geändert werden, aber keine benutzerdefinierten Eigenschaften verwendet werden, haben Sie wahrscheinlich einen universellen ::selection-Pseudo-Sellektor. Das Gute dass diese Änderung in Chrome für eure Website nicht geeignet ist, ihr aber auf die ergonomischen Vorteile der Vererbung von Hervorhebungen verzichten.

Der Stil von ::target-text ändert sich ebenfalls

Alle hier beschriebenen Verhaltensweisen und Änderungen gelten für die ::target-text wie bei ::selection. Die Anwendungsfälle für mehr als ein Zieltext-Design auf einer einzelnen Website sind begrenzt und die Funktion ist noch recht neu. Daher ist es sehr unwahrscheinlich, dass sich das ::target-text-Verhalten Ihrer Website ändert.

Was ist der Grund für diese Änderung?

Als die anderen Pseudoelemente für Highlights entwickelt wurden, beschloss die CSS-Arbeitsgruppe, die Übernahme mit dem Modell zur Übernahme von Highlights zu implementieren. Dies war bereits die Methode in der Spezifikation von ::selection. ein Pseudo-Element, das es jedoch nicht in Browsern implementiert hat. Bei den Pseudoelementen, die keine Auswahl sind, wird die Übernahme von Highlights verwendet. Dabei wird das Pseudoelement so übernommen, als wäre es eine Eigenschaft. Elemente übernehmen also die Markierung Pseudo-Elemente aus ihrem übergeordneten Dokument zu erstellen.

Im Interesse der Einheitlichkeit aller Highlight-Pseudos hat die CSS Working Group die Unterstützung der Übernahme von Highlights für ::selection bekräftigt. Die Browser arbeiten daran, das neue Verhalten einzuführen, ohne bestehende Websites zu beeinträchtigen.

Jetzt ausprobieren

Im folgenden CodePen werden die Änderungen veranschaulicht. Probieren Sie es in Chrome 131 aus.