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

The main way I see this being used to style the contents of an individual "component" so that it fits based on the size of other components.

For example, in a real life example we have 10 different components in a row on a page (with 2px solid blue).
![image](https://user-images.githubusercontent.com/11502425/57971293-b9d4f800-79be-11e9-8243-0064b8762d9f.png)

When the menu opens thought, the images need to switch to display vertically, quite often with style changes to hide some elements, and change the spacing:
![image](https://user-images.githubusercontent.com/11502425/57971341-497aa680-79bf-11e9-8cc2-0b73ec4bb1ad.png)

If this were able to just trigger changes to the css that only applied within the target element border edge and within I think this would solve all the use-cases that I can think off (i.e. it doesn't have to be able to apply styles that would affect other elements).

In an example where we have to apply different css once a component (element) goes below 900px, Currently our solution involves using using ResizeObserver to insert a class onto that component once the box goes below 900px, but because one change in one component can affect another component (i.e. they trigger multiple ResizeObserver events) we can only remove the class once the element resizes back over 930px (+30px) to prevent "flickering".   

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

Received on Saturday, 18 May 2019 15:05:22 UTC