Chris’ Corner: Stage 2

We get all excited when we get new CSS features. Well, I do anyway. It’s amazing, because sometimes it unlocks something we’ve literally never been able to do before. It’s wonderful when an artist finishes a new painting, and something to be celebrated. But this is more akin to a new color dropping, making possible a sight never before seen.

Just as exciting, to me, is the evolution of new features. Both from the perspective of the feature literally gaining new abilities, or us users figuring out how to use it more effectively.

We point to CSS grid as an incredibly important feature addition to CSS in the last decade. And it was!

… but then later we got subgrid.
… but then later gap was improved to work across layouts.
… but then later we got safe alignment.

And this journey isn’t over! Masonry is actively being hashed out, and has gone back-and-forth whether it will be part of grid itself. (It looks like it will be a new display type but share properties with other layout types.)

Plus another one I’m excited about: styling the gap. Just as gap itself is just for the spacing between grid items, now row-rule and column-rule can draw lines in those gaps. Actual elements don’t need to be there, so we don’t need to put “fake” elements there just to draw borders and whatnot. Interestingly, column-rule isn’t even new as it was used to draw lines between multi-column layouts already, now it just does double-duty which is kinda awesome.

• Chrome Developer Blog: A new way to style gaps in CSS
• Microsoft Edge Blog: Minding the gaps: A new way to draw separators in CSS

If we’re entering an era where CSS innovation slows down a little and we catch our breath with Stage 2 sorta features and figuring out what to do with these new features, I’m cool with that. Sorta like…

• We’ve got corner-shape, so what can we actually do with it?
• We’ve got @layer now, how do we actually get it into a project?
• We’ve got View Transitions now, maybe we actually need to scope them for variety of real-world situations.