Add container query post #135
Conversation
There was a problem hiding this comment.
This is great, @dvdherron 🎉
I left a few notes for clarification. I think you could also flesh it out with some screenshots or gifs of how your demo looks/works in canary - since most readers wont have it open (you could re-use one of them for the page header image as well). That might also be an opportunity to highlight more about how the same component using the same code can end up styled differently depending what container it is in.
|
|
||
| {% import 'embed.macros.njk' as embed %} | ||
|
|
||
| The `@container` query, that elusive feature developers have been requesting and proposing for years, has finally made its debut in browsers. Well, sort of. As of the latest version of [Chrome Canary](https://www.google.com/chrome/canary), the most recent `@container` query proprosal, developed by OddBird's own [Miriam Suzanne](https://www.oddbird.net/authors/miriam/), is available for use behind an experimental flag. What _are_ container queries exactly? And how do they work? |
There was a problem hiding this comment.
Might be good to credit David Baron for the original draft here?
There was a problem hiding this comment.
Made a more direct reference to his work.
| } | ||
| ``` | ||
|
|
||
| The `contain` property is part of the existing [CSS Containment Module](https://drafts.csswg.org/css-contain/). The `layout` value turns on [layout contaiment](https://drafts.csswg.org/css-contain/#valdef-contain-layout) on the container, which ensures that "nothing outside can affect its internal layout, and vice versa." The `inline-size` value is a proposed change to the Containment Module that would let authors explicitly declare in which dimension containment should be applied. |
There was a problem hiding this comment.
Give a similar one-sentence description of size containment as well?
There was a problem hiding this comment.
Also @dvdherron this reads "The layout value turns on on the container." Is there a way to re-word that without saying on twice? Maybe, "... turns on for the container" or "the layout value initiates ... on the container" maybe activates?
There was a problem hiding this comment.
Mentioned size and cleaned up the layout sentence
| The `contain` property is part of the existing [CSS Containment Module](https://drafts.csswg.org/css-contain/). The `layout` value turns on [layout contaiment](https://drafts.csswg.org/css-contain/#valdef-contain-layout) on the container, which ensures that "nothing outside can affect its internal layout, and vice versa." The `inline-size` value is a proposed change to the Containment Module that would let authors explicitly declare in which dimension containment should be applied. | ||
|
|
||
| ### Apply @-rules at desired breakpoints | ||
| Now that the containment context has been defined, the `@container` rule is used to tell the browser when and how styles should change. |
There was a problem hiding this comment.
Tie this to the previous section? Maybe as simple as adding the phrase "inside each container" at the end of this sentence?
There was a problem hiding this comment.
Attached "inside each container" to the end.
Makes sense. These comments were all helpful. I'll add in some more graphics to make things more clear and address the rest of these comments below in the AM. Thanks for the feedback! |
There was a problem hiding this comment.
@dvdherron I love it! I left a few suggestions, but the only one I'd say is important for accuracy is the writing CodePen with a capital P at the end. Nice work.
|
|
||
| The `@container` query, that elusive feature developers have been requesting and proposing for years, has finally made its debut in browsers. Well, sort of. As of the latest version of [Chrome Canary](https://www.google.com/chrome/canary), the most recent `@container` query proprosal, developed by OddBird's own [Miriam Suzanne](https://www.oddbird.net/authors/miriam/), is available for use behind an experimental flag. What _are_ container queries exactly? And how do they work? | ||
|
|
||
| Bookmark Miriam's scratch site for updates: [Miriam's CSS Sandbox](https://css.oddbird.net/rwd/query/). |
There was a problem hiding this comment.
@dvdherron This sentence felt a little less defined the first time I read the article, but I know why it is here if I visit the site. I wonder if this line may be better suited either at the bottom of this post when you explain how to start OR keep it here, but perhaps include some additional explanation of what this scratch site is/is for.
There was a problem hiding this comment.
Did some rearranging here. Let me know if you think it reads better.
| } | ||
| ``` | ||
|
|
||
| The `contain` property is part of the existing [CSS Containment Module](https://drafts.csswg.org/css-contain/). The `layout` value turns on [layout contaiment](https://drafts.csswg.org/css-contain/#valdef-contain-layout) on the container, which ensures that "nothing outside can affect its internal layout, and vice versa." The `inline-size` value is a proposed change to the Containment Module that would let authors explicitly declare in which dimension containment should be applied. |
There was a problem hiding this comment.
Also @dvdherron this reads "The layout value turns on on the container." Is there a way to re-word that without saying on twice? Maybe, "... turns on for the container" or "the layout value initiates ... on the container" maybe activates?
|
|
||
| ## What's next? | ||
|
|
||
| It's still very early in the proposal process, so a lot regarding how container queries work could change. |
There was a problem hiding this comment.
@dvdherron This may be a great place to move that sentence about Mia's scratch site?
| - Search for "CSS container queries" and select `Enabled`. | ||
| - Restart the browser. | ||
|
|
||
| We'd love to see what you come up with. Tag us on [Twitter](https://twitter.com/OddBird) with a link to whatever you create and check out our collection of demos on [Codepen](https://codepen.io/collection/XQrgJo) for inspiration. |
There was a problem hiding this comment.
@dvdherron I believe CodePen has a capital "P".
There was a problem hiding this comment.
@dvdherron How would you feel if we forced people to the Grid view of this collection? https://codepen.io/collection/XQrgJo?grid_type=grid
There was a problem hiding this comment.
great idea. changed it to the grid layout and sorted them by newest added
|
@mirisuzanne @stacyk I think this addresses all of your comments. Ready for a proper review. |
|
|
||
| {% import 'embed.macros.njk' as embed %} | ||
|
|
||
| In the latest version of [Chrome Canary](https://www.google.com/chrome/canary), the most recent `@container` query proprosal, developed by OddBird's own [Miriam Suzanne](https://www.oddbird.net/authors/miriam/), is available for use behind an experimental flag. Miriam's [proposal](https://github.com/w3c/csswg-drafts/issues/5796) builds upon the ideas previously proposed by others, in particular David Baron, who wrote the [original draft](https://github.com/dbaron/container-queries-implementability). |
There was a problem hiding this comment.
Accidental indent?
(this sentence also takes a few turns, which could maybe be simplified? But not a big issue)
There was a problem hiding this comment.
Made an attempt to simplify here. I think it reads better. Fixed the indent.
| In this demo (which only works in the latest version of [Chrome Canary](https://www.google.com/chrome/canary)), a `blockquote` is styled differently depending on the size of its container. | ||
|
|
||
| {{ embed.codepen( | ||
| id='YzpywrZ', |
There was a problem hiding this comment.
Quick thought on the pen itself: If the overall layout used a media-query, the fallback would show all three quotes in differently-sized columns. That might make the issue more clear for people not on Canary?
There was a problem hiding this comment.
Makes sense to separate the overall layout into a media query. Made that change in the CodePen. I think that helps to clear this up?
|
|
||
| It's still very early in the proposal process, so a lot regarding how container queries work could change. | ||
|
|
||
| There might be a way to contain only the block axis. Queries could also be made against properties like `aspect-ratio` or `orientation.` |
There was a problem hiding this comment.
This might read nicely as a list?
| There might be a way to contain only the block axis. Queries could also be made against properties like `aspect-ratio` or `orientation.` | |
| - There might be a way to contain only the block axis. | |
| - Queries could also be made against properties like `aspect-ratio`, `orientation`, or even [custom properties and layout states](https://github.com/w3c/csswg-drafts/issues/5989). |
Another interesting one you could add to that list is that we'll likely get container-based units
There was a problem hiding this comment.
added a reference to this
| title: Getting Started with Container Queries | ||
| sub: Now is the time to begin experimenting with a long requested layout tool. | ||
| author: davidh | ||
| date: 2021-04-02 |
There was a problem hiding this comment.
We should remember to update this again right before publishing. I think we could also feature it as a large card in the resources list.
There was a problem hiding this comment.
changed the date to April 5th for now
|
@dvdherron I'd like to read this anyway, so I'll do a quick review today before merging 👍 |
Cute animal pic
Because everyone likes pictures of animals.
Link to Trello card (if applicable)
https://trello.com/c/0fPwIGmo/126-i-want-a-post-about-getting-started-with-container-queries
If this PR relates to a Trello card, don't forget to reference this PR on the card as well.
Description
The commit messages say what you did; this should explain why and/or how.
Steps to test/reproduce
On the Resources page, look for the article tentatively titled "Getting Started with Container Queries"
Please explain how to best reproduce the issue and/or test the changes locally (including the pages/URLs/views/states to review).
Show me
Provide screenshots/animated gifs/videos if necessary.