CSS breakpoints via container queries
Actually, breakpoints are hard-coded : 640px , 480px, and 320px
CSS variables are not able to be used as breakpoints, as they are... uh... variables.
There are some proposal to the standards, as
CSS @element queries and CSS Environment variables, and some tests in browsers.
Wait & see.
Why we can't , in French https://dascritch.net/post/2019/06/05/Retravailler-un-lecteur-web-audio-dans-les-petites-largeurs#soucis_en_def
So we can, but you'll need to dive into themes making.
Bug re-opened and titlable, as may be do-able via new CSS layers and Container. https://dutchcelt.nl/posts/stop-the-cascade/
The new @rule @container (inline-size)just got from CSSWG a fantastic improvement : we can use var() !
@container (inline-size > var(--small)) {
}
So now, we can insert it correctly without anty polyfill. Right here, right now, and waits for browsers to implement it !
Document : https://developer.chrome.com/blog/whats-new-css-ui-2023/#container-queries