Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

Anmeldung: https://forum.selfhtml.org/events/2

CSS/Eigenschaften/Textausrichtung/Spalten/column-rule

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft column-rule ist eine Zusammenfassung der möglichen Einzelangaben column-rule-width, column-rule-style und column-rule-color, mit der Sie das Aussehen der Linien zwischen den Spalten bestimmen können.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Notieren Sie Angaben zu Linienstärke, Style und Farbe mit Leerzeichen dazwischen:

  • Linienstärke: optional, Voreinstellung medium
  • style: Voreinstellung none, alle border-style-Werte möglich
  • Farbangabe: Voreinstellung ist die Textfarbe des Elements


Hinweis

Obwohl die Reihenfolge der Angaben beliebig ist und keine Verwechslungsgefahr besteht, sollten Sie dennoch konsequent bei einer Notation bleiben. Die meisten Werkzeuge zur Fehlersuche verwenden die Reihenfolge column-rule: width style color;.

Anwendungsbeispiele[Bearbeiten]

Beispiel ansehen …
 
.mehrspaltig {
  -webkit-column-count:      3;
  column-count:              3;
  -webkit-column-gap:        1em;
  column-gap:                1em;
  -webkit-column-rule:  dashed;
  column-rule: dashed;
}
Der mehrspaltige Text erhält mit column-rule: dashed eine gestrichelte Trennlinie. Als Strichstärke wird die Voreinstellung medium; als Farbe die Textfarbe verwendet.
Zur Visualisierung sind die Kindelemente des Divs der Klasse „mehrspaltig“ mit einem Hintergrund versehen.

Erzähltext mit Zwischenlinien[Bearbeiten]

Beispiel ansehen …
 
.mehrspaltig {  
  -webkit-column-count: 5;  
  -webkit-column-width: 12em; 
  columns: 5 12em;  
  -webkit-column-rule: 5px dotted gold;   
  column-rule: 5px dotted gold;  
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;  
}
Der mehrspaltige Text erhält mit column-rule: 5px dotted gold; eine 5px breite goldene gepunktete Trennlinie.
Zur Visualisierung sind die Kindelemente des Divs der Klasse „mehrspaltig“ mit einem Hintergrund versehen.


Achtung!

Die Eigenschaft column-rule ist derzeit (Stand: Oktober 2017) noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Android-Browser -webkit-column-rule

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

Siehe auch[Bearbeiten]