This page shows the source for this entry, with WebCore formatting language tags and attributes highlighted.


Advanced CSS (blend modes and subgrids)


The article <a href="" source="24 Ways" author="Andy Clarke">Z’s Still Not Dead Baby, Z’s Still Not Dead</a> 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 <c>background-blend-mode</c>, but it can happen. There's not only <c>background-blend-mode</c>, there's also <c>mix-blend-mode</c> and <c>filter</c>, 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. <img src="{att_link}austinseven850ad.png" href="{att_link}austinseven850ad.png" align="none" caption="Samples of Austin Seven 850 Ads" scale="50%"> 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 <i>subgrids</i>, but ends up using a second grid within the first grid because browser support for nested grids is good, whereas no-one <a href="">supports subgrids except for the latest version of Firefox</a>. The MDN documentation for <a href="">Subgrids</a> explains that it differs from nested grids in that <bq>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.</bq> 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.