Everyone’s been talking about font-display: swap as a way of taking the pain out of loading web fonts, but here Chris looks at font-display: optional and font-display: fallback as well.
We don’t want the field to de-democratize and become the province solely of those who can slog through a computer science degree.
So we need new tools that let everyone see, understand, and remix today’s web. We need, in other words, to reboot the culture of View Source.
This is an excellent proposal from Emil. If we can apply display: contents to fieldsets, then we would finally have a way of undoing the byzantine browser styles that have hindered adoption of this element. This proposal also ensures backwards compatibility so there’d be no breakage of older sites:
The legacy appearance of fieldsets probably needs to be preserved for compatibility reasons. But
display: contentsis not supported in any old browsers, and is most likely used on exactly zero sites using the legacy look of fieldsets.
Whaddya say, browser makers?
If you were at Patterns Day and you liked the music that was playing during the breaks, here’s the playlist. All the artists are based in Brighton.
I like it when organisations share their in-house coding styles. This one from Springer Nature not only has guides for HTML, CSS, and JavaScript, but it also has a good primer on progressive enhancement.
This is a really clear explanation of how CSS works.
Tetris in your browser. Visit it once and it works offline (if your browser supports service workers) so go ahead and add it to your home screen.
The texture here is shockingly realistic.
I can relate to what Rachel describes here—I really like using my own website as a playground to try out new technologies. That’s half the fun of the indie web.
I had already decided to bring my content back home in 2017, but I’d also like to think about this idea of using my own site to better demonstrate and play with the new technologies I write about.
The font-display property is landing in browsers, and this is a great introduction to using it:
If you don’t know which option to use, then go with
swap. Not only does it provide an optimal balance between custom fonts and accessibility of content, it provides the same font loading behavior that we’ve relied on JavaScript for. If you have fonts on the page that you’d like to have load, but could ultimately do without, consider going withfallbackoroptionalwhen usingfont-display.
Until it’s more widely supported, you can continue to use a JavaScript solution, but even then you can feature detect first:
if ("fontDisplay" in document.body.style === false) {
/* JavaScript font loading logic goes here. */
}
Dave is making a nifty in-browser game that you can play by yourself or in co-operative mode. If your device has a gyroscope, you can use that to aim. Very cool!
(And it looks like it’s all set to become a progressive web app once it’s running on HTTPS.)
I’ve seen the exact problem that Rachel describes here—flexbox only applied to direct children, meaning the markup would have to be adjusted. display: contents looks like a nifty solution.
I think I’ve shown great restraint in not linking to loads of think-pieces about Star Wars and The Force Awakens, because believe me, I’ve been reading—and listening to—a lot.
What Jessica has written here is about The Force Awakens. But more than that, it’s about Star Wars. But more than that, it’s about childhood. But more than that…
What I’m saying is: if you only read one thing about the new Star Wars film, read this.
If you were at Responsive Day Out on Friday and you liked the music that was playing during the breaks, here’s the track listing. Creative Commons licensed.
Still a few days left to back this great project for Brighton:
Build, tinker, make and play! For anyone with imagination, The Brighton Makerlab lets ages 8 to 80 create cool stuff with technology.
Design principles for the newly-formed USDS. I’ve added these to my collection.
Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.
A cute approach to pairing typefaces: treat it like a dating game.
Hypertext adventure.
This might well be the best thing Wired has ever published. I wish every article were in this format.