fix(css): update 'display' interactive demo

[OnkarRuikar]

• fixes Wrong Visulation of Display Property content#31437

Screenshot

[dipikabh]

This is close. But I think the additional text in the example does not fully clarify the element on which display is being set, especially considering that the OP in the issue expected each child element to have its own display setting.

Brainstorming an idea here. How about we add a description outside the div to explain the example, something like "The orange element represents the div on which different display values are set. It contains three child elements." This can be followed by:

    <div class="example-container">
      some text A
      <div id="example-element">
        <div class="child">Child 1</div>
        <div class="child">Child 2</div>
        <div class="child">Child 3</div>
      </div>
      some text B
    </div>

With display: none, the current text in the proposed PR reads: "Change display property of this div element.". It refers to the div element that gets hidden when display: none. Instead of using a complete sentence, using placeholders like "some text A" and "some text B" could demonstrate the absence of the div more effectively. With display: none, the output would read "some text A some text B"", indicating that the div is not displayed.

Let me know what you think.

[OnkarRuikar]

How about we add a description outside the div to explain the example, something like "The orange element represents the div on which different display values are set. It contains three child elements." This can be followed by:

@dipikabh Yes, we need to be more explicit.

[estelle]

LGTM. @dipikabh I'll let you merge both PRs at the same time if this PR is ok with you.

[dipikabh]

Yes, we need to be more explicit.

@OnkarRuikar, should we add this then:

Suggested change

	<div id="output" class="output large hidden">
	<section id="default-example" class="default-example">
	<div class="example-container">
	<div id="output" class="output large hidden">
	<p>The <code>display</code> property is set on the <code>div</code> element enclosed by the orange dashed border.
	You can apply different <code>display</code> values on this element to observe their effects on its layout
	in relation to adjacent elements.
	Note that this element contains three child <code>div</code> elements.
	<section id="default-example" class="default-example">
	<div class="example-container">

This is how it would look:

[dipikabh]

@OnkarRuikar I didn't realize you opened another PR to add the statement :)

[dipikabh]

Oh, that PR is in mdn/content.

I have not noticed other instances where we discuss or refer to the "Try it" demo examples in content.

It might be best to keep the interactive demo examples self-contained. Let me know what you think - we can close mdn/content#31672 and instead make the explanatory updates (as suggested above) to the code within this repo.

[OnkarRuikar]

@dipikabh that's too much text in the output. On narrow screens, readers will have to scroll to see the actual target div.

I have not noticed other instances where we discuss or refer to the "Try it" demo examples in content.

We do have some "Try it" sections with pros, e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/max#try_it

In the mdn/content PR we can put the text below the macro call. WDYT?

[dipikabh]

I am still trying to see if we can maintain this info in the example itself. How about using the text from your content PR:

or even a more shortened version:

Else the last option is to add text in content after the macro call.

[OnkarRuikar]

Let's pic the shortest version Apply different <code>display</code> values on the dashed orange-bordered <code>div</code>, which contains three child elements. bef7553

[dipikabh]

Thanks for the improvements, @OnkarRuikar!

[OnkarRuikar]

@dipikabh you'll have to merge #2716 as well to make it live.

[dipikabh]

you'll have to merge #2716 as well to make it live.

Done 👍

[wbamberg]

Thanks! FWIW I agree with @dipikabh that we should try very hard to keep interactive examples self-contained. And that really any kind of exposition in the examples is unfortunate, but sometimes as in this case it is unavoidable (as also for instance here: https://developer.mozilla.org/en-US/docs/Web/CSS/position). But I think what you have here is perfect :).