CSS

Last week, on the coat tails of inspiration gathered from WordCamp Rochester, I ordered Eric Meyer’s mammoth new book – CSS, The Definitive Guide, 4th edition. It came on Wednesday afternoon and I managed to read the first chapter on Wednesday evening before the Thanksgiving festivities set in.

I’ve read enough of these kinds of books now that I’ve gained a sense of which ones are good and which are not so good. This one is starting off in the good column. The presentation flows. The examples are simple enough to grasp quickly without being artificial or contrived.

I’ve been doing CSS for a long time. I like to think that I’m pretty good at it. But even in the first chapter, I learned a few things. Aside from the several moments of “Aha! I already knew how to do that, but this is what’s really happening under the hood and why”, I learned about the @supports rule.

I’m not going to try to explain @supports here. You can google it (or get Meyer’s book) for the full story. But I’ve been wondering, for example, how to use CSS grid when I still have to support older browsers that don’t implement it. Enter @supports:

@supports ( display: grid ) { ... }

With this, browsers that use the grid will use it. Anything else will ignore it and just use the old gridless styles. Problem solved in 1 line of code. Mind blown.

I probably would have figured this out eventually. But becoming aware of it and having a clear explanation of it was worth the price of the book. And I’ve only read Chapter 1, so far.

Here’s something I came across that took me a couple hours to figure out.

When you’re using a CSS grid display, and one of your grid items has an item nested inside it (like an image or a figure) that is set to display at `max-width: 100%` — it doesn’t seem to matter how deeply nested the offending item is, mine was two levels down — that item will expand to fill the entire grid column if it happens to be assigned to a vertical track defined by the `fr` unit.

The solution (hack) I found this afternoon to get it to come back into line is to explicitly set the `overflow` for that grid item to `auto`.