Container Queries | 12 Days of Web

A lot of new CSS features gained major browser support recently or will gain it soon. In this blog post, I will explain all the new CSS features you can start to use in 2023.

Update: August 30, 2022 Container queries are now supported in Chrome 105. This is a momentous occasion. Developers have been wanting container queries for years and now they have finally been implemented in a browser. Safari will soon follow in Safari 16. Firefox is working on implementation but has not shared when they think it […]

A repo with links to posts of things around container queries. - sturobson/Awesome-Container-Queries

In more recent years, design systems and component libraries have gained popularity. There is also a desire to build once, deploy anywhere. Meaning a component developed in isolation is intended to work in any number of contexts to make building complex interfaces more efficient and consistent. CSS container queries have landed and are now available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout.

Kilian is a front-end developer with over 20 years of experience that switched from building websites to building apps to build websites with. He is interested in modern web development, desktop app development and new technologies, and regularly speaks about topics like responsive websites, design systems and Electron. Kilian is a frequent open source contributor.

To learn more about the behaviors of container query units, we'll explore three fluid typography techniques applied via a "mixin" using custom properties. These upgraded methods will produce truly responsive typography, regardless of context.