terribleMia’s avatarterribleMia’s Twitter Archive—№ 11,837

      1. ⚠️ 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 Twitter logo terribleMia’s avatar ♻️ 38 Retweets ❤️ 207 Favorites Mood +1 🙂
    1. …in reply to @TerribleMia
      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)
      Permalink On twitter.com Twitter logo terribleMia’s avatar ♻️ 2 Retweets ❤️ 20 Favorites Mood 0
  1. …in reply to @TerribleMia
    The syntax also allows you to query multiple size or style features in a single function: size((min-width: 30em) and (max-width:40em))
    On twitter.com Twitter logo terribleMia’s avatar ❤️ 6 Favorites Mood 0
    1. …in reply to @TerribleMia
      👀 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=1744221
      Permalink On twitter.com Twitter logo terribleMia’s avatar ♻️ 2 Retweets ❤️ 4 Favorites Mood +2 🙂
    2. …in reply to @TerribleMia
      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=0100
      Permalink On twitter.com Twitter logo terribleMia’s avatar ❤️ 1 Favorite Mood +6 🙂