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
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.
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:
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
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.