contain-intrinsic-size - improve docs

[hamishwillee]

contain-intrinsic-size docs are incomplete and inaccurate.

More work to be done:

• Need to update https://github.com/mdn/data/blob/main/css/properties.json
• Need docs for
  • contain-intrinsic-width
  • contain-intrinsic-height
• Perhaps some examples
• Update CSS containment with
  • Information about contains-intrinsic-size in the appropriate section on size containment.
  • information about content-visibility as this also triggers CSS containment.

This is related to #20876

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/Shorthand_properties
• /en-US/docs/Web/CSS/contain-intrinsic-size

(this comment was updated 2022-09-23 12:30:11.748288)

[estelle]

Can we ease the reading level down? i.e. intrinsic, mitigated, and computational may not be understood by native English speakers and we have a large ESL audience.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment mentions:

The specification defines a single CSS property contain ....

we should likely add this to that page.

[hamishwillee]

FYI @estelle , I find auto a little tricky. The theory is pretty simple - it saves the natural/rendered size of the element whenever it is outside of size containment and then uses that instead of the stated length when appropriate.

What I don't get is why you would bother - the spec indicates this is only really used offscreen and will switch to using length for on-screen. I'm in discussion here w3c/csswg-drafts#7769 (comment) - might just be being stupid.

[hamishwillee]

FYI, I get the auto thing now; it makes sense and this documentation is correct.

The auto option is mostly to get the benefits of size containment for offscreen elements without developers having to be too precise about the size of the element. It makes sense when you're skipping rendering the child elements. You don't have to worry about the fact that the length will be used when you're not skipping child elements because in this case as the element becomes visible you leave size containment and start rendering them.

If you're on screen and deliberately getting the benefits of size containment then it is up to the developer to make sure that the size is properly calculated.

[estelle]

So much easier to read! Thank you.

[bsmth]

Thanks all. I'm going to merge this in the current state 👍🏻 it looks like we can revisit the auto value if there's an outcome from the separate discussion on the benefits there :)