One of the most fascinating aspects of CSS Grid to me is how you can use a single property (grid-template-areas) on a grid parent to describe the entirety of its complex layout. In this article, I’m going to go over how easily you can use this property to describe a grid layout.

I thought this was cool, but one big issue with it is that if JavaScript is disabled, or if something else goes wrong with the code, then absolutely nothing is rendered to the page. This got me thinking - what if I could build a web component that enhanced a regular HTML table? Here's what I came up with.

The prefers-contrast media query indicates whether someone prefers more or less contrast within the boundaries of your sites design. This is in contrast to the forczed-colors media query, which overwrites all your styles. To me it was clear that they served different purposes: one to indicate a preference for more (or less) contrast, the other wanted 100% certainty that their colors were respected. Clear difference, clear implementation. Except that turned out to be wrong.

Anchor positioning might be one of the most exciting features coming to CSS. It is currently available under an experimental flag in Chrome Canary, and after playing with it for a bit, I couldn’t stop myself from sharing what I found. In this article, I will show you some of my experiments.

They make CSS into a more coherent and interrelated system that is easier to learn and reason about. They ready websites for language translation. So since they are better and support is green across the board, why aren’t they taking over all usage?