-
⚠️ Existing Container Query demos are broken in the latest Chrome Canary. It's just a small syntax change: 🥳 We're adding the ability to query container styles, not just size size. So we have to be explicit about query type, eg: size(min-width: 30em) and style(--card: large)Permalink On twitter.com
♻️ 38 Retweets ❤️ 207 Favorites Mood +1 🙂
-
Otherwise we would have confusion when you say eg: (min-width: 30em) which could mean either of these: size(min-width: 30em) style(min-width: 30em)On twitter.com
-
The syntax also allows you to query multiple size or style features in a single function: size((min-width: 30em) and (max-width:40em))Permalink On twitter.com
-
👀 In related news, Mozilla just opened a few interesting issues… bugzilla.mozilla.org/show_bug.cgi?id=1744219 bugzilla.mozilla.org/show_bug.cgi?id=1744221Permalink On twitter.com
-
It looks like the prototype in canary also now supports the range syntax: size(width >= 30em) And resolves em/rem queries based on the container font size, rather than the viewport default font size that MQs use. See: codepen.io/miriamsuzanne/pen/YzZjpMa?editors=0100Permalink On twitter.com
-
jh3yy Una ScottKellum shadeed9 stacykvernmo mxbck smashingmag css 5t3ph rachelandrew hankchizljaw davatron5000 etportis bramus shipslinky Heads up, since I know you all have demos and/or articles out there…Permalink On twitter.com