Webmasters Gallery

Nice site from Google (and guest contributors) with a bunch of fun demos of what Houdini can do. Plus a write-up from Una. These are all Paint API demos. Houdini is technically a group of seven things that are all pretty cool, and the Paint API is just one of them. Paint is fun, but things will start getting really weird when we get the Layout API, methinks.

I think the value of Houdini becomes more clear when you see an example of something this fun in so little code (Una’s confetti):

You import it, you use it. You control it with CSS custom properties. That one above is less than 1 kB.

I feel like the early story with Houdini was that it will be these really low-level API’s that will pretty much be used by platform people to prototype new platform features in a safer way. Now the story is more like: confetti!!!! I like both stories.

Firefox still feels like a big wildcard here. They say it’s “worth prototyping” but that feels like a bit of a stretch now after their platform team layoffs. The Paint API is polyfillable, for example:

(async function() {
  if (CSS['paintWorklet'] === undefined)
    await import('https://unpkg.com/css-paint-polyfill')

  CSS.paintWorklet.addModule('https://unpkg.com/houdini-tesla/dist/worklet.js');
})()

And that polyfill is only ~5kB, so maybe that’s fine?

Vincent De Oliveira’s demos have long been my favorite though. While they are all fairly artsy, they also feel like somewhat practical UI things that you might wanna try to do on the web, but have traditionally felt a bit hard to pull off nicely.

And here’s a nice written tutorial from Estelle Weyl, Ruth John, and Chris Mills that goes not only into the Paint API, but the Typed OM too (less shiny, super practical).

Direct Link to Article — Permalink

The post Houdini.how appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Adam Argyle has a post over on web.dev digging into this. He starts with the assumption that you need to do vertical centering and horizontal centering. It’s that vertical centering that has traditionally been a bit trickier for folks, particularly when the height of the content is unknown.

We have a complete guide to centering that covers a wide variety of situations like a decision tree.

Adam details five(!) methods for handling it, even getting into centering unknown vertical and horizontal dimensions, plus a handful of other restraints like language direction and multiple elements. I guess all the silly jokes about the difficulty of centering things in CSS need to be updated. Maybe they should poke fun about how many great ways there are to center things in CSS.

Adam does a great job listing out the pros and cons of all the techniques, and demonstrating them clearly. There is also a video. He picks “the gentle flex” as the winning approach:

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

You can always find it in my stylesheets because it’s useful for both macro and micro layouts. It’s an all-around reliable solution with results that match my expectations. Also, because I’m an intrinsic sizing junkie, I tend to graduate into this solution. True, it’s a lot to type out, but the benefits it provides outweighs the extra code.

Remember that when you’re “centering in CSS” it’s not always within these extreme situations. Let’s look at another situation, just for fun. Say you need to horizontally center some inline-*¹ elements… text-align: center; gets you there as a one-liner:

But what if you need to center the parent of those items? You’d think you could do a classic margin: 0 auto; thing, and you can, but it’s likely the parent is block-level and thus either full-width or has a fixed width. Say instead you want it to be as wide as the content it contains. You could make the parent inline-*, but then you need another parent in which to set the text-align on to get it centered.

Stefan Judis talked about this recently. The trick is to leave the element block-level, but use width: fit-content;

The ol’ gentle flex could have probably gotten involved here too, but we’d need an additional parent again. Always something to think about.

Direct Link to Article — Permalink

The post Centering in CSS appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.