CSS-Only Optionen in Untervarianten setzen

08.03.2017

CSS-Only Optionen lassen sich allgemein, in der Hauptvariante oder auch in der Untervariante setzen. 

Während die CSS-Only Optionen der Hauptvariante die allgemeinen CSS-Only Optionen überschreiben, überschreiben die Optionen der Untervarianten die der Hauptvariante. Man versucht die Optionen so allgemein wie möglich zu definieren und nur bei Bedarf in den Untervariante selbst zu setzen.

Nehmen wir z.B. die Bildqualität für Hintergrundbilder, die im Allgemeinen auf 75% gesetzt ist und in den meisten Fällen benötigt wird. 

Werden Hintergrundbilder über eine Untervariante aber z. B. abgesoftet dargestellt, reicht in der Regel eine deutlich geringere Bildqualität aus. Anstatt nun diese Hintergrundbilder ebenfalls mit 75% Qualität zu laden, werden sie in der Untervariante auf 50% gesetzt, was ausreichend ist und die Ladegeschwindigkeit erhöht.

Beim abgesoftetem Hintergrundbild wird die Bildqualität in der Untervariante reduziert

/*@wCssFragment{class:elementSectionBackgroundColor;variant:210;caption:Abgesoftetes Hintergrundbild;caption-en:Opacity background;preview-color:#{$backgroundColorBlank};livepreview:yes}*/
.elementSectionBackgroundColor_var210 {
  
  -
w-option-backgroundimagequality:50;  

  
background-color:#ffffff;
 
  
.backgroundImageContainer{
    
opacity:0.5
  }
}