Re: [csswg-drafts] [css-conditional] Applying styles based on an elements size (@media for elements) (#3852)

@tabatkins I understand this, can we possibly use this issue to take our twitter thread and start thinking of a way to make this happen. Especially since I'm digging further into components - this will be needed (eg: just look at the video element in Chromium 😉). I think there are a few approaches to potentially solving this (there may be more, haven't thought this aspect through too far). Feel free to correct me where I may have things wrong.

1. @dbaron approach (which I think you mentioned was yours as well) which is is to base this off of containment thus we know that the children can't impact its parent and thus we can resolve styles against layout once it is resolved.

This has the positive side of being synchronous and thus works as an author would expect CSS to work today. This would however require an additional cascade/layout pass since we can't compute and cascade the appropriate styles until after layout has completed. This also has the unfortunate benefit of not being able to adjust the layout due to the containment necessity to establish the contract for completing cascade/layout cycle.

2. We add an `async` keyword to CSS, which authors are used to and would actually just hook into ResizeObserver under the hood. This could take on any type of naming but I personally would lean towards just keeping the resize-observer name by making it an at-rule and taking a dimension property with computer length, similar to the JS method. So `@resize-observer(calc(width >= '500px')) {...}`. This would allow the UAs to detect the cycle issues and abandon based on the ResizeObserver specification. I realize I also just introduced some additional logic notations that would need to be added to syntax and calc() (or we can say that these only work in `@resize-observer` but I can see them being beneficial within calc in general scenarios.

3. Both. I think there is value to 1 and 2 for different reasons. I'm also open to other ideas but I think the moderate success of ResizeObserver and constant desire for this feature we should finally spec out something that makes sense. I'm fine adding it to RO L2 and we can hash it out later?

Thoughts?

ccing: @dbaron @FremyCompany 




-- 
GitHub Notification of comment by gregwhitworth
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3852#issuecomment-493633121 using your GitHub account

Received on Saturday, 18 May 2019 00:26:42 UTC