Chris Coyier Explores “Modern CSS in Real Life”

Chris Coyier — co-founder of Codepen and former owner of CSS-Tricks — gave a presentation at this year’s RenderATL conference on modern CSS features and their relevance in real life situations. He’s since converted that presentation into an extensive blog post that highlights five ways CSS has matured in recent years, including logical properties, container queries, and cascade layers.

Some of the stuff he covers, like cascade layers, might seem pretty arcane even if you’ve been doing web development for awhile. But Coyier does a great job of highlighting practical scenarios where it can be really helpful. (For instance, using layers to override third-party styles like Bootstrap.)

I’m still making my way through Coyier’s post, it’s that dense. I’ve spent most of my time so far delving into his examples for logical properties and considering their impact and advantages. Now, there are some logical properties that are already in wide use. If you’ve ever set an element’s border-color or margin, then congratulations: you’ve set a logical property. But there are many other logical properties — e.g., inline-size, margin-inline, and overflow-block — that look a little weird.

The reason for those properties might be a bit abstract and, to be honest, trivial at first blush. As MDN puts it, “logical properties and values… provide the ability to control layout through logical, rather than physical, direction and dimension mappings.” Instead of setting an element’s width, for example, you’d specify its inline-size, which “defines the horizontal or vertical size of an element’s block, depending on its writing mode” (MDN again).

That last bit — “depending on its writing mode” — is the key. And it affects how you think of some pretty basic layout concepts. Chances are, when you think of inline vs. block layouts, the former is horizontal and the latter is vertical (i.e., block elements like <div> and <p> stack on top of each other). But when you take writing mode into account, a subtle distinction occurs:

• “Inline” simply refers to the direction that text flows. If you’re an English speaker, then that’s horizontally, from left to right.
• “Block” is the direction that’s perpendicular to whichever way the text flows. If you’re an English speaker, then that means vertically, from top to bottom.

If you’re like me, then you’ve probably never set a website’s writing mode, that is, the direction and orientation of its text. Although I’ve worked on a few non-English websites, the text was always left-to-right and oriented horizontally. But other languages are right-to-left (Arabic) or possess a vertical orientation (Chinese, Japanese, Korean, Mongolian).

When accommodating these languages, thinking of website layout in terms of width and height doesn’t necessarily make the most sense, whereas inline-size — which can be either the width or the height, depending on the context — is more, well, logical. As Coyier puts it, “The longer I do computers, the more I appreciate well-named things and cohesive systems.” (Coyier’s post contains several real world examples of how logical properties can dramatically improve multi-lingual and translated webpages.)

I’m constantly tinkering with Opus, so I’ve taken some time to experiment with logical properties if only for the practice and educational experience. Converting existing large-scale frameworks, on the other hand, to logical properties might not make a lot of business sense. However, logical properties are a fascinating development for CSS. They’re proof that the language is continually evolving beyond its humble origins to ensure that the web is as open and accessible as possible while still giving developers the tools and freedom to build, design, and create as they see fit.