4 ms·

The only problem with display:table is that it still requires additional markup to organize elements in tables. Consider this definition list: <dl> <

by c-smile 10y ago

The only problem with display:table is that it still requires additional markup to organize elements in tables. Consider this definition list: <dl> <dt>Term1</dt> <dd>Term1 defintion</dd> <dt>Term2</dt> <dd>Term2 defintion</dd> </dl> and the task of organizing it into two columns table: dt's in first column and dd's in second. Impossible either with display:table & co. or with display flex. At the same time in Sciter[1] I can define that layout as dl { flow: row(dt,dd); } - replace dt/dd pairs in table rows. The table will have two columns. Pure styling without changes of markup semantic and structure. [1] CSS: Flow property and Flex units in Sciter: https://sciter.com/docs/flex-flow/flex-layout.htm https://sciter.com/docs/flex-flow/flex-layout.htm

olavk 10y ago
CSS only needs additional elements in case you need to apply structures which is not already present in the HTML. To layout something as a grid you need two levels of grouping: what delimits a cell and what delimits a row. Free-from dt/dd sequences does not contain this information, since there may be multiple dt per dd and vice versa. If dt/dd could only appear in pairs (like in your example) you could say there is an implicit structure, but this is not necessarily the case.
- c-smile 10y ago
  > you need two levels of grouping Not necessarily. I can define form { flow:row(label, input select textarea); } to have typical form's two columns layout with all <label>s go to first column and input, select and textarea go to second. All non-matching elements are replaced as if they span full rows (like <caption> in tables). People at trying to simulate these things by using float and clear. Ugly, non-reliable, etc.
twhb 10y ago
It's already a good idea to add elements where logical, even when unnecessary, to aid styling, scripts, coder comprehension, and sometimes automated comprehension, and to reduce likelihood it must be edited later. One could argue that rows always form logical units - certainly in the above example - and thus should always be wrapped. WHATWG does permit wrapping dt-dd groups in divs.
- c-smile 10y ago
  That "good idea" has a name "tag soup". But even you can add some non-semantic DOM elements... What if you have <ol> <li>first</li> <li>second</li> <li>third</li> </ol> And you want to replace them in two,three,etc. aligned columns (depending on view size), like these: @media handheld { ul { flow:vertical; } } @media ... { ul { flow:row(li,li); } // two columns } @media ... { ul { flow:row(li,li,li); } // three columns }
robin_reala 10y ago
Not that I diagree with your premise, but in this particular example the WHATWG HTML Living Standard now allows containing divs around dt/dd pairings[1] and browers support this fine. [1] https://html.spec.whatwg.org/multipage/semantics.html#the-dl-element https://html.spec.whatwg.org/multipage/semantics.html#the-dl...
- c-smile 10y ago
  That requires change of existing markup and somehow its semantic changes too, right? Yet this is not "resolution friendly".
  - robin_reala 10y ago
    Semantics is defined by the specification, so in this case no. But yes, a change of the markup.
    - c-smile 10y ago
      What if space allows and I will want to have four columns table: dl { flow: row(dt,dd,dt,dd); } Changing markup structure is not a good idea if to consider that the same markup shall be used on different medias.

by c-smile 10y ago

olavk 10y ago

CSS only needs additional elements in case you need to apply structures which is not already present in the HTML. To layout something as a grid you need two levels of grouping: what delimits a cell and what delimits a row. Free-from dt/dd sequences does not contain this information, since there may be multiple dt per dd and vice versa. If dt/dd could only appear in pairs (like in your example) you could say there is an implicit structure, but this is not necessarily the case.

c-smile 10y ago
> you need two levels of grouping Not necessarily. I can define form { flow:row(label, input select textarea); } to have typical form's two columns layout with all <label>s go to first column and input, select and textarea go to second. All non-matching elements are replaced as if they span full rows (like <caption> in tables). People at trying to simulate these things by using float and clear. Ugly, non-reliable, etc.

twhb 10y ago

It's already a good idea to add elements where logical, even when unnecessary, to aid styling, scripts, coder comprehension, and sometimes automated comprehension, and to reduce likelihood it must be edited later. One could argue that rows always form logical units - certainly in the above example - and thus should always be wrapped. WHATWG does permit wrapping dt-dd groups in divs.

c-smile 10y ago
That "good idea" has a name "tag soup". But even you can add some non-semantic DOM elements... What if you have <ol> <li>first</li> <li>second</li> <li>third</li> </ol> And you want to replace them in two,three,etc. aligned columns (depending on view size), like these: @media handheld { ul { flow:vertical; } } @media ... { ul { flow:row(li,li); } // two columns } @media ... { ul { flow:row(li,li,li); } // three columns }

robin_reala 10y ago

Not that I diagree with your premise, but in this particular example the WHATWG HTML Living Standard now allows containing divs around dt/dd pairings[1] and browers support this fine. [1] https://html.spec.whatwg.org/multipage/semantics.html#the-dl-element https://html.spec.whatwg.org/multipage/semantics.html#the-dl...

c-smile 10y ago
That requires change of existing markup and somehow its semantic changes too, right? Yet this is not "resolution friendly".
- robin_reala 10y ago
  Semantics is defined by the specification, so in this case no. But yes, a change of the markup.
  - c-smile 10y ago
    What if space allows and I will want to have four columns table: dl { flow: row(dt,dd,dt,dd); } Changing markup structure is not a good idea if to consider that the same markup shall be used on different medias.