Exclusion d’émojis de la découpe de texte transparent

Online Coding Courses for Kids

CSS-Tricks a cette façon assez cool de styliser les liens survolés. Par défaut, le texte est d’un bleu assez commun. Mais survolez les liens, et ils sont remplis d’un dégradé linéaire.

😍

Assez bien, non? Et l’astuce n’est pas si compliquée. En vol stationnaire…

  • donner au lien un fond dégradé linéaire,
  • coupez l’arrière-plan au texte, et
  • donnez au texte un remplissage transparent pour que l’arrière-plan soit visible.

Cela ressemble à ceci en CSS:

a {
  color: #007db5;
}

a:hover {
  background: linear-gradient(90deg,#ff8a00,#e52e71);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Remarquez le -webkit- préfixe, qui est obligatoire pour le moment. Il y a un peu plus à la mise en œuvre réelle ici sur CSS-Tricks, mais ce petit peu nous donne ce que nous recherchons.

Mais ce n’est pas le but ici. Juste l’autre jour, Brad Westfall téléphoné pour nous faire savoir que cette technique prend également effet sur les emojis qui, comme tout autre texte, obtient un remplissage transparent au survol.

Il l’a remarqué sur un lien dans l’un de nos messages.

Pas la pire des choses. Et cela a tout à fait du sens. Je veux dire, un emoji est un glyphe comme n’importe quel autre texte dans un fichier de police, non? Il se trouve qu’ils sont simplement une police de couleur et prennent la forme d’une image. Bien sûr, ils seraient traités comme n’importe quel autre glyphe dans une situation comme celle-ci où nous consacrons la couleur de remplissage.

Mais si garder la couleur intacte sur les emojis est une exigence, cela peut être résolu en enveloppant l’emoji dans une plage et en remettant son remplissage à son état initial.

Mais qui veut écrire un intervalle chaque fois qu’un emoji apparaît dans un lien? 👎

Si vous recherchez une solution CSS, nous n’avons pas de chance. Cela dit, la spécification de niveau 4 du module de polices CSS inclut une définition pour une proposition font-variation-emoji propriété. Cependant, il n’y a pas grand-chose dessus (que je puisse trouver) pour le moment et il ne semble pas être conçu pour ce genre de chose. quelques discussions lié à la proposition suggère qu’il s’agit davantage de la façon dont certains navigateurs ou systèmes convertissent automatiquement Unicode en emoji et comment contrôler ce comportement.

Il y a aussi la définition proposée de font-palette dans le même brouillon de spécification qui semble être un moyen de contrôler les polices de couleur – c’est ce que sont les emojis à la fin de la journée. Mais ce n’est pas non plus la solution.

Il semble que le seul moyen d’empêcher le remplissage d’un emoji d’être modifié sans intervalle est une sorte de solution JavaScript. Regardez des services comme WordPress, Dropbox, Facebook et Twitter. Ils mettent tous en œuvre leurs propres ensembles d’emojis personnalisés. Et qu’utilisent-ils? Images.

Ouais, avec un lot des divs et autres!

Ce serait une façon de procéder. Si l’emoji est remplacé par une image (un SVG dans cet exemple spécifique), cela l’empêcherait certainement d’être rempli avec le texte du lien.

Ou, hé, pourquoi ne pas nous empêcher d’entrer dans la situation du tout et placer ce truc dang en dehors du lien?

C’est probablement la voie que nous aurions dû emprunter depuis le début. Mais un emoji peut ne pas venir au début ou à la fin d’un lien, mais quelque part au milieu. Cela souligne simplement le fait qu’il y a des cas où il pourrait être utile d’avoir une sorte de contrôle ici.


Close Menu