You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Examples in the introductory CSS Demo, section.css-editor-container.
What is the problem?
While each demo is nice to learn the specific CSS property by the given three or four examples, the demos are missing contextual information:
What are the grid container's (#example-element) CSS grid properties? The rules (e.g. grid-template-rows: repeat(3,minmax(40px,auto)) in one example, grid-auto-rows: 40px in another; grid-template-columns: 1fr 1.5fr 1fr in one, grid-template-columns: 1fr 1fr 1fr in another) are not shown, yet relevant for the property under experimentation.
What are each grid item's (One, Two, Three...) CSS grid properties? One example's One item has grid-column: 1/3, Two has grid-column: 2; another's example Two item has grid-column: auto/span 3; grid-row: auto/span 2. Again, to grasp the behavior of the selectable sample values, this contextual information is important.
And because each page's CSS Demo setup is slightly different from the other pages, one page's demo setup cannot be "cognitively reused! for the other pages' demos, as several properties have changed.
It's sometimes not clear which element is under test, e.g. on https://developer.mozilla.org/en-US/docs/Web/CSS/grid everything changes visually per sample value, which makes it hard to understand it's the grid container's grid property which is being changed.
What did you expect to see?
The same demo setup on each CSS grid property page, which the property on discussion being the interactive property.
Source code for the whole demo HTML and CSS setup - even more awesome if the whole HTML and CSS can be live-edited ("let's add one more grid item; let's fiddle with the grid-template-rows property, ...)
Did you test this? If so, how?
"Yes".
The text was updated successfully, but these errors were encountered:
Abdull
changed the title
Content bug: Most CSS grid introductory CSSD
Content bug: Most CSS grid introductory _CSS Demos_ are missing relevant contextual information
Dec 7, 2021
FWIW while I think there is some merit in this issue I don't think it's at all solvable in the context of interactive examples, which don't show all the details of the example, and whose format isn't really intended to do that.
It's a design choice of the interactive examples not to show the complete context, so as to provide a simpler, shorter example suitable for the top of the page. It wouldn't be appropriate to show screenfuls of code at the top of the page.
It's true that this works less well for properties whose effect is very context-dependent. So if that's seen as a big enough problem for, say, the grid properties, then the fix is to remove them.
FWIW I would be against that and think the issues here are not so great. For example in If you want complete examples showing the complete context you really need to look at examples further down the page: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow it seems pretty obvious to me what the effect of this property is, even without knowing all the other grid values.
FWIW while I think there is some merit in this issue I don't think it's at all solvable in the context of interactive examples, which don't show all the details of the example, and whose format isn't really intended to do that.
It's a design choice of the interactive examples not to show the complete context, so as to provide a simpler, shorter example suitable for the top of the page. It wouldn't be appropriate to show screenfuls of code at the top of the page.
What about introducing a "Show complete context" widget (accordion, button)? This way, the top-of-the-page examples stay short by default, yet still allow to give further details on demand.
What page(s) did you find the problem on?
Specific page section or heading?
Examples in the introductory CSS Demo,
section.css-editor-container
.What is the problem?
While each demo is nice to learn the specific CSS property by the given three or four examples, the demos are missing contextual information:
#example-element
) CSS grid properties? The rules (e.g.grid-template-rows: repeat(3,minmax(40px,auto))
in one example,grid-auto-rows: 40px
in another;grid-template-columns: 1fr 1.5fr 1fr
in one,grid-template-columns: 1fr 1fr 1fr
in another) are not shown, yet relevant for the property under experimentation.grid-column: 1/3
, Two hasgrid-column: 2
; another's example Two item hasgrid-column: auto/span 3; grid-row: auto/span 2
. Again, to grasp the behavior of the selectable sample values, this contextual information is important.What did you expect to see?
grid-template-rows
property, ...)Did you test this? If so, how?
"Yes".
The text was updated successfully, but these errors were encountered: