Skip to content

[css-contain-3] What happens when the queried dimension is not contained by the nearest container? #6303

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
mirisuzanne opened this issue May 21, 2021 · 2 comments
Closed

[css-contain-3] What happens when the queried dimension is not contained by the nearest container? #6303

mirisuzanne opened this issue May 21, 2021 · 2 comments
Labels
Closed Rejected as Wontfix by Editor Discretion css-contain-3

Comments

@mirisuzanne
Copy link
Contributor

When we have nested containers, with different contained axes, do we only query the nearest container -- or do we query the nearest container which has the proper containment? For example:

<style>
  @container (block-size >= 100px) {
    p { background: green; }
  }
</style>

<html style="contain: size layout style; block-size: 200px;">
  <main style="contain: inline-size layout style">
    <p>query</p>
  </main>
</html>
  1. If we query the nearest ancestor that is a container (main), the match is false because the block-size is not contained, and cannot be queried
  2. If we look for the nearest ancestor with block containment (html), the match is true because the block size matches the given condition

I think in this case we want option 2, and should only consider an ancestor to be "a container" if it meets all the required containment criteria. But maybe I'm missing something?

@andruud @lilles - do you have thoughts on this?
@lilles
Copy link
Member

lilles commented May 25, 2021

What if you have multiple conditions whose closest container with the necessary containment is different?:

@container (block-size >= 100px) and (inline-size >= 100px) {}

@mirisuzanne
Copy link
Contributor Author

Yeah, that concern makes sense to me - I don't think we should go down that path. If we allow queries to search for proper containment, then the individual queries act as an implicit way of selecting their own containers. That could get pretty complicated, and hard to debug.

In which case, it's may be even more important that you are able to name containers, and query them explicitly.

@mirisuzanne mirisuzanne mentioned this issue May 25, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed Rejected as Wontfix by Editor Discretion css-contain-3
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mirisuzanne @lilles