cpu-audio icon indicating copy to clipboard operation
cpu-audio copied to clipboard

CSS breakpoints via container queries

Open dascritch opened this issue 6 years ago • 5 comments

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.

dascritch avatar Mar 19 '19 07:03 dascritch

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

dascritch avatar Jun 12 '19 13:06 dascritch

So we can, but you'll need to dive into themes making.

dascritch avatar Mar 12 '21 07:03 dascritch

Bug re-opened and titlable, as may be do-able via new CSS layers and Container. https://dutchcelt.nl/posts/stop-the-cascade/

dascritch avatar Sep 05 '22 07:09 dascritch

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 !

dascritch avatar Jan 06 '23 05:01 dascritch

Document : https://developer.chrome.com/blog/whats-new-css-ui-2023/#container-queries

dascritch avatar May 12 '23 06:05 dascritch