Leitfaden für HTML-Datenattribute

Einführung

HTML-Elemente können Attribute besitzen, die für alles Mögliche verwendet werden, von Barrierefreiheitsinformationen bis hin zur stilistischen Steuerung.

<!-- We can use the `class` for styling in CSS, and we've also make this into a landmark region -->
<div class="names" role="region" aria-label="Names"></div>

Wovon abgeraten wird, ist das Erfinden eigener Attribute oder das Zweckentfremden vorhandener Attribute für nicht zusammenhängende Funktionen.

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>
<!-- `large` is not a valid value of `width` -->
<div width="large">

Es gibt eine Vielzahl von Gründen, warum das schlecht ist. Ihr HTML wird ungültig, was zwar keine tatsächlichen negativen Folgen haben mag, Ihnen aber das wohlige Gefühl von validem HTML raubt. Der überzeugendste Grund ist, dass HTML eine lebendige Sprache ist, und nur weil Attribute und Werte heute nichts bewirken, heißt das nicht, dass sie das niemals tun werden.

Gute Nachrichten jedoch: Sie können Ihre eigenen Attribute erfinden. Sie müssen ihnen nur das Präfix data-* voranstellen, und dann steht es Ihnen frei, zu tun, was Sie möchten!

Syntax

Es kann ungemein praktisch sein, eigene HTML-Attribute erfinden und eigene Informationen darin unterbringen zu können. Glücklicherweise ist das möglich! Genau das sind Datenattribute. Sie sehen so aus:

<!-- They don't need a value -->
<div data-foo></div>
<!-- ...but they can have a value -->
<div data-size="large"></div>
<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>
<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

Datenattribute werden oft als data-*-Attribute bezeichnet, da sie immer so formatiert sind. Das Wort data, dann ein Bindestrich -, dann ein beliebiger Text, den Sie sich ausdenken können.

Kann man das data-Attribut alleine verwenden?

<div data=""></div>

Es wird wahrscheinlich nichts beschädigen, aber Sie erhalten nicht die JavaScript-API, die wir später in diesem Leitfaden behandeln. Im Wesentlichen erfinden Sie ein Attribut für sich selbst, wovon – wie in der Einleitung erwähnt – abgeraten wird.

Was man mit Datenattributen nicht tun sollte

Speichern Sie keine Inhalte, die barrierefrei sein sollten. Wenn der Inhalt auf einer Seite gesehen oder gelesen werden soll, platzieren Sie ihn nicht nur in Datenattributen, sondern stellen Sie sicher, dass dieser Inhalt irgendwo im HTML-Inhalt vorhanden ist.

<!-- This isn't accessible content -->
<div data-name="Chris Coyier"></div>
<!-- If you need programmatic access to it but shouldn't be seen, there are other ways... -->
<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>

Hier gibt es mehr zum Thema Verstecken von Dingen.

Styling mit Datenattributen

CSS kann HTML-Elemente basierend auf Attributen und deren Werten auswählen.

/* Select any element with this data attribute and value */
[data-size="large"] {
  padding: 2rem;
  font-size: 125%;
}
/* You can scope it to an element or class or anything else */
button[data-type="download"] { }
.card[data-pad="extra"] { }

Dies kann sehr nützlich sein. Die vorherrschenden Styling-Anker in HTML/CSS sind Klassen. Während Klassen großartig sind (sie haben eine mittlere Spezifität und schöne JavaScript-Methoden via classList), hat ein Element sie entweder oder es hat sie nicht (im Wesentlichen an oder aus). Mit data-*-Attributen erhalten Sie diese An/Aus-Fähigkeit plus die Möglichkeit, basierend auf dem Wert bei gleichem Spezifitätsgrad zu selektieren.

/* Selects if the attribute is present at all */
[data-size] { }
/* Selects if the attribute has a particular value */
[data-state="open"],
[aria-expanded="true"] { }
/* "Starts with" selector, meaning this would match "3" or anything starting with 3, like "3.14" */
[data-version^="3"] { }
/* "Contains" meaning if the value has the string anywhere inside it */
[data-company*="google"] { }

Die Spezifität von Attribut-Selektoren

Sie ist genau dieselbe wie bei einer Klasse. Wir betrachten Spezifität oft als einen vierteiligen Wert:

Inline-Stile, IDs, Klassen/Attribute, Tags

Ein einzelner Attribut-Selektor allein ist also 0, 0, 1, 0. Ein Selektor wie dieser:

div.card[data-foo="bar"] { }

…wäre 0, 0, 2, 1. Die 2 steht für eine Klasse (.card) und ein Attribut ([data-foo="bar"]), und die 1 steht für einen Tag (div).

Attribut-Selektoren haben eine geringere Spezifität als eine ID, eine höhere als ein Element/Tag und die gleiche wie eine Klasse.

Groß-/Kleinschreibung ignorieren bei Attributwerten

Falls Sie mögliche Inkonsistenzen bei der Großschreibung in Ihren Datenattributen korrigieren müssen, gibt es für den Attribut-Selektor eine Variante, die die Groß-/Kleinschreibung ignoriert.

/* Will match
<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state="open" i] { }

Es ist das kleine i innerhalb des eckigen Klammer-Selektors.

Datenattribute visuell nutzen

CSS ermöglicht es Ihnen, den Wert eines Datenattributs herauszuziehen und anzuzeigen, falls nötig.

/* <div data-emoji="✅"> */
[data-emoji]::before {
  content: attr(data-emoji); /* Returns '✅' */
  margin-right: 5px;
}

Beispiel für einen Styling-Anwendungsfall

Sie könnten Datenattribute verwenden, um festzulegen, wie viele Spalten ein Grid-Container haben soll.

<div data-columns="2"></div>
<div data-columns="3"></div>
<div data-columns="4"></div>

Zugriff auf Datenattribute in JavaScript

Wie auf jedes andere Attribut können Sie mit der generischen Methode getAttribute auf den Wert zugreifen.

let value = el.getAttribute("data-state");
// You can set the value as well.
// Returns data-state="collapsed"
el.setAttribute("data-state", "collapsed");

Aber Datenattribute haben auch ihre eigene spezielle API. Angenommen, Sie haben ein Element mit mehreren Datenattributen (was völlig in Ordnung ist):

<span 
  data-info="123" 
  data-index="2" 
  data-prefix="Dr. "
  data-emoji-icon="🏌️‍♀️"
></span>

Wenn Sie eine Referenz auf dieses Element haben, können Sie die Attribute wie folgt setzen und abrufen:

// Get
span.dataset.info; // 123
span.dataset.index; // 2
// Set
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = "🎪";

Beachten Sie die Verwendung von camelCase in der letzten Zeile. Kebab-Case-Attribute in HTML, wie data-this-little-piggy, werden in JavaScript automatisch in camelCase umgewandelt, also dataThisLittlePiggy.

Diese API ist wohl nicht ganz so schön wie classList mit den klaren Methoden add, remove, toggle und replace, aber sie ist besser als nichts.

Sie haben auch Zugriff auf Inline-Datasets:

<img src="spaceship.png"
  data-ship-id="324" data-shields="72%"
  onclick="pewpew(this.dataset.shipId)">
</img>

JSON-Daten innerhalb von Datenattributen

<ul>
  <li data-person='
    {
      "name": "Chris Coyier",
      "job": "Web Person"
    }
  '></li>
</ul>

Hey, warum nicht? Es ist nur ein String und es ist möglich, ihn als gültiges JSON zu formatieren (achten Sie auf die Anführungszeichen usw.). Sie können diese Daten herausziehen und bei Bedarf parsen.

const el = document.querySelector("li");
let json = el.dataset.person;
let data = JSON.parse(json);
console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person

JavaScript-Anwendungsfälle

Das Konzept ist, dass Sie Datenattribute verwenden können, um Informationen in HTML zu platzieren, auf die JavaScript zugreifen muss, um bestimmte Aktionen auszuführen.

Ein häufiges Beispiel hat mit Datenbankfunktionalität zu tun. Angenommen, Sie haben einen „Gefällt mir“-Button:

<button data-id="435432343">♡</button>

Dieser Button könnte einen Click-Handler haben, der beim Klicken eine Ajax-Anfrage an den Server sendet, um die Anzahl der Likes in einer Datenbank zu erhöhen. Er weiß, welcher Datensatz aktualisiert werden muss, weil er die Information aus dem Datenattribut bezieht.

Spezifikationen

• Selectors Level 4 (Arbeitsentwurf)
• Selectors Level 3 (Empfohlen)
• Selectors Level 2, Revision 1 (Ursprüngliche Definition)

Browser-Unterstützung