Rauno Freiberg wrote an article getting into the CSS implementation of some of the neat features of the most recent Next.js website. Gotta love an article showing off how things work on a really top-notch modern design. Thoughts as I go down the list:
• The randomized dots on the switchboard look super cool. Just a tiny little box-shadow does the trick, but they need to be animated with opacity because animating opacity is super performant and animating box-shadow is very not. I wonder if we’ll ever get past gotchas like that? Also, the dots aren’t exactly random, they are just placed seemingly-randomly. What if we had real randomization in CSS? It’s been being talked about again seriously.
• The offset focus styles were done with a box-shadow. It was noted that outline now follow border-radius across the board, which opens up that door, and is powerful thanks to outline-offset. I think I would have gone with outline-offset because I like thinking about how easy that is to control. One example: if you find that your focus styles are getting cut off by hidden overflow, you have the option to use negative offset to pull the focus styles inside where they won’t get cut off instead.
• To pull the quotation marks of a blockquote toward the inline direction a bit, lining up the words, a bit of negative text-indent was used. That’ll work cross-browser, but it’s a shame we have to rely on a magic number rather than the purpose-built hanging-punctuation property. Let’s root for better support there.
• Love to see that fluid type in action! I see the blog post is using clamp() with a viewport unit. I’d recommend making sure that middle parameter factors in a little rem unit of some kind so that user font sizing is honored. The production website actually uses max(48px,min(5vw,76px)) and I’m curious about the change there. Seems… the same? And actually, since I bet the headline is an isolated React component, it’s kinda begging for the whole thing to be a container and for the header sizing to be done with a cqi unit instead.
• The “gradient tracking” trick using a moving SVG gradient background is just incredibly cool and absolutely one of the nicest effects I’ve seen anywhere this year. 5 stars.
I did a talk somewhat recently called “Modern CSS in Real Life,” and now I’ve turned it into a blog post in case digesting it that way is of interest to you.
One of the things I dwell on in the beginning is the use of Logical Properties in CSS and how you get some nice benefits out of using them. One is that I think it very slightly makes CSS easier to reason about. But the bigger one is that it helps a site that is being auto-translated behave better. In particular, I showed off an article that would have ended up mucher nicer when being translated from the Left-to-Right English default to Right-to-Left Arabic.
I thought of that again the other day as I came across the Arabic Design Archive. It’s interesting to look at designed items that need both language directions at the same time.
I like how the main thrust of the design is RTL, forcing the English headline to be right-aligned, but still looks great. Then in the smaller and slightly longer text, both directions are accommodated nicely by that vertical bar which both inline directions butt against.
