css-examples
css-examples copied to clipboard
Code examples that accompany the MDN CSS documentation
Adding Width and height
### MDN URL https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator ### What specific section or headline is this issue about? the generator itself ### What information was incorrect, unhelpful, or incomplete? generator is missing an option...
Hey @mdn/mdn-community-engagement! For the current embed live sample the width is set to `90%` with a `max-width` of `700px`. This might have worked with the previous MDN Web Docs layout,...
In this page [Auto-placement-in-CSS-Grid-Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#use_cases_for_auto-placement) By removing the property ```grid-auto-flow```, the content doesn't reflow to leave gaps as stated by the author. More details in this other issue [#HERE](https://github.com/mdn/content/issues/13721) > EMBED...
The example `variable-fonts/font-weight.html` does not employ the `label` tag, yet styles it: https://github.com/mdn/css-examples/blob/3e820cef34e6adaaf3e764d9379800fee741e435/variable-fonts/font-weight.html#L25-L29 https://github.com/mdn/css-examples/blob/3e820cef34e6adaaf3e764d9379800fee741e435/variable-fonts/font-weight.html#L53-L57
Although the `border-image-slice` `fill` keyword is correctly toggled for the actual inline styles applied to the example element, the CSS output (that can be viewed and copied by the user)...
All current examples on the border image generator ( https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator ) include linked images but it's possible to use gradients as `border-image-source` It would be nice to have an example...
Longer image paths cause box overflow on fixed height "CSS Code" container. Still copy-able just visually a bit off:  The fixed heights look like an artifact of the `float`...
I noticed there was an issue setting the saturation and lightness values when a hexa value is input into the hexa input when the color format was set to HSL....
It would be nice if instructions to run it locally are provided in order to test changes and be able to contribute with solutions to the proposed exercises.