Überschrift Optionen über CSS-Only Hauptvariante mit Untervarianten
Im Screenshot nebenan wird zur Überschriften Hauptvariante "Standardüberschrift (0)" aufgezeigt, wie die Nutzung einer eigenen Pflegemaske zur eigenen Untervariante "Schriftformatierung" aussehen kann.
Dies ermöglicht es, ohne Duplizieren einer Hauptvariante nur bestimmte Formatierungsmöglichkeiten einer Untervariante für eine abweichende Darstellung zu nutzen. Das Beispiel finden Sie nachfolgend als Quelltextbeispiel angeführt.
Beispiel: Auszug der Inhaltsbox Hauptvariante 540 mit eigenen Pflegemasken
/*@wCssFragment{class:elementHeadline;variant:0;caption:Standardüberschrift;caption-en:Default;livepreview:yes}*/ .elementHeadline_var0 { /* ... */ -w-editmaskExtendedWebtag-layoutUpperCase:'active=yes,decorators=default,editor=selectCssClassVariant,cssClassMain=elementHeadline,cssClass=elementHeadlineUpperCase,caption="Schriftformatierung",captionInfo="abweichend zur Hauptvariante",onchange="wEditor.saveDraftAndReload();"'; /* ... */ } /* nachfolgend die zu obiger eigenen Pflegemaske vorstellbaren Varianten (Beispiele) */ /*@wCssFragment{class:elementHeadlineUpperCase;variant:0;caption:Darstellung mit Großbuchstaben;caption-en:Uppercase;usertypes:;selectable:yes}*/ .elementHeadlineUpperCase_var0 { text-transform:uppercase; }
Ebenso ist es möglich, über die eigenen Pflegemasken auch data-Attribute für bestimmte Funktionen zu setzen.