Une mise à jour récente de Google Chrome et des navigateurs basés sur Chromium a introduit un bug affectant la mise en surbrillance du texte sur de nombreux sites Web et applications en ligne. Ce problème, causé par un changement dans le comportement des styles de sélection de texte, nécessite des mises à jour du code des sites pour retrouver un fonctionnement normal.
Avec la version Chrome 131, Google a modifié la gestion des styles de sélection de texte. Jusqu’à présent, le surlignage était appliqué en fonction de la pseudo-classe ::selection de l’élément sélectionné. Désormais, Chrome utilise un modèle basé sur l’héritage des propriétés de l’élément parent, ce qui perturbe la compatibilité avec certains outils de conception web, notamment Tailwind CSS, un framework CSS très populaire.
Ce changement entraîne des situations où le texte sélectionné n’est pas visible en surbrillance, bien que les utilisateurs puissent encore copier et coller le texte. L’incompatibilité affecte également d’autres navigateurs utilisant Chromium, comme Microsoft Edge, mais des alternatives comme Mozilla Firefox et Apple Safari, qui reposent sur des moteurs de rendu différents, ne sont pas concernées.
Plusieurs plateformes majeures, comme GitHub, The Verge, et Bloomberg, ont signalé des problèmes liés à ce bug. Bien que l’ampleur exacte des sites affectés reste incertaine, ces signalements mettent en évidence que même des sites à forte audience ne sont pas épargnés.
Adam Wathan, le créateur de Tailwind CSS, a rapidement réagi en proposant une solution de contournement. Les développeurs peuvent appliquer un correctif via une mise à jour de Tailwind CSS ou en activant un feature flag spécifique. Une fois ce correctif appliqué, les styles de sélection devraient fonctionner comme prévu.
Heads up—if all of a sudden your custom text selection colors stopped working in Chrome today (like it did on The Verge and Bloomberg 😬), enable this feature flag in your `tailwind.config.js` file or update to [email protected]. pic.twitter.com/uU5paHJS4U
—Adam Wathan (@adamwathan) November 14, 2024
Une mise à jour controversée de Chrome
En octobre, Google avait annoncé ce changement en affirmant qu’il « ne devrait pas causer d’impact visible pour la plupart des sites ». Cependant, les problèmes observés montrent que cette mise à jour a eu des conséquences imprévues sur certains sites importants.
Cette modification visait à rendre le comportement de sélection de texte plus cohérent et intuitif entre les différents éléments HTML. Toutefois, ce type d’ajustement dans les moteurs de rendu peut parfois entraîner des incompatibilités avec des fonctionnalités Web existantes, en particulier celles reposant sur des frameworks ou des fonctionnalités CSS plus anciennes.
Que doivent faire les développeurs ?
Les propriétaires de sites affectés sont invités à vérifier leur utilisation de la pseudo-classe ::selection et à mettre à jour leur framework CSS si nécessaire. Google et les communautés de développeurs, notamment celles autour de Tailwind CSS, fournissent des solutions pour corriger ce problème rapidement.
Bien que cette situation illustre les défis des mises à jour des navigateurs, elle rappelle également l’importance de maintenir un code compatible avec les évolutions des standards Web.
