This content originally appeared on phpied.com and was authored by Stoyan
I've been crafting a nice font-face fallback and it works well, however Safari doesn't yet support ascent-override, descent-override, nor line-gap-override in @font-face blocks. It does support size-adjust though.
Since my code requires all 4, the results with size-adjust-only look bad. Worse than no overrides. Easy-peasy I thought, I'll target Safari and not give it any of the 4.
I wanted to use @supports in CSS to keep everything nice and compact. No JavaScript, no external CSS, all this is for a font fallback, so it should be loaded as early in the page as possible, together with the @font-face.
Unfortunately, turns out that for example both
@supports (ascent-override: normal) {/* css here */}
and
@supports (size-adjust: 100%) {/* css here */}
end up with the "css here" not being used.
In fact even the amazing font-display: swap is not declared as being @support-ed.
Using the JavaScript API I get this in Chrome, Safari and Firefox:
console.log(CSS.supports('font-stretch: normal')); // true
console.log(CSS.supports('font-style: normal')); // true
console.log(CSS.supports('font-display: swap')); // false
console.log(CSS.supports('size-adjust: 100%')); // false
console.log(CSS.supports('ascent-override: normal')); // false
Huh? Am I using @supports incorrectly? Or browsers forget to update this part of the code after adding a new feature? But what are the chances that all three make the same error?
It's not like anything in @font-face is not declared @support-ed, because font-style and font-stretch are.
This content originally appeared on phpied.com and was authored by Stoyan
Stoyan | Sciencx (2024-11-03T05:01:51+00:00) Browsers lagging in @supports support?. Retrieved from https://www.scien.cx/2024/11/03/browsers-lagging-in-supports-support/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.