Data-Attribute über CSS-Only setzen

19. Mär 2014

HTML5 Data-Attribute lassen sich über CSS-Only setzen, um so z.B. jQuery-Funktionen zu konfigurieren.

HTML5 Data-Attribute lassen sich nun direkt über CSS-Only setzen. 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.

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

CSS-Only

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

HTML-Ergebnis

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

Beispielhafte Definition eines jQuery-Überblendeffektes über CSS-Only

CSS-Only:

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

HTML-Ergebnis

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