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

Two thoughts:

**1. Element can not Resize**
Would one solution to fix the looping would be for the elements that you have added this, in the layout stage apply an exact width and height to the element (which can not change) which would stop the contents pushing it out (causing loops, flickering) which means a change to the css of the contents would not cause a re-layout / loop / flickering.

Some thoughts though, obviously this works for items that have box-sizing: border-box; but not for the standard box model.

~ sibling selectors couldn't be supported by this

**2. Secondary Layout is last and only occurs once**
The other solution that occurs to me is that the secondary layout / paint stage is the last and only happens once, even if it breaks the conditions of the original css.

For example, lets say you have the box and below 900px you are going to apply a border: 2px solid pink;

After the element drops to 899px, a 2px border is applied increasing size to 901px breaking the condition but because condition on the first run through it does not then do a third run through.

The reason I'm not sure about this particular method is that if you have multiple conditional css based on size on nested children.  

**3. Ranges**
If you go below 900px it triggers the change, but you have to go above 930px to trigger it back, this stops loops and flickering and this our current solution in javascript and works for nested children.


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

Received on Sunday, 19 May 2019 02:51:42 UTC