I accidentally reinvented CSS progress() and then I published it anyway.

A CSS framework called Zeus was released by a friend named Stavros Lazaris. The idea of the framework's fluid engine caught the attention of the reporter, leading to an exploration of CSS properties and their behavior. The reporter discovered that a container query inline unit called cqi, which scales between a minimum and maximum value based on the container size, could be used to create more flexible and responsive designs.

However, the reporter found that this formula had limitations, as it couldn't directly apply to certain CSS properties like transition-duration, font-weight, opacity, or scale. The reporter realized that these properties required different units and couldn't be combined with the cqi directly. To fix this issue, the reporter proposed a reordering of operations.

By dividing lengths beforehand and then multiplying by cqi, the reporter found a solution that allowed these properties to adapt to the container size seamlessly. The reporter demonstrated this concept with examples using calc() function, which has been supported since 2023. By utilizing the progress() function in CSS, the reporter was able to create a single variable, --t, that could be used across various properties, providing a consistent and smooth transition throughout the design.

This innovative approach not only solved the initial problem but also opened up new possibilities for creating more fluid and adaptable designs using CSS alone.