Posted on by Chris Coyier

Chris’ Corner: More Like Celebrating Style Skills

It’s January and we’re seeing a little round of CSS wishlists make the rounds.

  • Tyler Sticka is mostly hoping for better support on stuff that already is starting to cook, like View Transitions, anchor positioning, balanced text, and scroll-driven animations. But he’s got his own new wishes and has done the leg-work to properly propose them, like more useful vertical alignment (without extra work).
  • Christopher Kirk-Nielsen also has some wishes for better support for thing that ought to be doing that naturally, like Style Queries, but also has some really interesting ideas of his own like using transform to force an element of an unknown size into a specific size, which he also wrote up properly.
  • Manuel Matuzović has more love for Style (and State) Queries (agreed there is some real potential here to reduce CSS size and complexity) and @scope. On the doesn’t-exist-yet side, a vote for mixins to which I’ll echo: Yes, please!
  • Elly Loel weighted in last year using the same distinctions: stuff that is already cooking (e.g. Custom Media) and stuff that doesn’t exist yet (e.g. detecting flex-wrap). Good news for Elly, some stuff from the list got done, like subgrid.
  • Nathan Knowler joins the choir with strong votes for Style Queries, Scroll-Driven Animations, and @scope, among others.
  • Sarah Gebauer has a great one on her wishlist about borders and controlling the offset. Hey, SVG can do it and it’s super cool. Plus a shout out to a personal favorite: more useful attributes and the attr() function.

Phew! That’s a lot of people taking the time to be pumped about CSS and make clear what they want. The way CSS is going lately I would not be surprised to see massive progress again in 2024.

Stephanie Eckles points out 12 one-liners in CSS that are all tremendously useful and powerful.

One liners.

Stuff like p { text-wrap: pretty; } that just makes web type all the nicer. Five years ago our gapping mouths would have been on the floor if they knew what was coming.

Brecht De Ruyte took two brand new CSS and HTML things and smashed them together:

  • The new <selectmenu> element, which is exactly like <select> except fully CSS styleable.
  • The Anchor Position API

It’s a cool interaction that is supposed to end up like this:

But this was actually published mid-last-year, and the demo is already broken even. It only ever worked in Chrome Canary with the Experimental Web Platform Features flag turned on, so that just goes to show you how fast this experimental stuff moves.

It’s not <selectmenu> any more, it’s <selectlist>, but even after forking the demo and trying to fix it, I couldn’t get it. I suspect it’s changes to the Anchor Positioning API that I’m not up to snuff on. I do suspect this interaction is possible today, but you’d either be using cutting edge APIs that may or may not be polyfillable, and/or recreating a ton of interaction and accessibility stuff that you’d get for free with Brecht’s implementation.

Ben Frain has a very clever idea for drawing angled lines in CSS (like a line chart). Which, weirdly, isn’t a particularly easy thing to do in CSS. You can make lines various ways and rotate them and stuff, but it’s harder to be like: draw a line from here to here. SVG is typically the path for that.

In Ben’s technique, you take advantage of the polygon() function and clip-path. You “draw” points in the clip path at certain coordinates, then go back over the exact same coordinates with a 1px difference, leaving that little gap where a new color can “shine through”.

Like:

clip-path: polygon(
  0% 60%,
  20% 90%,
  40% 43.33%,
  60% 61.67%,
  80% 23.33%,
  100% 18.33%,
  100% calc(18.33% - 1px),
  80% calc(23.33% - 1px),
  60% calc(61.67% - 1px),
  40% calc(43.33% - 1px),
  20% calc(90% - 1px),
  0% calc(60% - 1px)
);
Demo

Robin Rendle once made a bunch of different chart types in CSS only, but I don’t think I’ve seen a CSS “sparkline” like this until now.

CategoriesUncategorizedTags