Reiterating on my idea for CSS conditions I found a new way for creating such conditions using existing CSS features. You probably know Roman Komarov’s article “Conditions for CSS Variables” where he describes how you can create binary conditions for properties that support calc(). This was a great inspiration and together with a CSS trick I learned from Lea Verou called “Static Interpolation” I was able to create CSS conditions that are similar to media queries and support (nearly) all CSS properties.

The concept of CSS container queries (aka element queries) has been around for quite some time, you can read more about them in this great article from Ethan Marcotte. They can be used today with JavaScript libraries like EQCSS or my own cq-prolyfill. But from the browsers side there is not much progress on this topic. Mainly because the proposed functionality cannot be implemented without mixing style computation and layout or introducing some sort of “viewport elements”, which both seem to be impractical or bad for performance.

I think there is an easier way to achieve what web developers want, without having to mess around with browser internals or circularity issues.

Currently it is not possible to make a custom property in CSS reference itself. But this could be useful for several cases, e.g. if you want to modify a number for every nesting level of the same element:

:root {
	--border-width: 50px;
}
.component {
	border: var(--border-width) solid red;
	--border-width: calc(var(--border-width) / 2);
}

When it comes to responsive images there are two main topics that are handled by <picture>, <source>, srcset and sizes:

Two months ago I posted about a proposal for container queries (aka element queries). This article is about an update to the syntax and an in-depth explanation of the intended browser implementation.

A “Prolyfill” or “forward polyfill” is similar to a Polyfill but instead of providing a feature which is already implemented by some browsers or part of the specification, it enables a new feature which will probably be implemented by a browser in the future. If a Prolyfill gets a great deal of attention from web developers, browser makers may think of implementing it.

In a discussion on GitHub I came up with the idea of a slightly different syntax and function for container queries which I want to explain in more detail here. Container Queries are a concept described by Mat Marquis on A List Apart as an evolution of element queries. If you want to know more about container queries in general, take a look at the RICG repositories on GitHub: container-queries, cq-demos and cq-usecases.