CSS-Ersparnis mit HTML5 Data-Attributen

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Mit der Einführung von Data-Attributen können HTML-Elementen weitere Informationen – beginnend mit „data-“ – hinzugefügt werden. In vielen Fällen enthalten diese Attribute Werte, die von JavaScript ausgelesen und verarbeitet werden. Aber auch eine Nutzung in Kombination mit CSS ist möglich und erspart oft die zusätzliche Vergabe von Klassen.


Data-Attribute mit HTML5 und CSS3 nutzen

Wozu Data-Attribute?

Manchmal besteht die Notwendigkeit, einem HTML-Element Informationen mit auf den Weg zu geben, die in kein „normales“ Attribut passen. Das können Grafik-URLs oder Beschreibungen sein, die zusätzlich zu den Angaben im „title“-Attribut definiert werden. Für all diese Fälle bietet sich die Definition eigener Attribute an.

Beliebt ist der Einsatz von Data-Attributen, um einem IMG-Element eine zusätzliche Bildquelle mitzugeben. Gerade bei responsiv gestalteten Websites werden auf diese Weise ein für mobile Geräte optimiertes Bild im „src“-Attribut und ein für Desktopgeräte optimiertes Bild über ein Data-Attribut angegeben:

<img src="bild_mobil.jpg" data-fullsrc="bild_desktop.jpg" />

Per JavaScript wird bei der Desktopansicht das über das Data-Attribut „data-fullsrc“ bereitgestellte Bild aufgerufen.

Data-Attribute, CSS und Webfont-Icons

Gerade beim Einsatz von Webfont-Icons sind Data-Attribute gut geeignet, um darin das jeweilige Zeichen, hinter dem sich das im Webfont verfügbare Icon verbirgt, abzulegen. Oft erhält man im mitgelieferten Stylesheet der Schrift zwar eine Auflistung von unzähligen Klassem – für jedes Icon eine Klasse mit dem jeweiligen Zeichen. Wer jedoch auf diese Klassen verzichten will, setzt das Zeichen einfach in ein Data-Attribut:

<p class="icon" data-icon="\f07a">Warenkorb</p>

Zusätzlich muss im Stylesheet eine Klasse vergeben werden, die die Darstellung des Icons beinhaltet:

p.icon::before {
  content: attr(data-icon);
  color: red;
  padding-right: 5px;
}

Weitere Klassen sind nicht mehr erforderlich. Nachteil ist, dass das jeweilige Zeichen aus dem Zeichensatz der Schrift herausgesucht werden muss. Allerdings können Icons angewendet werden, ohne jeweils eine spezielle Klasse zu vergeben und ohne einen zusätzlichen Eintrag in den Stylesheets vorzunehmen.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Data-Attribute als individuelle Listenzeichen

Wer innerhalb einer Liste jedem Listenpunkt ein individuelles Listenzeichen vergeben möchte, hat mit Data-Attributen ebenfalls die Möglichkeit, auf mehrere Klassen und dazugehörige CSS-Angaben zu verzichten:

<ul>
  <li data-liste="1">Erster Punkt</li>
  <li data-liste="3">Zweiter Punkt</li>
  <li data-liste="2">Dritter Punkt</li>
</ul>

Auch hierbei werden die Data-Attribute mit der Eigenschaft „content“ ausgelesen und mit dem Pseudoelement „::before“ dem eigentlichen Listenpunkt vorangestellt:

ul.liste {
  list-style-type: none;
}

ul.liste li::before {
  content: attr(data-liste)".";
  padding-right: 15px;
 }

Zusätzlich wird das Standard-Listenzeichen entfernt, sodass nur das im Data-Attribut hinterlegte Zeichen dargestellt wird. Der „content“-Eigenschaft können in der CSS-Definition weitere Zeichen voran- oder nachgestellt werden.

Das Auslesen von Attributen ist nur mit „attr()“ möglich. „attr()“ lässt sich nur über die Eigenschaft „content“ einsetzen. Und „content“ wiederum kommt nur zum Einsatz bei Pseudoelementen wie „::before“ und „::after“.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Hinterlasse einen Kommentar

6 Kommentare auf "CSS-Ersparnis mit HTML5 Data-Attributen"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Tom
Gast

Ist es auch möglich ein Element mit einem bestimmten data Attribut zu Stylen? Also nicht das Attribut im Style aufgreifen, sondern als eine Art selector zu benutzen.

Christoph Eibl
Gast

Hallo

ich habe eine Frage bezüglich dem IE-Problem.
Wie schaut es mit dem IE-Support für das data-Attribut aus? Wird das vollkommen unterstützt, oder gibt es hierbei Probleme???

Der Artikel ist sonst sehr gut und sehr gelungen! =)

glg aus Graz
Christoph

Basti1350
Gast

Kurze Zwischenfrage: weshalb wird hier before und after mit zwei Doppelpunkten geschrieben? Ich nehm immer nur einen, oder ist das optional?

Hilko
Gast

Prinzipiell ein schöner Artikel, aber das letzte Beispiel finde ich etwas misslungen. Denn um das Ergebnis zu erreichen, was dort gezeigt wird, sollte man einfach eine statt einer nehmen und schon hat man eine nummerierte Liste, schließt keine älteren Browser aus und spart sich das CSS.
Mir ist klar, dass es nicht darum ging, aber das Beispiel mit 1., 2., 3. ist eben etwas unglücklich gewählt.

wpDiscuz