from Hacker News

The ‘contain’ CSS property

by aabhay on 11/17/24, 6:25 AM with 16 comments

  • by TimesNewMe on 11/18/24, 2:48 AM

    Here's a recent article by Josh W Comeau that explains how this keyword is instrumental to using container queries: https://www.joshwcomeau.com/css/container-queries-introducti...

  • by Waterluvian on 11/18/24, 12:55 AM

    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/

  • by jjcm on 11/18/24, 4:39 AM

    Does anyone know if `contain` can increase paint performance of a webpage meaningfully? It seems like it can prevent unnecessary calls, but I'm wondering if there's any reasonable impact it gives.

  • by flockonus on 11/18/24, 4:36 AM

    As someone who occasionally works with front-end, the massive difference the various values of contain makes feels overly complex. Will be a tough one memorizing.

  • by h1fra on 11/18/24, 10:19 AM

    If someone can build an app (or an AI) that knows when to use the hundreds of different CSS keywords to optimize painting that would be great!

  • by Brajeshwar on 11/18/24, 2:41 AM

    This could have worked magic when we used to develop and design many embeddable widgets—the days of `!important` at the end of each line.

    Today, someone can become pretty good with CSS without ever considering how the Box Model will impact a container/wrapper.