[CSS] chore: add example for contain style

[bsmth]

This PR updates the contain interactive example to show a few more use cases in isolation.

Parent task:

• https://github.com/mdn/content/issues/19452

TODO:

• [ ] Improve example to be more self-explanatory. Currently, it demonstrates style containment, but counters are also affected by this and should be included somehow.

[welcome[bot]]

💖 Thanks for opening this pull request! 💖 Here is a list of things that will help get it across the finish line:

• If this is a new or updated CSS interactive example, please ensure that you followed the CSS styleguide - If this is a new or updated JavaScript interactive example, please ensure that you followed the JavaScript styleguide - If your changes affects any of the steps in our contribution docs, please also make the relevant changes there.

[bsmth]

1. Changes to CONTRIBUTING-CSS.md should be moved to a separate pull request.

Done in https://github.com/mdn/interactive-examples/pull/2274, I will revert the changes on this branch shortly

Reverted changes on this branch in https://github.com/mdn/interactive-examples/pull/2259/commits/78d0dfb9620a7f71a4a76d20df63378b6bc17517

[bsmth]

The counters are added as some of the contain values effect how the increment works, but I agree there's room for improvement on how it looks 😄

Let me leave a TODO open on the PR

[NiedziolkaMichal]

I see, counters are good idea in such case. If you could just make it more presentable, that would be great. Thank you!

[bsmth]

@NiedziolkaMichal myself and @Rumyra were discussing how to improve this one for a while. If there's no clear improvement here on this, we might close the PR or look at other ways to demonstrate counters and quotes versus other types of style containment

[NiedziolkaMichal]

Ok, what do you think about this?

[bsmth]

What do you think about this?

That demonstrates the functionality as expected, I think the tricky part is that there's a lot of information going on and it's hard to discern what's being highlighted. In general, is it possible to have two of these example boxes - one that demonstrates "layout" features and another which shows logic-related things (quotes and counters)?

[NiedziolkaMichal]

Yes, element with white border could be separated into two, so on the left side counters would be shown, while box with floating element would be on the right. Is that what you mean?

Also I am afraid that this whole counter example doesn't work on chromium browsers due to a bug. When "contain" property has its value changed, counter indexes are not updated.

[bsmth]

Yes, element with white border could be separated into two, so on the left side counters would be shown, while box with floating element would be on the right. Is that what you mean?

That's a good idea, having two sections in this one example

• counters / quotes in one place (above or left)
• layout demo in another place

Also I am afraid that this whole counter example doesn't work on chromium browsers due to a bug. When "contain" property has its value changed, counter indexes are not updated.

The related doc is here -> https://developer.mozilla.org/en-US/docs/Web/CSS/contain#using_the_style_value_for_containment looks like it works for Chrome there for me.

[NiedziolkaMichal]

Those examples from content repository are working fine on chrome, but only because they are static. Let me show you how created interactive example are working first on firefox, then on chrome:

https://drive.google.com/file/d/1C4ng-8f164qA_0ciBFzZgydfaaokntGL/view?usp=sharing

Could you check if on your PC, result is the same?

[NiedziolkaMichal]

I filed a bug report on chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1372435

[Rumyra]

It seems like you both have this pr in hand - I wonder whether we wait for the Chromium bug to be fixed however - it's true this example (due to the feature not personal) is already a little confusing...

[bsmth]

I wonder whether we wait for the Chromium bug to be fixed

The contain feature works in Fx, so I would be okay with merging it, personally. The example has to be improved so we're demonstrating one thing at a time. I'm happy to revisit this one in the coming week to see if there's another way to show this off.

[Rumyra]

Yeh to be more explicit I think in this case the chromium bug adds confusion to how this works which we might want to avoid if pos

[bsmth]

Hi @NiedziolkaMichal, I've revisited this one and made a number of improvements. I've made the decision not to add style containment to this as it's causing confusion trying to demonstrate too many things. I'm instead improving the isolated example at the bottom of the page.

[NiedziolkaMichal]

I am sorry but this requires number of improvements:

• In dark mode, text is white on white background, so it's impossible to read it.
• When this example gets deployed, width of the iframe is going to be about 770px or less. In such conditions, most of your text is outside of iframe area or obscured by Fixed box element box. You can change width of example window, by opening dev tools on the right and resizing it.
• When width of the iframe gets to mentioned 770px, there is no visual difference between layout and paint values.
• I feel there is just too much to read. In almost all existing CSS examples, simply switching between values gives general understanding of what property does, so only some placeholder text is needed.

[bsmth]

Thanks @NiedziolkaMichal, I'll take a look at making these changes.

[bsmth]

Thanks @NiedziolkaMichal, I think I've addressed your comments, could you take a look?

• [x] dark mode works as expected
• [x] rewritten to work at 770px or less
• [x] removed excessive text descriptions

[bsmth]

Thanks, Dipika, taking a look at your review comments now 👍🏻

[NiedziolkaMichal]

@bsmth Your changes are great, example looks very well now.

[bsmth]

Thanks, all. I think we're ready to merge if I could get a +1 it would be great 😄