3 ms·

This is one of those features that I suspect would be incredibly useful for some of my applications but I just can’t quite see it yet. Maybe a page of real worl

This is one of those features that I suspect would be incredibly useful for some of my applications but I just can’t quite see it yet. Maybe a page of real world examples might help, if anyone has any? This page got me a bit closer I think: https://css-tricks.com/almanac/properties/c/contain/ https://css-tricks.com/almanac/properties/c/contain/

p_l 2y ago
I found a probably unintended use in making it easy to ensure clipping worked right. The intended use of course is ensuring that the content in container does not need complex compositing outside its rectangle.
- aabhay 2y ago
  This optimization is pretty massive if used right. It means that you can draw this component directly on the pixel buffer of its parent instead of on a separate buffer of growable size that needs to then be copied over. Or if the browser renders things in order (to maintain a single buffer), this operation could be safely parallelized.
  - webstrand 2y ago
    a fun fact, `contain: paint` dosn't contain box-shadow or filters like drop-shadow or blur, so that's not strictly true.
    - have_faith 2y ago
      So text won’t visually bleed out but the texts box shadow still will? I’m guessing there’s a reason to why this is but it’s a bit strange.
aabhay 2y ago
This is great, thanks! As someone that has been working with css for over a decade, I was surprised to find out about the contain property, as I had never known about it and it seems extremely useful for hinting to the browser of optimizing DOM operations. If anyone with experience writing DOM/layout code for browsers knows anything about whether these optimizations are indeed used/meaningful, that would be stellar!
mst 2y ago
TimesNewMe linked https://www.joshwcomeau.com/css/container-queries-introduction/ https://www.joshwcomeau.com/css/container-queries-introducti... upthread. (I've got that and your link open but haven't read either yet, more coffee first, just wanted to make sure you didn't miss the other user's link :)

p_l 2y ago

I found a probably unintended use in making it easy to ensure clipping worked right. The intended use of course is ensuring that the content in container does not need complex compositing outside its rectangle.

aabhay 2y ago
This optimization is pretty massive if used right. It means that you can draw this component directly on the pixel buffer of its parent instead of on a separate buffer of growable size that needs to then be copied over. Or if the browser renders things in order (to maintain a single buffer), this operation could be safely parallelized.
- webstrand 2y ago
  a fun fact, `contain: paint` dosn't contain box-shadow or filters like drop-shadow or blur, so that's not strictly true.
  - have_faith 2y ago
    So text won’t visually bleed out but the texts box shadow still will? I’m guessing there’s a reason to why this is but it’s a bit strange.

aabhay 2y ago

This is great, thanks! As someone that has been working with css for over a decade, I was surprised to find out about the contain property, as I had never known about it and it seems extremely useful for hinting to the browser of optimizing DOM operations. If anyone with experience writing DOM/layout code for browsers knows anything about whether these optimizations are indeed used/meaningful, that would be stellar!

mst 2y ago

TimesNewMe linked https://www.joshwcomeau.com/css/container-queries-introduction/ https://www.joshwcomeau.com/css/container-queries-introducti... upthread. (I've got that and your link open but haven't read either yet, more coffee first, just wanted to make sure you didn't miss the other user's link :)