Wie können CSS-Regeln im Polymer-Kontext eingesetzt werden?
<2016-10-02>
Vorab: Die nachstehenden Informationen sind knapp gehalten. Für detailliertere Informationen sind Links enthalten.
Wie können Variable bei den Werten in Style-Regeln verwendet werden?
Normalerweise können in den Style-Regeln nur fixe Werte eingetragen werden. Beispielsweise
p{ margin:1.5em 0mm;}. Doch es gibt mit Hilfe von Polymer (und zukünftigen CSS-Versionen?) auch die Möglichkeit "Variable" einzusetzen. Beispielsweise p{ margin:var(--rand-abstand);}.Um zu verhindern, dass es bei nicht gesetztem Wert für eine CSS-Variable ein Problem gibt, kann auch ein Standard-Wert hinzugefügt werden: p{ margin:var(--rand-abstand, margin:1.5em 0mm);}
Möglichkeiten zum Setzen des Werte einer CSS-Variablen werden im Folgenden beschrieben.
Wie können Style-Regeln an eingebettete Komponenten weitergegeben werden?
In derjenigen Komponente, in die eine Komponente mit enthaltener CSS-Variable eingebettet ist, kann eine (fixe) Wertzuweisung erfolgen:
Genaueres ist in der Polymer-Doku unter "Custom CSS properties" zu finden
Wie können die Werte von "Variable" in Style-Regeln per Script geändert werden?
Die Style-Variablen werden in der Komponente verwaltet und können explizit gesetzt werden:
this.customStyle['--rand-abstand'] = 'margin:1.5em 0mm'; this.updateStyles();
Details dazu finden sich in der Polymer-Doku unter "Custom property API for Polymer elements".
Wie können ganze Gruppen von Style-Regeln variabel gestaltet werden?
Die Definition einer Gruppe von Style-Regeln geschieht wie folgt:
Mehr zu "mixins" in der Polymer-Doku.
Detailliertere Informationen sind bei Mozilla ("Using CSS variables") und in der Polymer-Doku "Styling local DOM" zu finden.
Themen hierzuAssciated topics:
Das könnte Sie auch interessierenFurther readings:
Weiterentwicklung des openWIM-Systems
<2018-08-07>
Wie wird eine openWIM-Entwicklungs- und Produktionsumgebung für ein Projekt aufgesetzt?
<2017-03-03>
CSS3-Macken und Tipps
<2014-02-16>
Responsive Design
<2015-01-03>
Anordnung von WIM-App-Modulen
<2013-03-28>
Gestaltungs-Hinweise für WIM-Anwendungen
<2014-06-28>