-w-add-data

Nutzbar ab: Version 008.003.079.000
Mögliche WerteBeschreibungEinsatzgebiet

Setzen von HTML5 Data-Attributen direkt über CSS-Only.
Neben Klassen, können so noch weitere Werte zur Definition von Elementen gesetzt werden. Data-Attribute nutzt man vor allem als Schnittstellendaten für JavaScript Anwendungen, da diese nicht vordefiniert und somit frei nutzbar sind.
Mehrere Data-Attribute werden mit Komma getrennt (siehe Beispiel 2 unten).

Universell

Beispiele / Anwendungsfälle

Beispiel 1: Beispiel BASE Classic, um die Richtung bei Parallax-Scrolling über CSS-Only fix zu definieren

.elementBox_var85  {...;-w-add-data:direction=bottomright;...}

/*
HTML-Ergebnis:

<div data-direction="bottomright" ...
*/

Beispiel 2: Beispiel BASE Classic, um die Richtung bei Parallax-Scrolling zum Hintergrundbild über CSS-Only fix zu definieren

.elementBox_var85  {...;-w-add-data:parallaxbackgrounddirection=topright;...}

/*
HTML-Ergebnis:

<div data-parallaxbackgrounddirection="topright" ...
*/

Beispiel 3: Beispielhafte Definition eines jQuery-Überblendeffektes über CSS-Only (BASE Classic)

.divXY  {-w-add-data:effect=fadeIn,duration=0.3s}

/*
HTML-Ergebnis:

<div data-effect="fadeIn" data-duration="0.3s" ...
*/

Beispiel 4: Beispiel BASE Mobile First zur elementLink.scss

  > a {    
    -w-add-data:'scrollingauto=yes,scrollsmoothtotargetduration=400';
    /* ... */
    }

/*
HTML-Ergebnis:

<a ... data-scrollingauto="yes" data-scrollsmoothtotargetduration="400" ...>...</a>
*/

Beispiel 5: Beispiel BASE Mobile First zur elementLink.scss - data-rel zu einer CSS-Only-Hauptvariante

  > a {
    -w-add-data:rel=linkgroup;
    /* ... */
    }

/*
HTML-Ergebnis:

<a ... data-rel="linkgroup" ...>...</a>
*/