Gunnars Definitionslistenquiz

[Tim Tepaße]

Hallo Gunnar,

ich antworte mal aus dem nicht existenten CSS 3 Utopia:

┌──────────────┐┌──────────────┐┌──────────────┐┌──────────────┐┌──────────────┐
│Raumschiff    ││Raumschiff    ││Star Trek:    ││Star Trek:    ││Star Trek:    │
│Enterprise    ││Enterprise:   ││Deep Space    ││Voyager       ││Enterprise    │
├──────────────┤│Das nächste   ││Nine          │├──────────────┤├──────────────┤
│das Original  ││Jahrhundert   │├──────────────┤│Spin-off von  ││spielt        │
└──────────────┘├──────────────┤│Spin-off von  ││Star Trek:    ││zeitlich vor  │
                │Wiederbelebung││Raumschiff    ││Deep Space    ││der           │
                │von Star Trek;││Enterprise:   ││Nine          ││Originalserie │
                │spielt etwa   ││Das nächste   │└──────────────┘└──────────────┘
                │100 Jahre nach││Jahrhundert   │
                │der           │└──────────────┘
                │Originalserie │
                └──────────────┘

~~~css dl {
      column-size: <length>;
  }

dt {
      column-break-before: always;
      column-break-after: avoid;
      column-break-inside: avoid;
  }

dd {
      column-break-before: avoid;
      column-break-after: always;
      column-break-inside: avoid;
  }

  
Plus verhübschender Code, natürlich. Das Problem ist: die beiden Browser, die Multicolumns können, unterstützen die column-break-Eigenschaften meinen Tests nach nicht, auch wenn Safari sie in seiner CSS Reference aufzählt. Merkwürdig: Diese Referenz spricht von -webkit-column-break-inside, während CSS 3 Multicolumns einem page-break-inside ans Herz legt.  
  
Eine alternative wären vielleicht noch explizite Grids aus dem sehr wackeligen [CSS 3 Grids](http://www.w3.org/TR/css3-grid/) Modul, aber das ist mir noch zu unlesbar.  
  
[CSS 3 Template Layouts](http://www.w3.org/TR/css3-layout/) können nicht mit beliebig vielen Kindelementen umgehen, man muss diese schon explizit ansprechen. Aber dort wäre bei bekannter Inhaltslänge mittels `position:same`{:.language-css} so etwas denkbar:  
  
  ~~~css
dl {  
      display: "a .   b .   c .   d .   e"  
                * 1em * 1em * 1em * 1em *;  
  }  
  
  dt#tos { position: a; }  
  dt#tng { position: b; }  
  dt#ds9 { position: c; }  
  dt#voy { position: d; }  
  dt#ent { position: e; }  
  
  dd { position: same; }

(Wo ist die Vorspultaste?)

Tim