5 ms·

Some caveats worth mentioning yet missing there: 1. many, MANY implementation bugs in `background-clip: text` across browsers, especially Firefox [1], basicall

by myfonj 1mo ago

Some caveats worth mentioning yet missing there: 1. many, MANY implementation bugs in `background-clip: text` across browsers, especially Firefox [1], basically safe only for simple cases with no additional transforms or filters. 2. `color: transparent` ensures the text will be invisible in every browser that does supports the `transparent` keyword (i.e. basically every single one, presumably) but not support background-clip:text yet, or fail to load or interpret the background-image (like in high contrast/forced colours mode). Use `-webit-text-fill-color: transparent` instead. (Yes, that vendor prefix is necessary, and yes, it is de-facto standardised and implemented in Chrome and Firefox [2]. And yes, it is as absurd as it gets.) 3. Touching the `letter-spacing` turns off all ligatures, logically. Could be a good thing, actually, but worth knowing. (Anthropic used to use negative letter-spacing thorough its webpages, but now it seems they abandoned that.) [1] https://bugzilla.mozilla.org/show_bug.cgi?id=1656784 https://bugzilla.mozilla.org/show_bug.cgi?id=1656784 [2] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-fill-color https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...

masklinn 1mo ago
Recommendation (2) assumes any UA which supports background-clip supports -webkit-text-fill-color. That seems rather dodgy. Wrapping the rule in a feature query seems a lot cleaner and more reliable.
- myfonj 1mo ago
  > That seems rather dodgy. I fully agree, yet in this particular case it probably holds, with possible exception of 2009 Safari, IIRC [1]. And absolutely agree that defensive @supports is better and more robust way to go. Just aimed to ameliorate the, from my point of view wrong and dangerous pattern using `color: transparent` the easiest possible "drop-in" that would encourage keeping the "normal" `color` intact and only introducing `-webkit-text-fill-color: transparent` on top of that. It seemed like a pattern (lazy) develoers would follow more likely [1] https://github.com/mdn/content/issues/2638 https://github.com/mdn/content/issues/2638 Made some research while suggesting to promote better approach and point to caveats in the "authoritative" MDN article and partially succeeded. (Sadly, there are `color: transparent`s used in examples there now, but… at least I've tried.)

by myfonj 1mo ago

masklinn 1mo ago

Recommendation (2) assumes any UA which supports background-clip supports -webkit-text-fill-color. That seems rather dodgy. Wrapping the rule in a feature query seems a lot cleaner and more reliable.

myfonj 1mo ago
> That seems rather dodgy. I fully agree, yet in this particular case it probably holds, with possible exception of 2009 Safari, IIRC [1]. And absolutely agree that defensive @supports is better and more robust way to go. Just aimed to ameliorate the, from my point of view wrong and dangerous pattern using `color: transparent` the easiest possible "drop-in" that would encourage keeping the "normal" `color` intact and only introducing `-webkit-text-fill-color: transparent` on top of that. It seemed like a pattern (lazy) develoers would follow more likely [1] https://github.com/mdn/content/issues/2638 https://github.com/mdn/content/issues/2638 Made some research while suggesting to promote better approach and point to caveats in the "authoritative" MDN article and partially succeeded. (Sadly, there are `color: transparent`s used in examples there now, but… at least I've tried.)