terribleMia’s avatarterribleMia’s Twitter Archive—№ 10,029

    1. You can play with an early prototype of container queries in today's Chrome Canary updates! 🥳 1. Do the update 2. Go to chrome://flags 3. Search & enable "CSS Container Queries" 4. Restart the browser Explainer: css.oddbird.net/rwd/query/explainer/ Demos: codepen.io/collection/XQrgJo Thread: 🧵
  1. …in reply to @TerribleMia
    Create inline containers (for now) with: contain: layout inline-size When an element is contained like that, the inline-size (usually width) must be defined by context, rather than content. That's usually how we do layout anyway. (contain: layout size for 2D containers)
    1. …in reply to @TerribleMia
      Container queries look just like media queries, but with a different name: container (min-width: 30em) { blockquote { /* styles to apply above 30em */ } } See shipslinky's really great blockquote demo: codepen.io/dvdherron/pen/YzpywrZ Each quote responds to its own container!
      1. …in reply to @TerribleMia
        If you play with it, I'd love to see what you build! Remember, this is a combination of several experimental features – a real early, rough draft for people to play with and provide feedback. There are a whole load of caveats and stress cases that still need to be addressed.
        1. …in reply to @TerribleMia
          NOTE: In my original explainer I used some new query syntax that is not supported in the prototype. You may not be able to copy/paste demos from the explainer & expect them to work as is. Primarily… NOT YET: (inline-size > 30em) FOR NOW: (min-width: 30em)