Hallo alle, der Artikel "Listen" im Wiki wurde von einem IP User derart ergänzt, dass die HTML Elemente für Listen Blockelemente sind und deshalb **immer** untereinander stünden. *Hold my beer*{:@en}, dachte ich, und baute flugs ein p Element mit einer auf inline getrimmten Liste drin. Natürlich hat mir der Browser das Bier dann in die Schuhe gekippt, weil ein p Element nur Phrasing Content akzeptiert und <ol> Flow Content ist. Das kann man "heilen", indem man statt <p> ein <div> verwendet und passendes Styling für Textparagraphen ergänzt. Soweit ich weiß, hat ein <p> auch keine besondere Aria-Rolle. Hinzu kommt dann noch, dass ein ˋdisplay:inlineˋ die Eigenschaft ˋdisplay: list-itemˋ überschreibt. D.h. man bekommt per Default keinen Marker mehr und muss ihn mit einem CSS Counter nachbilden. Eine display-Option ˋinline-list-itemˋ gibt's nicht, selbst in der kaum unterstützten Zweiwort-Syntax nicht, weil ˋlist-itemˋ und ˋinlineˋ beides outer-styles sind. Ist das also eine Heilung? Oder eher eine Transplantation noch größeren Übels? Was sagen die Semantik-Experten dazu? Ist eine Liste, die (a) inline, (b) mit Listenmarkup erzeugt und (c) mit CSS zurechtgetrimmt wurde - also sowas wie handgemacht in diesem Absatz zu finden - sinnvoll? ~~~html <div class="ersatz-paragraph">Ein frisch gegrillter Hamburger ist <ol><li>heiß,</li> <li>fettig</li> und <li>furchtbar lecker</li></ol>. Also: Mahlzeit :)</div> ~~~ ~~~css .ersatz-paragraph { margin: 0.5em 0; } ol { padding: 0; display: inline; counter-reset: liste; } li { display: inline; } li::before { content: '(' counter(liste, lower-alpha) ') '; counter-increment: liste; } ~~~ Das visuelle Erlebnis dieser HTML/CSS Kombi ist stimmig. Aber ist es auch brauchbar? _Rolf_ -- sumpsi - posui - obstruxi

Hallo alle, der Artikel "Listen" im Wiki wurde von einem IP User derart ergänzt, dass die HTML Elemente für Listen Blockelemente sind und deshalb **immer** untereinander stünden. *Hold my beer*, dachte ich, und baute flugs ein p Element mit einer auf inline getrimmten Liste drin. Natürlich hat mir der Browser das Bier dann in die Schuhe gekippt, weil ein p Element nur Phrasing Content akzeptiert und <ol> Flow Content ist. Das kann man "heilen", indem man statt <p> ein <div> verwendet und passendes Styling für Textparagraphen ergänzt. Soweit ich weiß, hat ein <p> auch keine besondere Aria-Rolle. Hinzu kommt dann noch, dass ein ˋdisplay:inlineˋ die Eigenschaft ˋdisplay: list-itemˋ überschreibt. D.h. man bekommt per Default keinen Marker mehr und muss ihn mit einem CSS Counter nachbilden. Eine display-Option ˋinline-list-itemˋ gibt's nicht, selbst in der kaum unterstützten Zweiwort-Syntax nicht, weil ˋlist-itemˋ und ˋinlineˋ beides outer-styles sind. Ist das also eine Heilung? Oder eher eine Transplantation noch größeren Übels? Was sagen die Semantik-Experten dazu? Ist eine Liste, die (a) inline, (b) mit Listenmarkup erzeugt und (c) mit CSS zurechtgetrimmt wurde - also sowas wie handgemacht in diesem Absatz zu finden - sinnvoll? ~~~html <div class="ersatz-paragraph">Ein frisch gegrillter Hamburger ist <ol><li>heiß,</li> <li>fettig</li> und <li>furchtbar lecker</li></ol>. Also: Mahlzeit :)</div> ~~~ ~~~css .ersatz-paragraph { margin: 0.5em 0; } ol { padding: 0; display: inline; counter-reset: liste; } li { display: inline; } li::before { content: '(' counter(liste, lower-alpha) ') '; counter-increment: liste; } ~~~ Das visuelle Erlebnis dieser HTML/CSS Kombi ist stimmig. Aber ist es auch brauchbar? _Rolf_ -- sumpsi - posui - obstruxi

Hallo alle, der Artikel "Listen" im Wiki wurde von einem IP User derart ergänzt, dass die HTML Elemente für Listen Blockelemente sind und deshalb **immer** untereinander stünden. *Hold my beer*, dachte ich, und baute flugs ein p Element mit einer auf inline getrimmten Liste drin. Natürlich hat mir der Browser das Bier dann in die Schuhe gekippt, weil ein p Element nur Phrasing Content akzeptiert und <ol> Flow Content ist. Das kann man "heilen", indem man statt <p> ein <div> verwendet und passendes Styling für Textparagraphen ergänzt. Soweit ich weiß, hat ein <p> auch keine besondere Aria-Rolle. Hinzu kommt dann noch, dass ein ˋdisplay:inlineˋ die Eigenschaft ˋdisplay: list-itemˋ überschreibt. D.h. man bekommt per Default keinen Marker mehr und muss ihn mit einem CSS Counter nachbilden. Eine display-Option ˋinline-list-itemˋ gibt's nicht, selbst in der kaum unterstützten Zweiwort-Syntax nicht, weil ˋlist-itemˋ und ˋinlineˋ beides outer-styles sind. Ist das also eine Heilung? Oder eher eine Transplantation noch größeren Übels? Was sagen die Semantik-Experten dazu? Ist eine Liste, die (a) inline, (b) mit Listenmarkup erzeugt und (c) mit CSS zurechtgetrimmt wurde - also sowas wie handgemacht in diesem Absatz zu finden - sinnvoll? ~~~html <div class="ersatz-paragraph">Ein frisch gegrillter Hamburger ist <ol><li>heiß,</li> <li>fettig</li> und <li>furchtbar lecker</li></ol>. Also: Mahlzeit :)</div> ~~~ ~~~css .ersatz-paragraph { margin: 0.5em 0; } ol { padding: 0; display: inline; counter-reset: liste; } li { display: inline; } li::before { content: '(' counter(liste, lower-alpha) ') '; counter-increment: liste; } ~~~ Das visuelle Erlebnis dieser HTML/CSS Kombi ist stimmig. Aber ist es auch _Rolf_ -- sumpsi - posui - obstruxi