Fix issue 15872: remove live sample inclusions in CSS

[wbamberg]

Part of #15872 : this removes the transclusion parameter from all EmbedLiveSample calls in the CSS docs.

[github-actions]

Preview URLs

• https://pr16013.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/:-moz-list-bullet
• https://pr16013.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/@counter-style/negative
• https://pr16013.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/@counter-style/pad
• https://pr16013.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
• https://pr16013.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/box-orient
• https://pr16013.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/flex-grow
• https://pr16013.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/flex-wrap
• https://pr16013.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/font-language-override
• https://pr16013.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/font-variant-alternates
• https://pr16013.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/font-variant-ligatures
• https://pr16013.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/font-variant

Flaws

Note! 10 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/CSS/font-variant-ligatures
Title: font-variant-ligatures
on GitHub
Flaw count: 1

• macros:
  • /en-US/docs/Glossary/contextual_forms does not exist

External URLs

URL: /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
Title: Stacking context example 1
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/CSS/font-variant
Title: font-variant
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/CSS/flex-wrap
Title: flex-wrap
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/CSS/@counter-style/pad
Title: pad
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/CSS/@counter-style/negative
Title: negative
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/CSS/flex-grow
Title: flex-grow
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/CSS/box-orient
Title: box-orient
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/CSS/font-variant-alternates
Title: font-variant-alternates
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/CSS/:-moz-list-bullet
Title: ::-moz-list-bullet
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/CSS/font-language-override
Title: font-language-override
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/CSS/font-variant-ligatures
Title: font-variant-ligatures
on GitHub

No new external URLs

(this comment was updated 2022-05-14 04:40:56.395815)

[OnkarRuikar]

In stacking_context_example_1/index.md

Can we increase the height of div4 to 80px. Like div1 and div3 have 80px.

[OnkarRuikar]

Just a question. You have used different flavors of height arguments in the macros:

{{ EmbedLiveSample('Setting horizontal box orientation', '', 100) }}
{{ EmbedLiveSample('Example', '', '300px') }}
{{ EmbedLiveSample('Setting font ligatures and contextual forms', '', '700') }}

They all work, but what is the preferred way to provide height?

As per https://developer.mozilla.org/en-US/docs/MDN/Structures/Live_samples#live_sample_macros

height
The height of the <iframe> to create, specified in px. This is optional; a reasonable default height will be used if you omit this. Note that if you want to use a specific height, you must also specify the width parameter. If you use only one of them, the default frame size is used.

Shouldn't we be providing widths here? Is the width requirement for mobile screens? In which case width is must?
If this doesn't work like this anymore then should we update the Live_samples document?

[wbamberg]

Just a question. You have used different flavors of height arguments in the macros:

{{ EmbedLiveSample('Setting horizontal box orientation', '', 100) }}
{{ EmbedLiveSample('Example', '', '300px') }}
{{ EmbedLiveSample('Setting font ligatures and contextual forms', '', '700') }}

They all work, but what is the preferred way to provide height?

I don't know. Usually I prefer to omit "px" but not sure it matters.

As per https://developer.mozilla.org/en-US/docs/MDN/Structures/Live_samples#live_sample_macros

height
The height of the <iframe> to create, specified in px. This is optional; a reasonable default height will be used if you omit this. Note that if you want to use a specific height, you must also specify the width parameter. If you use only one of them, the default frame size is used.

Shouldn't we be providing widths here? Is the width requirement for mobile screens? In which case width is must? If this doesn't work like this anymore then should we update the Live_samples document?

width used to have an effect in the old platform but AFAIK it is ignored in Yari.

Yes, we should probably update the meta-docs :). See also mdn/yari#5016.

[wbamberg]

According to mdn/yari#5016 (comment) it looks like we ought to omit "px", although I think it works either way.

[teoli2003]

So, these things were transclusions of themselves (I don't want to see yari's code to handle this parameter)

[OnkarRuikar]

According to mdn/yari#5016 (comment) it looks like we ought to omit "px", although I think it works either way.

Good find! Looks like we need to update the doc https://developer.mozilla.org/en-US/docs/MDN/Structures/Live_samples#live_sample_macros to remove px. It'll prevent future commits form using `px'.

[teoli2003]

Good find! Looks like we need to update the doc https://developer.mozilla.org/en-US/docs/MDN/Structures/Live_samples#live_sample_macros to remove px. It'll prevent future commits form using `px'.

Yes, please.