Emojis vom transparenten Text Clipping ausschließen

CSS-Tricks hat eine ziemlich coole Methode, um Links beim Darüberfahren zu stylen. Standardmäßig ist der Text ein recht übliches Blau. Aber wenn man mit der Maus über die Links fährt, werden sie mit einem linearen Farbverlauf gefüllt.

Ziemlich raffiniert, oder? Und der Trick ist gar nicht so kompliziert. Beim Darüberfahren…

• gib dem Link einen linearen Farbverlauf-Hintergrund,
• clippe den Hintergrund auf den Text und
• gib dem Text eine transparente Füllung, sodass der Hintergrund durchscheint.

So sieht das in CSS aus

a {
  color: #007db5;
}

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

Beachte den -webkit--Präfix, der derzeit erforderlich ist. Es gibt noch ein paar Details zur tatsächlichen Implementierung hier auf CSS-Tricks, aber dieser kleine Teil bringt uns zu dem, was wir suchen.

Aber das ist hier nicht der Punkt. Erst neulich rief uns Brad Westfall an, um uns mitzuteilen, dass diese Technik auch auf Emojis wirkt, die wie jeder andere Text beim Darüberfahren eine transparente Füllung erhalten.

Er bemerkte es bei einem Link in einem unserer Beiträge.

Nicht das Schlimmste. Und es ist absolut sinnvoll. Ich meine, ein Emoji ist ein Glyphe wie jeder andere Text in einer Schriftdatei, oder? Sie sind zufällig eine Farbschrift und nehmen die Form eines Bildes an. Natürlich würden sie in einer Situation wie dieser, in der wir die Füllfarbe aushöhlen, wie jede andere Glyphe behandelt werden.

Aber wenn die Farbe bei Emojis intakt bleiben soll, kann dies durch Umwickeln des Emojis in einen Span und Zurücksetzen seiner Füllung auf den ursprünglichen Zustand gelöst werden.

Aber wer möchte jedes Mal einen Span schreiben, wenn ein Emoji in einem Link auftaucht? 👎

Wenn Sie nach einer CSS-Lösung suchen, haben wir Pech gehabt. Das CSS Fonts Module Level 4 spezifiziert zwar eine vorgeschlagene Eigenschaft font-variant-emoji. Allerdings gibt es dazu im Moment nicht viel (was ich finden kann) und es scheint nicht für diese Art von Problem entwickelt worden zu sein. Ein schnelles Überfliegen einiger Diskussionen im Zusammenhang mit dem Vorschlag deutet darauf hin, dass es mehr darum geht, wie einige Browser oder Systeme Unicode automatisch in Emojis umwandeln und wie man dieses Verhalten steuert.

Es gibt auch die vorgeschlagene Definition von font-palette im selben Entwurf, die wie eine Möglichkeit zur Steuerung von Farbschriften erscheint – was Emojis letztendlich sind. Aber auch das ist nicht die Lösung.

Es scheint, dass die einzige Möglichkeit, die Füllung eines Emojis ohne einen Span zu ändern, eine Art JavaScript-Lösung ist. Schauen Sie sich Dienste wie WordPress, Dropbox, Facebook und Twitter an. Sie alle implementieren ihre eigenen benutzerdefinierten Emoji-Sets. Und was benutzen sie? Bilder.

Das wäre eine Möglichkeit, es zu tun. Wenn das Emoji durch ein Bild ersetzt wird (in diesem speziellen Beispiel ein SVG), dann würde es sicherlich davon ausgeschlossen werden, zusammen mit dem Linktext gefüllt zu werden.

Oder, hey, warum verhindern wir nicht, dass wir überhaupt in diese Situation geraten, und platzieren das verdammte Ding außerhalb des Links?

Das ist wahrscheinlich der Weg, den wir schon längst hätten gehen sollen. Aber ein Emoji muss sich nicht am Anfang oder Ende eines Links befinden, sondern irgendwo in der Mitte. Es unterstreicht nur den Punkt, dass es Fälle gibt, in denen eine gewisse Kontrolle hier nützlich sein könnte.