CSS Logical Properties and Values, the next Step of CSS Evolution

Still in draft, yet already thoroughly supported, is the CSS Logical Properties and Values Level 1 Specification, a CSS module which gets me excited.

CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.

These properties are writing-mode relative equivalents of their corresponding physical properties.

Think of a simple property like padding-left for example. In a left-to-right language such as English you actually mean the left hand side of the box. But in a right-to-left language such as Arabic you want that padding to appear at the right hand side of the box. This is where CSS Logical Properties come into action: instead of using the physical padding-left, you use the logical padding-inline-start which denominates “the padding at the start of the inline axis”.

The post New CSS Logical Properties! covers the topic in detail, along with some issues that are still present at the moment.

Before you start using the new logical properties, you need to stop thinking in terms of left/right or top/bottom, and replace them with inline-start/inline-end and block-start/block-end.

Exciting stuff. This will have a huge impact on how we write CSS. 🤩

New CSS Logical Properties! →

Relearn CSS layout with “Every Layout”

As just announced (on stage) at CSS Day by Heydon himself:

If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.

Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.

Relearn CSS layout: Every Layout →

CSS Grid Level 2: Subgrid

Good news! Firefox 69 will support subgrid. As Rachel Andrew explains:

In terms of new syntax, and new things to learn, this is a very small change for web developers who have learned grid layout. A grid defined as a subgrid is pretty much the same as a regular nested grid, albeit with its own track listings. However it makes a number of previously difficult patterns possible.

For example, if you have a card layout, and the cards have headers and footers with uneven amounts of content, you might want the card headers and footers to align across the rows. However, with a standard nested grid this isn’t possible.

With Subgrid that type of layout is perfectly possible:

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.card {
  grid-row: auto / span 3;
  border: 1px solid rgb(0,48,90);
  border-radius: 5px;
  display: grid;
  grid-template-rows: subgrid;
}

More use cases in the article.

CSS Grid Level 2 – subgrid is coming to Firefox →

CSS masonry with flexbox, :nth-child(), and order

Tobias Ahlin:

On the surface it seems fairly easy to create a masonry layout with flexbox; all you need to do is set flex-flow to column wrap and voilà, you have a masonry layout. Sort of. The problem with this approach is that it produces a grid with a seemingly shuffled and obscure order.

Flexbox has no easy way of rendering items with a column layout while using a row order, but we can build a masonry layout with CSS only — no JavaScript needed — by using :nth-child() and the order property.

Beware though: this technique requires you to set a fixed height on the wrapper, which is not always possible 😕

CSS masonry with flexbox, :nth-child(), and order

The Flexbox Holy Albatross

Great work by Heydon Pickering, in which he lets a flexbox layout respond to the size of its container, and not the viewport

Sometimes you want your items to wrap in a very particular way. For instance, when you have three items, you’ll be happy with the three-abreast layout and accepting of the single-column configuration. But you might like to avoid the intermediary part where you get a pair of elements on one line followed by a longer element underneath.

How do we skip this intermediary layout state and switch directly from a horizontal to vertical triptych? What’s the solution?

The solution he knocked up involves flex-basis being changed thanks to calc() and CSS Custom Properties (“CSS Variables”). The code behaves nicely when the viewport becomes too narrow, or when the container becomes too narrow (set the max-width of the body to 37em to see it in action)

💁‍♂️ To get a good understanding of how exactly this works, see Jonathan Snook’s Understanding the Albatross

Now, are these “Container Queries” we want? Not quite imho: whilst is does tackle the issue of layout for flexed children, it’s still not possible to, for example, change the font-size or, another example, switch from flexbox to grid using this technique.

Sidenote: I think one could hack the font-size thing together if CSS calc() were to support the modulo operator, but that’s not the case unfortunately. Also, it would still leave switching from flexbox to grid out of the loop.

The Flexbox Holy Albatross →
Understanding the Albatross →

The Layouts of Tomorrow

With CSS Grid being available, Max Böck set out to find himself a layout challenge:

I went over to dribbble in search of layout ideas that are pushing the envelope a bit. The kind of design that would make frontend developers like me frown at first sight.

He settled on the “Digital Walls” shot (pictured above). The result is stunning. Next to CSS Grid it also uses CSS Parallax, CSS Scroll Snap Points, and Smooth Scrolling.

The Layouts of Tomorrow →

💁‍♂️ Be sure to also check out these magazine layouts recreated with CSS Grid.

How CSS’s display: contents; works

You might know that display: contents; does what it states it does: it only shows an element’s contents, just as if you were to remove the opening and closing tag.

But what about the element’s attributes? What about the bound JavaScript events? What about … ? Ire Aderinokun digs deeper.

How display: contents; works →

CSS Houdini Experiments

At the very end of the Say Hello to Houdini and the CSS Paint API article there’s only a small mention of this site. However it’s that great that it’s worth a link/post on its own.

⚠️ Be sure to use Chrome Canary – with “Experimental Web Platform features” enabled via chrome://flags – when visiting it.

CSS Houdini Experiments →