Advanced CSS (blend modes and subgrids)

The article Z’s Still Not Dead Baby, Z’s Still Not Dead by Andy Clarke (24 Ways) is well-written, very interesting and taught me a few new CSS tricks of which I was unaware.

Granted, my work usually doesn’t call for fancy effects like those you can achieve with something like background-blend-mode, but it can happen. There’s not only background-blend-mode, there’s also mix-blend-mode and filter, all of which apply high-quality effects dynamically.

In the late spring, I had a two-month project where I had to use a lot of transformations and animations—and I was able to get it all done with CSS. Once you know about these kinds of techniques, you keep them in mind, and are able to consider solutions that would seem impossible (or very difficult/time-consuming/unmaintainable) if you didn’t know the technique.

A modern browser can construct the following image by composing and blending a couple of graphics.

Samples of Austin Seven 850 Ads

It’s actually pretty cool that you can get this type of layout with wide browser support and no hacks. See the linked article for a lot of examples.

I have used CSS Grid before (as the author does). The author mentions subgrids, but ends up using a second grid within the first grid because browser support for nested grids is good, whereas no-one supports subgrids except for the latest version of Firefox. The MDN documentation for Subgrids explains that it differs from nested grids in that

“If you set the value subgrid on grid-template-columns, grid-template-rows or both, instead of creating a new track listing the nested grid uses the tracks defined on the parent.”

The linked page includes many examples and more detail.

As with any advanced techniques, you have to take into account your own target browsers to see whether you can use them in your own projects. It’s a well-written article and I learned a few more techniques that I can hopefully use at some point.