À l'exclusion des emojis de l'écrêtage de texte transparent

Cette astuce CSS crée un effet de voltigeur soigné sur les liens en appliquant un fond de gradient linéaire, en le coupant au texte et en rendant le texte transparent. Cependant, cela affecte de façon inattendue les emojis, ce qui les rend également transparents. Bien que cela soit techniquement correct (les emojis sont des glyphes), ce n'est pas toujours souhaitable.

L'article explore les solutions. Les propriétés CSS font-variation-emoji et font-palette , bien que proposées dans le niveau 4 du module des polices CSS, ne conviennent pas actuellement à ce problème spécifique. Une solution CSS pure semble indisponible.

L'auteur suggère deux solutions de contournement:

1. JavaScript: les grandes plates-formes comme WordPress et Twitter utilisent des emojis basés sur l'image (souvent SVG). Le remplacement des emojis basés sur du texte par des images empêcherait l'effet de transparence. Cela nécessite JavaScript personnalisé pour détecter et remplacer les emojis.

2. Positionnement: La solution la plus simple consiste à placer les emoji à l'extérieur du<a></a> Tag de lien. Cela empêche le CSS de l'affecter. Cependant, cela n'est pratique que si les emoji sont régulièrement positionnés au début ou à la fin du texte du lien; Les emojis moyens présentent un défi.

L'article conclut que si une simple solution CSS fait défaut, le besoin de contrôle sur le style emoji dans de tels scénarios met en évidence un domaine potentiel pour le développement futur du CSS. L'image ci-dessous illustre le problème:

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!