Wie man besseres UX mit HTML5 Data - * Attributen baut

Wollten Sie schon einmal einem bestimmten HTML-Element benutzerdefinierte Daten hinzufügen, um später darauf mit JavaScript zuzugreifen? Bevor HTML5 auf dem Markt erschien, war das Speichern von benutzerdefinierten Daten im Zusammenhang mit dem DOM ein wahrer Aufwand, und Entwickler mussten alle Arten von bösartigen Hacks verwenden, wie das Einführen von Nicht-Standardattributen oder die veraltete setUserData () -Methode, um das Problem zu umgehen .

Glücklicherweise müssen Sie dies nicht mehr tun, da HTML5 neue globale data-* Attribute eingeführt hat, die es ermöglichen, zusätzliche Informationen in HTML-Elemente einzubetten. Die neuen data-* -Attribute machen HTML erweiterbarer und ermöglichen es Ihnen daher, komplexere Anwendungen zu erstellen und eine anspruchsvollere Benutzererfahrung zu erstellen, ohne ressourcenintensive Techniken wie Ajax-Aufrufe oder serverseitige Datenbankabfragen verwenden zu müssen.

Die Browser-Unterstützung der neuen globalen Attribute ist relativ gut, da sie von allen modernen Browsern unterstützt werden (IE8-10 unterstützt sie teilweise).

Die Syntax der neuen data-* Attribute ähnelt der der aria-prefixed-Attribute. Sie können einen beliebigen Kleinbuchstaben anstelle des * Zeichens einfügen. Sie müssen außerdem jedem Attribut einen Wert in Form einer Zeichenfolge zuweisen.

Angenommen, Sie möchten eine Seite " Über uns" erstellen und den Namen der Abteilung speichern, in der jeder Mitarbeiter arbeitet. Sie müssen nichts anderes tun, als das benutzerdefinierte Attribut "Datenabteilung" dem entsprechenden HTML-Element auf folgende Weise hinzuzufügen:

 John Doe
 Jane Doe

Benutzerdefinierte data-* Attribute sind global, genau wie die class und id Attribute, so dass Sie sie für jedes HTML-Element verwenden können. Sie können einem HTML-Tag auch so viele data-* -Attribute hinzufügen, wie Sie möchten. Im obigen Beispiel können Sie beispielsweise ein neues benutzerdefiniertes Attribut namens data-user zum Speichern von Mitarbeiternamen eingeben.

 John Doe
 Jane Doe

Wenn Sie einem HTML-Element ein eigenes benutzerdefiniertes Attribut hinzufügen möchten, müssen Sie diesem immer eine Zeichenfolge voranstellen. Wenn Sie ein Attribut mit Datenpräfix in einem anderen Code sehen, können Sie sicher sein, dass es sich um ein benutzerdefiniertes Attribut handelt, das vom Autor eingeführt wurde.

Wann und wann keine benutzerdefinierten Attribute verwendet werden sollen

W3C definiert benutzerdefinierte data-* Attribute wie data-* :

"Benutzerdefinierte Datenattribute sollen benutzerdefinierte Daten für die Seite oder Anwendung speichern, für die es keine geeigneten Attribute oder Elemente mehr gibt."

Wenn Sie keine anderen semantischen Attribute für die Daten finden, die Sie speichern möchten, sollten Sie die Verwendung von data-* in Erwägung ziehen.

Es ist nicht die beste Idee, sie ausschließlich für Stylingzwecke zu verwenden, da Sie aus der class und den style wählen können. Wenn Sie einen Datentyp speichern möchten, für den HTML5 ein semantisches Attribut besitzt, z. B. das Attribut datetime für Verwenden Sie anstelle des Attributs mit Daten Präfix.

Es ist wichtig zu beachten, dass die Daten data-* -Attribute Daten enthalten, die für die Seite oder die Anwendung privat sind. data-* bedeutet, dass sie von Benutzeragenten wie Suchmaschinen-Bots und externen Anwendungen ignoriert werden. Datenpräfixe Attribute können nur durch den Code aufgerufen werden, der auf der Site ausgeführt wird, die den HTML-Code enthält.

Benutzerdefinierte data-* -Attribute werden auch von Frontend-Frameworks wie Bootstrap und Zurb Foundation verwendet. Die gute Nachricht ist, dass Sie nicht unbedingt JavaScript schreiben müssen, wenn Sie Attribute mit Daten als Teil eines Frameworks verwenden möchten, da Sie sie nur zum HTML-Code hinzufügen müssen, um eine Funktionalität von a auszulösen vorgefertigtes JavaScript-Plugin

Das folgende Code-Snippet fügt eine QuickInfo auf der linken Seite einer Schaltfläche im Bootstrap hinzu, indem die benutzerdefinierten Attribute für data-toggle und data-placement und ihnen geeignete Werte zugewiesen werden.

 Tooltip auf der linken Seite 

data-* Attribute mit CSS

Obwohl es nicht empfohlen wird, die Attribute von data-* nur für Stylingzwecke zu verwenden, können Sie die HTML-Elemente, zu denen sie gehören, mit Hilfe von allgemeinen Attributselektoren auswählen. Wenn Sie jedes Element mit einem bestimmten Attribut mit Daten Präfix auswählen möchten, verwenden Sie diese Syntax in Ihrem CSS:

 li [Datenbenutzer] {Farbe: blau; } 

Beachten Sie, dass nicht die Benutzernamen im obigen Codefragment blau angezeigt werden - nachdem alle in den benutzerdefinierten Attributen gespeicherten Daten nicht sichtbar sind -, sondern die Namen der in der

Elemente (im Beispiel "John Doe" und "Jane Doe").

Wenn Sie nur Elemente auswählen möchten, für die ein Attribut mit Datenpräfix einen bestimmten Wert hat, wird folgende Syntax verwendet:

 li [Datenabteilung = "IT"] {Grenze: durchgehend blau 1px; } 

Sie können alle komplizierteren CSS-Attributselektoren verwenden, z. B. den allgemeinen Geschwisterkombinatorselektor ( [data-value~="foo"] ) oder den Platzhalterselektor ( [data-value*="foo"] ), mit Daten- Präfix-Attribute.

Zugriff auf data-* Attribute mit JavaScript

Sie können auf die Daten zugreifen, die in den benutzerdefinierten data-* mit JavaScript gespeichert sind, indem Sie entweder die Datenmengeneigenschaft oder die Methode data() jQuery verwenden.

Vanille JavaScript

Die dataset Eigenschaft ist die Eigenschaft der HTMLElement Schnittstelle, HTMLElement Sie können sie für jedes HTML-Tag verwenden. Die dataset Eigenschaft ermöglicht den Zugriff auf alle benutzerdefinierten data-* -Attribute des angegebenen HTML-Elements. Die Attribute werden als ein DOMStringMap Objekt zurückgegeben, das einen Eintrag für jedes data-* enthält.

Auf unserer Seite " Über uns" können Sie die benutzerdefinierten Attribute "Jane Doe" leicht überprüfen, indem Sie die Eigenschaft dataset folgt verwenden:

 var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap {Benutzer: "janedoe", Abteilung: "IT"} 

Sie können sehen, dass im zurückgegebenen DOMStringMap Objekt die DOMStringMap aus den Namen der Attribute entfernt werden ( user statt DOMStringMap und department statt DOMStringMap ). Sie müssen die Attribute im selben Format verwenden, wenn Sie nur auf den Wert eines bestimmten Attributs mit Datenpräfix zugreifen möchten (anstelle der Liste aller benutzerdefinierten Attribute wie im obigen Codefragment).

Sie können den Wert eines bestimmten data-* -Attributs als Eigenschaft der dataset Eigenschaft abrufen. Wie bereits erwähnt, müssen Sie das data- aus dem Namen der Eigenschaft weglassen. Wenn Sie also auf den Wert von Janes data- zugreifen möchten, können Sie dies folgendermaßen tun:

 var jane = document.getElementById ("jane"); konsole.log (jane.dataset.user) // janedoe 

jQuerys Methode data()

Mit der jQuery-Methode data() kann der Wert eines Attributs mit Datenpräfix abgerufen werden. Hier müssen Sie auch das data- Präfix aus dem Namen des Attributs weglassen, um es richtig zu erreichen. In unserem Beispiel können Sie eine Warnmeldung mit dem Namen der Abteilung anzeigen, in der "Jane" mit folgendem Code arbeitet:

 $ ("# jane"). hover (function () {var department = $ ("# jane"). data ("abteilung"); alert (abteilung);}); 

Die Methode data() muss sorgfältig verwendet werden, da sie nicht nur dazu dient, den Wert eines Attributs mit Datenpräfix zu erhalten, sondern auch, um Daten an ein DOM-Element anzuhängen, und zwar auf folgende Weise:

 var town = $ ("# jane"). data ("Stadt", "New York"); 

Die zusätzlichen Daten, die Sie mit der Methode data() jQuery anhängen, werden offensichtlich nicht im HTML-Code als neues Attribut data-* Wenn also beide Techniken gleichzeitig verwendet werden, speichert das angegebene HTML-Element zwei Datensätze. eins mit HTML und das andere mit jQuery.

In unserem Beispiel hat "Jane" neue benutzerdefinierte Daten ( "town" ) mit jQuery erhalten, aber dieses neue Schlüssel / Wert-Paar wird in HTML nicht als neues data-town angezeigt. Das Speichern von Daten auf zwei verschiedene Arten ist nicht die beste Vorgehensweise, um es gelinde auszudrücken. Verwenden Sie daher nur eine der beiden Methoden gleichzeitig .

Zugänglichkeit und data-* Attribute

Da die in benutzerdefinierten data-Attributen enthaltenen Daten privat sind, können assistierende Technologien möglicherweise nicht darauf zugreifen. Wenn Sie Ihren Inhalt für behinderte Benutzer zugänglich machen möchten, ist es nicht empfehlenswert, Inhalte zu speichern, die auf diese Weise für Benutzer wichtig sein können.

Durchsuchen Sie die Geschichte Ihrer bevorzugten Websites mit UX Timeline

Internetnutzer, die seit Jahren online sind, lieben häufig die Nostalgie, die Uhr zurück zu drehen, um Websites anzusehen, wie sie einmal waren. Dies ist eine unterhaltsame Art, Zeit zu verlieren und das Wachstum von Webdesign im Laufe der Jahre zu studieren .Ich liebe es immer, die Wayback Machine zu durchstöbern, aber es ist so ein Schmerz. D

(Tech- und Design-Tipps)

Einfügen interaktiver Filter in Videos und Fotos mit Spotliter [iOS]

Mit Apps wie Instagram können Sie Ebenen zu Ihren Fotos hinzufügen. Diese Art von Apps ist aufgrund der Fotofilterfunktion sehr beliebt und ermöglicht es Benutzern, Fotos zu erstellen, die eine bestimmte Art von Aussehen aufweisen. Einige Entwickler haben das gleiche mit Video versucht, wo ein Filter hinzugefügt wird, um verschiedene Farbeffekte zu erzielen .Spo

(Tech- und Design-Tipps)