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

By admin
If you ever need some inspiration for buttons, definitely check out

Lucas Bonomi’s
ORG

buttons.cool. This is a better-than-it-needs-to-be

one
CARDINAL

-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
ORDINAL

color mode? Some of us have dark-mode-

first
ORDINAL

websites, ya know.

I thought

Wes Bos
PERSON

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
PERSON

.

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
CARDINAL

south of

200
CARDINAL

. 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
PERSON

saying it can be done in

one
CARDINAL

line:

html[theme=’dark-mode’] { filter:

invert(1
ORG

)

hue-rotate(180deg
ORG

); }

And here’s

Mads Stoumann
PERSON

with a totally different

3
CARDINAL

-line approach:

body { background-color: Canvas; color:

CanvasText
ORG

; 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
ORG

(keep ’em coming, CSS!) — it’s fun to see little layout situations that look fairly simple but are still a little challenging.

Tyler Sticka
PERSON

ran across one he calls

Tricky Floating Image Alignment
PERSON

. 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%
PERCENT

; 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
PERSON

blogged it as

Nuclear Anchored Sidenotes
ORG

.

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
CARDINAL

completely different anchors,

one
CARDINAL

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
DATE

. It takes a value and rounds it. Ha.

line-height: round(2.2,

1
CARDINAL

); /*

2
CARDINAL

*/

I was blogging it with a number of other CSS functions I’d never heard of. Try this demo in

Firefox
ORG

to see a pretty clear example of why it could be cool. Of course

Dan Wilson
PERSON

is all over it with a much more comprehensive look in The New CSS Math: round().

Dan
PERSON

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
PERSON

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
ORG

(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.