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.)
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 [2] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
Was expecting to see text-wrap:balance there. Solve away your orphans! https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
I always tell myself that I should use backwards-compatible CSS only.
I vividly remember IE and many hacks to have css elements properly working in it…
Imho this is a reason why markdown and other rich-textual formats appeared.
Btw is there a some “w3schools” for recent CSS?
> Btw is there a some “w3schools” for recent CSS?
No better resource than MDN: https://developer.mozilla.org/en-US/
I also like https://css-tricks.com
CSS has come a long way. On several sites I’ve been able to completely remove JS for things like popups, mobile menus, and open/close interactions.
The fact that modern CSS and native browser APIs can handle so much of this makes the web feel simpler and more capable at the same time.