Building a PostCSS workflow
For a while, SASS was all we needed. I was OK with it only being available as a Ruby Gem (the original implementation was written in Ruby), then I was happy when LibSASS came around (written in C) and...
Plans for this blog in 2022
Rather than write about whatever catches my eye, I want to be a little more disciplined about what I write. These are some of the things I plan to do. If there's something that particularly catches my...
Resizing with CSS
There are times when it would be really nice if we could resize a piece of content on a page without having to use Javascript. That's where the resize property comes in handy. Using the property in an...
Container Queries and new CSS to go along with them
The CSS Containment Module Level 3 has a formal definition of containers, container queries, and container relative length units. This post contains both parts that are supported in Chromium browsers...
Font synthesis in CSS
There are times when browsers are too helpful. When there is no font to render bold, italic or small-caps text the browser will or synthesize the styles with unpredictable results but, likely, not...
Font optical sizing
I came to optical sizing via variable fonts. The idea is that by having an optical sizing axis in your variable font you can control how the font looks at different sizes. For small text sizes,...
Native CSS nesting
Note: This feature is under development and there are currently no implementations in browsers, even behind flags. Do not use this in production unless you transpile with PostCSS or SASS. One of the...
Looking forward: CSS Layers and the @layer at-rule
Warning: This post is about CSS specifications that are still under development and, as far as I know, have no implementation in production browsers yet. Furthermore, the specification may change in...
Adding browserslist support to your project
A lot of the tools in my projects like Autoprefixer, Babel's preset-env and preset-modules use browserslist (yes that's the name, no typo) to decide if adding prefixes or transpiling is required. The...
CSS font variant attribute
The font-variant-* properties are used to control the appearance of text by enabling or disabling OpenType features available on the font. Not all fonts have the same set of OpenType Features...