[csswg-drafts] Apply transitions to media/container queries [css-contain][css-transitions] (#6581)

scottkellum has just created a new issue for https://github.com/w3c/csswg-drafts:

== Apply transitions to media/container queries [css-contain][css-transitions] ==
Add the ability of transitioning between `@media` and `@contain` states. This would enable fine-tune control over how things change as viewport and container sizes change with easing.

This would enable at least two things that is not possible in CSS:
- Interpolation of multiple properties across screen/container sizes.
- Interpolation of text on an easing curve, as opposed to linear with viewport/container unit interpolation.

Some examples to show the need for this feature. These demos are acting as if text in page modules can be interpolated based on container width units in the first column, and transitioned + eased queried properties in the second column.

<table>
<tr>
  <th>Possible with container unit interpolation</th><th>Possible with state transitions and easing</th>
</tr>
<tr>
  <td><img width="1455" alt="A demo showing The Atlantic’s home page with various entry modules scaled as if with linear interpolation. This results in text not having a good size range and the typography  is a little flat." src="https://user-images.githubusercontent.com/377189/132379276-f8271bb0-86cd-4c29-90c0-017c85e2b00d.png"></td>
  <td><img width="1483" alt="A demo showing The Atlantic’s home page with various entry modules scaled as if with easing. The result is more rich and dynamic typography." src="https://user-images.githubusercontent.com/377189/132379274-6e448eb2-0565-4f4f-82d8-7e184dcdd6fe.png"></td>
</tr>
<tr>
<td>
<img width="1460" alt="A Nike product demo showing product names linearly interpolated resulting on the text being too big at smaller sizes." src="https://user-images.githubusercontent.com/377189/132380769-7ef97994-330d-428d-b8dc-84a1b5855d70.png">
</td>
<td>
<img width="1409" alt="A Nike product demo with an interpolation curve showing smaller product names that ramp up to large sizes more gradually." src="https://user-images.githubusercontent.com/377189/132380768-2588be5d-06b3-4b43-b0af-aeeb047b067e.png">
</td>
</table>




Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6581 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 7 September 2021 16:48:39 UTC