3 ms·

I believe that focal point of CSS understanding is that horrible display property. People just need to get that one as other stuff is relatively trivial. displ

I believe that focal point of CSS understanding is that horrible display property. People just need to get that one as other stuff is relatively trivial. display:xxx on some elements defines three things ( sorry, that is terrible architectural mistake authors of CSS have made initially ) 1. display defines "sibling requirement" how that element wants to be replaced among its neighbors. `div {display:inline-box}` tells container to treat that div a single glyph placed inline among other glyphs. 2. In some cases it also defines "layout manager" of element's content. E.g. display:table and display:inline-table tells the renderer that content shall be treated as table having tbody , rows, cells, etc. Same thing for display:flexbox, grid, etc. 3. In some cases it defines other things like display:none; display:list-item; Note: there is still no display:inline-list-item ... Ideally we should have these instead: 1. display: inline | block; - and just these two. 2. flow: auto | text | table | vertical | horizontal | grid...; - defines layout manager of element's content. 3. visibility: visible | hidden | none; - Note: visibility:none instead of display: none;

runarberg 6y ago
Don’t forget `display: contents` in which the element is instructed not to generate a box at all (neither inline nor block; I guess like `display: none` without hiding the content). But I think the spec maintainers are aware of this and CSS Display Module 3[1] allows multi-keywords so you can do stuff like: display: block grid; or: display: run-in ruby; or even: display: inline flow-root list-item; 1: https://drafts.csswg.org/css-display/#the-display-properties https://drafts.csswg.org/css-display/#the-display-properties
- c-smile 6y ago
  That is not a fix - just a cosmetic change that does not solve anything. display/flow MUST BE [1] different properties as they define orthogonal concepts. We should be able to define them separately. main { display: block; flow:grid; } @media handheld and (width < 100mm) { main { flow:vertical; } } Yet none from display shall go to visibility:none (as in my Sciter [2]). I've seen too many times errors like this: main table { display:none; } main.full table { display:block; } Which is obviously wrong, <table> element should have display:table or display:inline-table; [1] https://tools.ietf.org/html/rfc2119 https://tools.ietf.org/html/rfc2119 [2] https://sciter.com https://sciter.com
megous 6y ago
You can define those inisde/outside display styles separately, like `display: inline grid` or `display: block flex`
andrewmcwatters 6y ago
I find your comment about `display: inline | block;` interesting, because when implementing the visual formatting model layout algorithm, these are the first two you'd want to implement, and they're the easiest. In my game engine, we only support these two display types from the specification.

runarberg 6y ago

Don’t forget `display: contents` in which the element is instructed not to generate a box at all (neither inline nor block; I guess like `display: none` without hiding the content). But I think the spec maintainers are aware of this and CSS Display Module 3[1] allows multi-keywords so you can do stuff like: display: block grid; or: display: run-in ruby; or even: display: inline flow-root list-item; 1: https://drafts.csswg.org/css-display/#the-display-properties https://drafts.csswg.org/css-display/#the-display-properties

c-smile 6y ago
That is not a fix - just a cosmetic change that does not solve anything. display/flow MUST BE [1] different properties as they define orthogonal concepts. We should be able to define them separately. main { display: block; flow:grid; } @media handheld and (width < 100mm) { main { flow:vertical; } } Yet none from display shall go to visibility:none (as in my Sciter [2]). I've seen too many times errors like this: main table { display:none; } main.full table { display:block; } Which is obviously wrong, <table> element should have display:table or display:inline-table; [1] https://tools.ietf.org/html/rfc2119 https://tools.ietf.org/html/rfc2119 [2] https://sciter.com https://sciter.com

megous 6y ago

You can define those inisde/outside display styles separately, like `display: inline grid` or `display: block flex`

andrewmcwatters 6y ago

I find your comment about `display: inline | block;` interesting, because when implementing the visual formatting model layout algorithm, these are the first two you'd want to implement, and they're the easiest. In my game engine, we only support these two display types from the specification.