Chris’ Corner: Buttons, Modes, and a Couple of Layout Situations That Are Still a Bit Tricky

Posted on by

If you ever need some inspiration for buttons, definitely check out Lucas Bonomi’s buttons.cool. This is a better-than-it-needs-to-be one-off site just for beautiful buttons:

But it’s not just a design gallery, it’s made for front-end developers in that you can see the code, see them being live-rendered right on the page, and of course, the best part is you can pop right over to CodePen for a look.

Looks like it’s taking submissions.

How hard is a Dark Mode to pull off? Or perhaps more accurately, how hard is it to pull off a second color mode? Some of us have dark-mode-first websites, ya know.

I thought Wes Bos phrased the question well:

Question for those who have implemented light/dark mode: how much is just swapping out variables, and how much is custom code, and tending to edge cases?

I answered: fiddy fiddy.

In the new version of CodePen we’re working on, we will have a site-wide theme setting (which is separated from what syntax highlighting theme you choose). CodePen being a pretty complex site, it involved quite a bit of CSS custom property setting. So in a sense, it was mostly just “swapping out variables”, but quite a few of those variables exist just because of different color modes, most of which I might even call an “edge case”. For us: north of 100 south of 200. I found this to be challenging but ultimately a fair approach.

Sometimes you see ideas going around of how simple it could be. For instance, he’s Akhil Arjun saying it can be done in one line:

html[theme="dark-mode"] {
    filter: invert(1) hue-rotate(180deg);
}

And here’s Mads Stoumann with a totally different 3-line approach:

body {
  background-color: Canvas;
  color: CanvasText;
  color-scheme: light dark;
}

While I appreciate a good CSS trick and these are good things to know about, I’m going to go ahead and say these super minimal approaches probably aren’t going to get you very far. You’re going to want better control than this and you’re going to need to deal with those edge cases.

Now that we have such powerful layout tools in CSS (keep ’em coming, CSS!) — it’s fun to see little layout situations that look fairly simple but are still a little challenging. Tyler Sticka ran across one he calls Tricky Floating Image Alignment. The idea is to have some text that is center aligned with an image, but if the text grows larger than the image, use the behavior of float.

I liked the solution in the end. It’s a throwback to the way we used to be able to vertically center stuff with top: 50%; transform: translateY(-50%). This will do the centering nicely, but when the text is bigger than the container, they essentially cancel out and so essentially do nothing.

Here’s another tricky layout situation, this time involving newfangled HTML and CSS features, namely anchor positioning. (Think of it as positioning an element based on another arbitrary element’s position.) Eric Meyer blogged it as Nuclear Anchored Sidenotes.

Imagine a footnote, except on a large enough screen, it’s more like a sidenote. That is, the note goes into empty sidebar space at the exact line that the footnote marker appears on. But to really pull this off, you’re using anchor positions of multiple elements:

Yes, I’m anchoring the sidenotes with respect to two completely different anchors, one of which is a descendant of the other.  That’s okay!  You can do that!

I did not know you could do that, but I like it. 

top: anchor(top); /* implicit anchor */
left: anchor(--main right); /* named anchor e.g. anchor-name: --main; */

I only just heard of the CSS round() function the other day. It takes a value and rounds it. Ha.

line-height: round(2.2, 1); /* 2 */

I was blogging it with a number of other CSS functions I’d never heard of. Try this demo in Firefox to see a pretty clear example of why it could be cool. Of course Dan Wilson is all over it with a much more comprehensive look in The New CSS Math: round(). Dan looks closely at the syntax, sharing how you pass in not just a value, but the interval by which you want to do the rounding. Then optionally, even a “rounding strategy” if it’s important to you how that is done.

I feel like this falls into the category of “interesting layout related thing that would have been hard or impossible before but now isn’t.” Or at least “we’d probably have to do this in JavaScript before but it actually makes more sense in CSS.”

Looks like we’re going to get scrollbar-color and scrollbar-width across all browsers for real now. That’s the “real spec version” of doing this, instead of the more-capable (get gone-wild) WebKit styles of old. I wish it was more capable, but I’ll take standards over that any day.

While I’m still on this kick of “difficult CSS layout things”, you gotta see this Pen from Alex Riviere that handles this curved grid.

What’s striking to me about this is how… not weird it looks. It’s like if you were standing in a glass elevator going down and looking at these blocks, that’s just how they would look. But in order to pull that off while scrolling, some relatively exotic transform action needs to happen on them, which even involves new trigonometric functions in CSS (along with a scroll-timeline, which you can see has a fairly simply polyfill in this case).

Go take a peek at that CSS. The transforms are just a few lines, but wow that’s fancy.