Web developers,
-
Web developers,
What existing CSS do you struggle with most?
Can you think of an older feature from CSS2/ CSS3, that has been in all browsers for a long time, but still doesn't work the same cross-browser. And so you fight with it, you have to use a hack or workaround. Or you just cannot use that feature at all. Perhaps you haven't even thought about it in a long time because you wrote it off as unusable long ago.
Is there anything that still falls into that category?
What do you want fixed? -
@jensimmons grouping for font-face declarations so if different webfont files are downloaded in parallel (e.g. normal, italics and bold) but arrive one-after-another, we don’t re-render multiple times, we wait for all 3 and then render only when the last in-flight file arrives (or after a reasonable waiting timeout).
Variable fonts can help with this but they aren’t always available at a reasonable price, or at all.
-
Zach Leatherman :11ty:replied to Ryan Townsend last edited by
@ryantownsend @jensimmons if I had to choose between this and incremental font transfer I’d take the latter!
-
Ryan Townsendreplied to Zach Leatherman :11ty: last edited by
@zachleat @jensimmons agree.
-
@ryantownsend Does the browser reeally re-render multiple times? I would have thought it would hold repainting once it’s waiting on multiple fonts
-
@andydavies afaik: Chrome has some unspecified/non-standard behaviour around blocking rendering for pending preloaded fonts but otherwise browsers re-render as each arrive.
It seems like a smart starting point tbf, but it would be nice to have more fine-grained control.
For example: I wouldn’t want to hold off rendering as a heading font arrives, but I’d group my N body fonts together for rendering together (provided they all arrive within a reasonable window of time)
-
Ryan Townsendreplied to Ryan Townsend last edited by [email protected]
@andydavies built a lil' test site: https://font-rerender-test.netlify.app/
These 4 fonts are all immediately requested but take 2, 3, 4 and 5 seconds to respond.
In Chrome & Firefox you'll see there's 4 renders. Unexpectedly (to me at least), Safari seems to block rendering completely until all are loaded, despite `font-display: swap`