css-examples icon indicating copy to clipboard operation
css-examples copied to clipboard

Published 20 hours ago • verified publisher icon mdn

The interactive examples didn't have width and height CSS properties, which make them invisible in other editor environment.

Open JohannesMolla opened this issue 2 years ago • 2 comments

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

What specific section or headline is this issue about?

Backgrounds and Borders

What information was incorrect, unhelpful, or incomplete?

CSS properties of image elements should be placed in the interactive code. I tried to copy the code on sublime but didn't see the image, until I figured out that it needs width and height to be displayed.

What did you expect to see?

Full CSS properties

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

Everything on the MDN is fantastic, I enjoyed learning on MDN platform 💖

MDN metadata

Page report details
  • Folder: en-us/learn/css/building_blocks/backgrounds_and_borders
  • MDN URL: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders
  • GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md
  • Last commit: https://github.com/mdn/content/commit/acfe8c9f1f4145f77653a2bc64a9744b001358dc
  • Document last modified: 2023-07-07T07:19:19.000Z

JohannesMolla avatar Oct 23 '23 12:10 JohannesMolla

This is a limitation of the interactive editor we use for CSS examples.

The "Background images" example has two <style> elements:

  • The first one is hidden: https://github.com/mdn/css-examples/blob/2d33a1c5aede31cc0e15415bce708950de582675/learn/backgrounds-borders/background-image.html#L7-L23
  • The second is what the editor shows you: https://github.com/mdn/css-examples/blob/2d33a1c5aede31cc0e15415bce708950de582675/learn/backgrounds-borders/background-image.html#L25-L33

It would make sense if the user could see the non-editable portion of the CSS.

caugner avatar Oct 25 '23 14:10 caugner

Hey @caugner, I've done a brief overview of the mentioned HTML file and linked JS and CSS files. I am ready to work on this issue. Is there any specific design or do we need to do it ourselves? Could you give me more context?

iprinceroyy avatar Oct 27 '23 10:10 iprinceroyy

I think this may no longer be valid since the examples have been updated (and moved into page content). @caugner do you want to quickly have a look?

bsmth avatar Oct 27 '25 13:10 bsmth