Rendered at 05:39:46 GMT+0000 (Coordinated Universal Time) with Cloudflare Workers.
myfonj 7 hours 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.)
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 to make it “atomic” seems a lot cleaner and more reliable.
vivzkestrel 1 hours ago [-]
- for a website that talks a lot about web, css your pagination is broken
- did you know that https://master.dev/blog/page/65/ onwards till page 70 there is not a single article on any of your pages and yet the pagination keeps going to older posts?
I think their heading `box-decoration-mode` is actually meant to be `box-decoration-break`. That's the real property that exists, and is documented on MDN.
> 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…
The common advice now is to only use CSS that is supported in the last two major versions of each major browser. You can check any css property's support here: https://caniuse.com/
> Imho this is a reason why markdown and other rich-textual formats appeared.
Markdown is a superset of html and through it contains css through the style element
> Btw is there a some “w3schools” for recent CSS?
CSS is constantly changing, I'd recommend the following for how to apply new CSS features:
- Reason: All other social networks only have webdevs who sip the coolaid of whatever trend is happening at the moment, they're not actually interested in learning what CSS can do. However, the web devs in the fediverse are actually interested in what CSS can do.
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...
Wrapping the rule in a feature query to make it “atomic” seems a lot cleaner and more reliable.
- did you know that https://master.dev/blog/page/65/ onwards till page 70 there is not a single article on any of your pages and yet the pagination keeps going to older posts?
- practise what you preach maybe?
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
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?
No better resource than MDN: https://developer.mozilla.org/en-US/
I also like https://css-tricks.com
There's also https://modern-css.com/.
The common advice now is to only use CSS that is supported in the last two major versions of each major browser. You can check any css property's support here: https://caniuse.com/
> Imho this is a reason why markdown and other rich-textual formats appeared.
Markdown is a superset of html and through it contains css through the style element
> Btw is there a some “w3schools” for recent CSS?
CSS is constantly changing, I'd recommend the following for how to apply new CSS features:
- https://www.youtube.com/@KevinPowell
- https://ishadeed.com
- https://www.joshwcomeau.com
MDN is the best technical reference: https://developer.mozilla.org/en-US/
- You can search any css property in there and it will return all the rulesets for that property.
To see how people are using CSS, I'd recommend:
- https://codepen.io/
- Mastodon/fediverse
To see future CSS:- You can see the proposals here: https://github.com/w3c/csswg-drafts/issues
- Proposals often require experiments which you can find on mastodon/fediverse. For example: https://front-end.social/@kizu
There's also the yearly State of CSS survey to get an overall sense of it: https://2026.stateofcss.com/en-US/
There's a much easier way—Baseline: https://web.dev/baseline
CSS features that have been available for 30 months for Chrome, Edge, Firefox and Safari are "Widely Available" and are safe to use.
Commonly used tools like Browserslist and Stylelint support checking for Baseline compliance.
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.