Benutzerdefinierte Attribute - Ja oder Nein?

254

In letzter Zeit habe ich immer mehr über Personen gelesen, die benutzerdefinierte Attribute in ihren HTML-Tags verwenden, hauptsächlich um einige zusätzliche Datenbits für die Verwendung in Javascript-Code einzubetten.

Ich hatte gehofft, Feedback zu erhalten, ob die Verwendung benutzerdefinierter Attribute eine gute Vorgehensweise ist oder nicht und welche Alternativen es gibt.

Es scheint, dass es sowohl den serverseitigen als auch den clientseitigen Code wirklich vereinfachen kann, aber es ist auch nicht W3C-kompatibel.

Sollten wir benutzerdefinierte HTML-Attribute in unseren Web-Apps verwenden? Warum oder warum nicht?

Für diejenigen, die benutzerdefinierte Attribute für eine gute Sache halten: Was sollten Sie bei der Verwendung beachten?

Für diejenigen, die benutzerdefinierte Attribute für schlecht halten: Welche Alternativen verwenden Sie, um etwas Ähnliches zu erreichen?

Update: Ich interessiere mich hauptsächlich für die Gründe für die verschiedenen Methoden sowie für die Gründe, warum eine Methode besser ist als eine andere. Ich denke, wir können uns alle 4-5 verschiedene Wege einfallen lassen, um dasselbe zu erreichen. (versteckte Elemente, Inline-Skripte, zusätzliche Klassen, Analysieren von Informationen aus IDs usw.).

Update 2: Es scheint, dass die HTML 5- data-Attributfunktion hier viel Unterstützung bietet (und ich stimme eher zu, es sieht nach einer soliden Option aus). Bisher habe ich nicht viel an Widerlegungen für diesen Vorschlag gesehen. Gibt es Probleme / Fallstricke bei der Verwendung dieses Ansatzes? Oder ist es einfach eine "harmlose" Ungültigmachung der aktuellen W3C-Spezifikationen?

TM.
quelle
Ehrlich gesagt ist meine anfängliche Haltung, dass sie keine so schlechte Sache sind, was bei den Puristen ziemlich kontrovers sein kann. Ich habe das Gefühl, dass ich mich wirklich hinsetzen und alle verfügbaren Optionen bewerten muss, um dies richtig zu sichern, daher muss ich den langen Aufsatz schreiben.
Paolo Bergantino
Dazu benötigen Sie möglicherweise nur einige Gegenbeispiele: von dem, was Sie implementieren möchten, wie es bequem ist, dies mit benutzerdefinierten Attributen zu tun, und warum diese Lösung besser und nicht schlechter ist als andere Lösungen ohne benutzerdefinierte Attribute.
ChrisW
@ChrisW Ich frage meistens aus Interesse, nicht aus einer bestimmten Anwendung.
TM.
Nun, es gibt viele Optionen, um die Daten auf die Clientseite zu bringen: versteckte Eingabefelder, versteckte Definitionslisten, Klassen, Metadaten-Plugins, ein riesiges Javascript-Wörterbuch (Objekt) mit allen Datenzuordnungen separat, benutzerdefinierte Attribute, Datenattribute ( HTML5) usw. Ich möchte all dies untersuchen, ihre Vorzüge und Fallstricke berücksichtigen und schließlich zu einer Schlussfolgerung gelangen. Dieser Beitrag hat mich endlich beginnen diese zu schreiben. :) Sollte irgendwann vor 2010 fertig sein.
Paolo Bergantino
2
@Paolo Sie können nicht einfach sagen, dass Sie einen Aufsatz geschrieben haben, der diese Frage beantwortet, ohne uns den Link zu geben. Nicht cool.
Connell

Antworten:

253

HTML 5 erlaubt explizit benutzerdefinierte Attribute, die mit beginnen data. So ist zum Beispiel <p data-date-changed="Jan 24 5:23 p.m.">Hello</p>gültig. Da es offiziell von einem Standard unterstützt wird, denke ich, dass dies die beste Option für benutzerdefinierte Attribute ist. Außerdem müssen Sie andere Attribute nicht mit Hacks überladen, damit Ihr HTML-Code semantisch bleibt.

Quelle: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

Futter
quelle
Dies ist ein guter Ansatz. Aber ich bezweifle, dass es funktionieren wird, wenn Sie IE 6 und andere alte Browser unterstützen müssen.
Cllpse
8
Ich bin mir ziemlich sicher, dass es mit älteren Browsern funktioniert. Die Attribute werden dem DOM hinzugefügt, auf das Sie zugreifen können.
Ms2ger
12
Es funktioniert perfekt mit allen Browsern, die die Methode getAttribute () auf einem HTMLElement verwenden.
Wenn die
1
@Chuck anscheinend können Sie dem DOCTYPE Attribute hinzufügen: rodsdot.com/html/… - nicht, dass ich das für eine gute Idee halte, aber es scheint standardisiert zu sein.
Michael Stum
2
@Wahnfrieden: w3.org/TR/REC-html40/intro/sgmltut.html#idx-attribute-8 , die genehmigte, standardkonforme Methode. Was hier gut beschrieben und demonstriert wird: rodsdot.com/html/… Wie zuvor von anderen gepostet.
Zivilbiss
95

Hier ist eine Technik, die ich kürzlich verwendet habe:

<div id="someelement">

    <!-- {
        someRandomData: {a:1,b:2},
        someString: "Foo"
    } -->

    <div>... other regular content...</div>
</div>

Das Kommentarobjekt ist mit dem übergeordneten Element (dh #someelement) verknüpft.

Hier ist der Parser: http://pastie.org/511358

Um die Daten für ein bestimmtes Element abzurufen, rufen Sie einfach parseDataeinen Verweis auf dieses Element auf, der als einziges Argument übergeben wurde:

var myElem = document.getElementById('someelement');

var data = parseData( myElem );

data.someRandomData.a; // <= Access the object staight away

Es kann prägnanter sein als das:

<li id="foo">
    <!--{specialID:245}-->
    ... content ...
</li>

Darauf zuzugreifen:

parseData( document.getElementById('foo') ).specialID; // <= 245

Der einzige Nachteil dieser Verwendung besteht darin, dass sie nicht mit selbstschließenden Elementen (z. B. <img/>) verwendet werden kann, da sich die Kommentare innerhalb des Elements befinden müssen, um als Daten dieses Elements betrachtet zu werden.


EDIT :

Bemerkenswerte Vorteile dieser Technik:

  • Einfach zu implementieren
  • Macht HTML / XHTML nicht ungültig
  • Einfach zu bedienen / zu verstehen (grundlegende JSON-Notation)
  • Unauffällig und semantisch sauberer als die meisten Alternativen

Hier ist der Parser-Code (kopiert vom obigen Hyperlink http://pastie.org/511358 , falls er auf pastie.org nicht mehr verfügbar sein sollte):

var parseData = (function(){

    var getAllComments = function(context) {

            var ret = [],
                node = context.firstChild;

            if (!node) { return ret; }

            do {
                if (node.nodeType === 8) {
                    ret[ret.length] = node;
                }
                if (node.nodeType === 1) {
                    ret = ret.concat( getAllComments(node) );
                }
            } while( node = node.nextSibling );

            return ret;

        },
        cache = [0],
        expando = 'data' + +new Date(),
        data = function(node) {

            var cacheIndex = node[expando],
                nextCacheIndex = cache.length;

            if(!cacheIndex) {
                cacheIndex = node[expando] = nextCacheIndex;
                cache[cacheIndex] = {};
            }

            return cache[cacheIndex];

        };

    return function(context) {

        context = context || document.documentElement;

        if ( data(context) && data(context).commentJSON ) {
            return data(context).commentJSON;
        }

        var comments = getAllComments(context),
            len = comments.length,
            comment, cData;

        while (len--) {
            comment = comments[len];
            cData = comment.data.replace(/\n|\r\n/g, '');
            if ( /^\s*?\{.+\}\s*?$/.test(cData) ) {
                try {
                    data(comment.parentNode).commentJSON =
                        (new Function('return ' + cData + ';'))();
                } catch(e) {}
            }
        }

        return data(context).commentJSON || true;

    };

})();
James
quelle
2
Welche Methode verwenden Sie aus Neugier für selbstschließende Tags? Im Allgemeinen muss ich so etwas für <input> -Elemente verwenden (um clientseitige Validierungsregeln zu unterstützen). Welche Alternative nehmen Sie in dieser Situation?
TM.
2
Ich würde wahrscheinlich eine ähnliche Technik verwenden, anstatt dass die Kommentardaten mit dem "parentNode" verknüpft sind, könnte sie mit dem "previousSibling" des Kommentars verknüpft sein ... Dann könnten Sie den Kommentar unmittelbar nach der <Eingabe /> haben und es würde Arbeit: <Eingabe /> <! - {Daten: 123} ->
James
7
jemand sollte dies ein jquery Plugin machen
SeanDowney
10
Kommentare sollten geändert / gelöscht werden können, ohne etwas zu beschädigen. Das ist der springende Punkt. Es ist daher eine schlechte Idee, alles, was für das Markup oder den Code wichtig ist, in Kommentare einzufügen. Zukünftige Entwickler könnten leicht denken, dass sie Kommentare sind, und sie löschen. Wir haben bereits eine echte Lösung für diese Frage: Benutzerdefinierte Attribute mit dem Präfix "data-". Dieser Ansatz sollte niemals verwendet werden.
MGOwen
6
Lassen Sie mich die Aussage von @MGOwen bekräftigen: Verwenden Sie keine Kommentare zum Hinzufügen von Funktionen. Speziell im HTML. Verwenden Sie keine Minifikatoren? Sie können keine Kommentare entfernen, ohne Ihren Code zu beschädigen. Dies bedeutet auch, dass Sie keine echten Kommentare mehr hinzufügen können.
Olivictor
15

Sie können ein beliebiges Attribut erstellen, wenn Sie ein Schema für Ihre Seite angeben.

Beispielsweise:

Füge das hinzu

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a addthis:title="" addthis:url="" ...>

Facebook (sogar Tags)

<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
...
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>
BrunoLM
quelle
10

Der einfachste Weg, die Verwendung benutzerdefinierter Attribute zu vermeiden, besteht darin, vorhandene Attribute zu verwenden.

Verwenden Sie aussagekräftige, relevante Klassennamen. Führen
Sie beispielsweise Folgendes aus : type='book'und type='cd', um Bücher und CDs darzustellen. Klassen sind viel besser, um darzustellen, was etwas IST .

z.B class='book'

Ich habe in der Vergangenheit benutzerdefinierte Attribute verwendet, aber ehrlich gesagt besteht keine Notwendigkeit dafür, wenn Sie vorhandene Attribute auf semantisch sinnvolle Weise verwenden.

Nehmen wir an, Sie haben eine Website mit Links zu verschiedenen Arten von Geschäften. Sie könnten Folgendes verwenden:

<a href='wherever.html' id='bookstore12' class='book store'>Molly's books</a>
<a href='whereverelse.html' id='cdstore3' class='cd store'>James' Music</a>

CSS-Styling könnte Klassen wie: verwenden.

.store { }
.cd.store { }
.book.store { }

Im obigen Beispiel sehen wir, dass beide Links zu Geschäften sind (im Gegensatz zu den anderen nicht verwandten Links auf der Site) und einer ein CD-Laden ist und der andere ein Buchladen.

Jonathan Fingland
quelle
4
Guter Punkt, aber um fair zu sein, "Typ" ist nur für bestimmte Tags gültig. Wenn es sich um ein gültiges Attribut handelt, enthält es auch eine Liste gültiger Werte, sodass Sie immer noch nicht wirklich w3c-konform sind.
TM.
1
Mein Punkt war, dass Sie das Typ-Tag NICHT dafür verwenden sollten. Daher die Wenn Sie ... dann sollten Sie ... Ich werde bearbeiten, um das klarer zu machen
Jonathan Fingland
Ich neige dazu, meine "Klassen" -Attribute mit Aromen zu versehen, indem einige von ihnen mit einer Art "Qualifier-" versehen werden. Für Divs, die sich nur auf das Layout beziehen, hätte ich die Klasse "layout-xxx", oder für interne Divs, die einen wichtigen Teil umgeben, wie ein Buch oder ein Geschäft, hätte ich ein Inhaltsbuch oder einen Inhaltsspeicher . Dann habe ich in meinem JavaScript eine Funktion, die dem Tag diese Dinge vorstellt, basierend auf dem, wonach ich suche. Es hilft mir, die Dinge sauber und organisiert zu halten, erfordert aber ein gewisses Maß an Disziplin und Vororganisation.
Ape-inago
2
@ Jonathan Die Doppelklassen-Sache funktioniert großartig, außer in Fällen, in denen die 'Werte' nicht bekannt sind. Wenn es sich beispielsweise um eine Art Ganzzahl-ID handelt, können wir nicht für jeden möglichen Fall eine sehr gute Auswahl treffen. Wir müssen dann das Klassenattribut manuell analysieren, was definitiv funktioniert, aber im Code nicht so klar ist und in einigen Fällen sehr langsam sein kann (wenn viele Kandidatenelemente analysiert werden müssen).
TM.
2
Leider funktioniert das gleichzeitige Schreiben von CSS-Selektoren für zwei Klassen (.ab beachten Sie das fehlende Leerzeichen) im IE nicht. Es funktioniert jedoch in Firefox und anderen Browsern.
Dennoch
6

Betten Sie die Daten in den Dom ein und verwenden Sie Metadaten für jQuery .

Alle guten Plug-Ins unterstützen das Metadaten-Plugin (wobei Optionen pro Tag zulässig sind).

Es ermöglicht auch unendlich komplexe Daten / Datenstrukturen sowie Schlüssel-Wert-Paare.

<li class="someclass {'some': 'random,'json':'data'} anotherclass">...</li>

ODER

<li class="someclass" data="{'some':'random', 'json': 'data'}">...</li>

ODER

<li class="someclass"><script type="data">{"some":"random","json":"data"}</script> ...</li>

Dann holen Sie sich die Daten wie folgt:

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'random' )
alert('It Worked!');
antony.trupe
quelle
22
Das Beschädigen des Klassenattributs, wenn es eine von W3C genehmigte Methode zum Festlegen benutzerdefinierter Attribute gibt, ist wahrscheinlich der Grund, warum Sie abgewählt wurden.
Zivilbiss
2
Das Beschädigen des Klassenattributs ist nur eine der Möglichkeiten, das Plugin zu verwenden. es ist nicht der einzige Weg.
antony.trupe
1
Ein weiterer Grund, warum Sie abgewählt wurden, ist der Vorschlag eines Plugins, für das überhaupt kein Plugin benötigt wird.
Meandre
4

Ich sehe kein Problem darin, vorhandene XHTML-Funktionen zu verwenden, ohne etwas zu beschädigen oder Ihren Namespace zu erweitern. Schauen wir uns ein kleines Beispiel an:

<div id="some_content">
 <p>Hi!</p>
</div>

Wie füge ich some_content ohne zusätzliche Attribute zusätzliche Informationen hinzu? Was ist mit dem Hinzufügen eines weiteren Tags wie dem folgenden?

<div id="some_content">
 <div id="some_content_extended" class="hidden"><p>Some alternative content.</p></div>
 <p>Hi!</p>
</div>

Es behält die Beziehung über eine genau definierte ID / Erweiterung "_extended" Ihrer Wahl und durch ihre Position in der Hierarchie bei. Ich verwende diesen Ansatz oft zusammen mit jQuery und ohne Ajax-ähnliche Techniken zu verwenden.

Merkuro
quelle
2
Das Problem beim Hinzufügen verschachtelter Tags wie dieser besteht darin, dass SEHR umständlicher und hässlicher serverseitiger Code (JSP / ASP / DTL usw.)
TM erstellt wird.
3

Nein. Versuchen Sie stattdessen so etwas:

<div id="foo"/>

<script type="text/javascript">
  document.getElementById('foo').myProperty = 'W00 H00! I can add JS properties to DOM nodes without using custom attributes!';
</script>
Anon
quelle
1
Sie schreiben also lieber viele zusätzliche Skript-Tags für dynamische Seiten in Ihr Dokument? Ich würde manuelle Javascript-Zuweisungen verwenden, wenn die Informationen auf der Clientseite hinzugefügt werden, aber bei diesem Problem geht es hauptsächlich darum, was auf dem Server gerendert werden soll. Außerdem ist jQuery.data () viel besser als Ihre Methode.
TM.
Die obige Antwort ist ein Framework-unabhängiges, ausführliches Beispiel, um die Funktionalität zu demonstrieren. Sie können das Wesentliche leicht erweitern, um den Code ziemlich knapp zu machen. Beispiel: <div id = "foo" /> <div id = "bar" /> <div id = "baz" /> <script type = "text / javascript"> xtrnlFnc ({foo: 'w00 h00', bar : 'etc.', baz: 3.14159}); </ script> Wenn Sie jQuery verwenden (nicht, dass Sie es in Ihrer ursprünglichen Frage erwähnt haben), verwenden Sie auf jeden Fall die Datenmethode - dafür ist es da. Wenn nicht, ist das Übergeben von Daten zwischen Architekturebenen eine absolut gültige Verwendung von Inline-Skript-Tags.
Anon
Es ist definitiv eine offensichtliche, gültige Option. Meiner Meinung nach überfrachtet es den Code viel mehr als viele andere Alternativen, die keine benutzerdefinierten Attribute verwenden. Und um ganz klar zu sein, ich versuche nicht, kämpferisch oder unhöflich zu sein, ich versuche nur, einige Ihrer Überlegungen zu überreden, warum Sie diese Methode bevorzugen. Sie haben eine Alternative bereitgestellt, aber darum geht es bei der Frage nicht wirklich.
TM.
1
Ich glaube nicht, dass es ein Problem mit diesem Ansatz gibt, Browser zu beschädigen. Microsoft verwendet genau diesen Mechanismus als bevorzugten Mechanismus für ASP.NET-Seiten. (durch Aufrufen von RegisterExpandoAttribute auf der Serverseite). Die Frage scheint sich auf den Client und nicht auf den Server zu konzentrieren, aber auf der Serverseite könnten (sollten?) Alle diese Ansätze abstrahiert werden.
Adrian
3
Die Vorteile dieses Ansatzes: - Es erzeugt ein gültiges Markup (auch unter alten Browsern / Spezifikationen). - Es macht die Absicht der Daten (von JS zu konsumieren) klar. - Es ist kohärent für das Element, ohne andere Funktionen (wie Kommentare) geschickt zu nutzen. - Es ist keine spezielle Analyse erforderlich. Aus serverseitiger Sicht können Sie sich das wie einen RPC vorstellen.
Dampfer25
2

Ich verwende keine benutzerdefinierten Attribute, weil ich XHTML ausgeben möchte, weil ich möchte, dass die Daten von Software von Drittanbietern maschinenlesbar sind (obwohl ich das XHTML-Schema erweitern könnte, wenn ich wollte).

Als Alternative zu benutzerdefinierten Attributen finde ich meistens die ID- und Klassenattribute (z. B. wie in anderen Antworten erwähnt) ausreichend.

Beachten Sie auch Folgendes:

  • Wenn die zusätzlichen Daten sowohl für Menschen als auch für Maschinen lesbar sein sollen, müssen sie mit (sichtbaren) HTML-Tags und Text anstatt als benutzerdefinierte Attribute codiert werden.

  • Wenn es nicht für Menschen lesbar sein muss, kann es möglicherweise mit unsichtbaren HTML-Tags und Text codiert werden .

Einige Benutzer machen eine Ausnahme: Sie lassen benutzerdefinierte Attribute zu, die zur Laufzeit von Javascript auf der Clientseite zum DOM hinzugefügt werden. Sie halten dies für in Ordnung: Da die benutzerdefinierten Attribute nur zur Laufzeit zum DOM hinzugefügt werden, enthält der HTML-Code keine benutzerdefinierten Attribute.

ChrisW
quelle
1

Wir haben einen webbasierten Editor erstellt, der eine Teilmenge von HTML versteht - eine sehr strenge Teilmenge (die von Mail-Clients fast überall verstanden wird). Wir müssen Dinge wie <td width="@INSWIDTH_42@">in der Datenbank ausdrücken , aber das können wir nicht im DOM haben, da sonst der Browser, in dem der Editor ausgeführt wird, ausflippt (oder eher ausflippt als über benutzerdefinierte Attribute ausflippt). . Wir wollten Drag & Drop, also war es nicht möglich, es rein in das DOM zu stellen, ebenso wie jquerys .data()(die zusätzlichen Daten wurden nicht richtig kopiert). Wir brauchten wahrscheinlich auch die zusätzlichen Daten, um für die Fahrt mitzukommen .html(). Am Ende haben wir uns für die Verwendung <td width="1234" rs-width="@INSWIDTH_42@">während des Bearbeitungsprozesses entschieden. Wenn wir dann alles veröffentlichen, entfernen wir widtheine Regex-Suche und zerstören sie s/rs-width=/width=/g.

Zuerst war der Typ, der das meiste davon schrieb, der Validierungs-Nazi zu diesem Thema und versuchte alles, um unser benutzerdefiniertes Attribut zu vermeiden, aber am Ende stimmte er zu, als nichts anderes für ALLE unsere Anforderungen zu funktionieren schien. Es half, als er erkannte, dass das benutzerdefinierte Attribut niemals in einer E-Mail erscheinen würde. Wir haben überlegt, unsere zusätzlichen Daten zu verschlüsseln class, aber entschieden, dass dies das größere von zwei Übeln sein würde.

Persönlich ziehe ich es vor , Dinge sauber zu halten und Validatoren usw. zu bestehen, aber als Angestellter des Unternehmens muss ich daran denken, dass meine Hauptverantwortung darin besteht, die Sache des Unternehmens voranzutreiben (so schnell wie möglich so viel Geld zu verdienen), nicht die meines egoistischen Wunsches nach technische Reinheit. Werkzeuge sollten für uns funktionieren; nicht wir für sie.

Bernd Jendrissek
quelle
1

Ich weiß, dass die Leute dagegen sind, aber ich habe eine super kurze Lösung dafür gefunden. Wenn Sie ein benutzerdefiniertes Attribut wie "meins" verwenden möchten, zum Beispiel:

<a href="test.html" mine-one="great" mine-two="awesome">Test</a>

Dann können Sie diesen Code ausführen, um ein Objekt zurückzugewinnen, genau wie es jquery.data () tut.

var custom_props = {} ;
$.each($(".selector")[0].attributes, function(i,x) {
    if (this.specified && x.name.indexOf("mine-") !== -1) 
        self.new_settings[x.name.replace("modal-","")] = x.value;
});
agrublev
quelle
0

Spezifikation : Erstellen Sie ein ASP.NET TextBox-Steuerelement, das seinen Text gemäß den Eigenschaften "DecimalSeparator" und "ThousandsSeparator" mithilfe von JavaScript dynamisch automatisch als Zahl formatiert.


Eine Möglichkeit, diese Eigenschaften vom Steuerelement auf JavaScript zu übertragen, besteht darin, dass das Steuerelement benutzerdefinierte Eigenschaften rendert:

<input type="text" id="" decimalseparator="." thousandsseparator="," />

Benutzerdefinierte Eigenschaften sind über JavaScript leicht zugänglich. Während eine Seite, die Elemente mit benutzerdefinierten Eigenschaften verwendet, nicht überprüft wird , wird das Rendern dieser Seite nicht beeinflusst.


Ich nur diesen Ansatz verwenden , wenn ich einfache Typen wie Strings und Zahlen zu HTML - Elementen für die Verwendung mit JavaScript verknüpft werden soll. Wenn ich die Identifizierung von HTML-Elementen erleichtern möchte, verwende ich die Eigenschaften class und id .

cllpse
quelle
0

Bei komplexen Web-Apps lege ich überall benutzerdefinierte Attribute ab.

Für öffentlich zugängliche Seiten verwende ich das Attribut "rel" und speichere alle meine Daten dort in JSON und dekodiere sie dann mit MooTools oder jQuery:

<a rel="{color:red, awesome:true, food: tacos}">blah</a>

Ich versuche in letzter Zeit, mich an das HTML 5-Datenattribut zu halten, nur um mich "vorzubereiten", aber es ist noch nicht selbstverständlich.

Ryan Florence
quelle
-1

Ich benutze die ganze Zeit benutzerdefinierte Felder, zum Beispiel <ai = "" .... Dann verweise ich mit jquery auf i. Ungültiges HTML, ja. Es funktioniert gut, ja.

Marius
quelle
Hier scheint etwas zu fehlen. War Ihr Tag hier vollständig?
Stuart Siegler
Wie kann jemand das verstehen? Bitte vervollständigen Sie Ihre Antwort.
Rahul Raj
-2

Benutzerdefinierte Attribute sollten meiner bescheidenen Meinung nach nicht verwendet werden, da sie nicht validiert werden. Alternativ dazu können Sie viele Klassen für ein einzelnes Element definieren, z.

<div class='class1 class2 class3'>
    Lorem ipsum
</div>
Alan Haggai Alavi
quelle
10
Ich persönlich halte dies für ein schreckliches Beispiel. Ihre Klassennamen definieren, wie es aussieht, nicht seinen Zweck. Überlegen Sie, wann Sie alle ähnlichen Divs ändern möchten ... Sie müssten sie alle in span-11 oder ähnliches ändern. Klassen sollten definieren, was es ist. Die Stylesheets sollten definieren, wie diese Dinge aussehen
Jonathan Fingland
Wie würden Sie diese Methode verwenden, um mehr als nur ein Flag anzugeben? Ich stimme Ihrer Haltung eher zu und verwende keine benutzerdefinierten Attribute (obwohl ich darüber nachdenke). Der Vorteil eines Schlüssel / Wert-Paares scheint viel praktischer zu sein, als einfach eine weitere Klasse hinzuzufügen.
TM.
@ Jonathan Fingland: Wenn Compass verwendet wird, müssen Sie hier nicht die Klassennamen festlegen. Sie können sie einfach in der .sass-Datei angeben und Ihr Markup ist sauber.
Alan Haggai Alavi
@ Jonathan Fingland, das classAttribut ist definitiv nicht nur für "Looks" reserviert. Eine andere Verwendung ist "Allzweckverarbeitung durch Benutzeragenten". Davon spricht die Spezifikation: w3.org/TR/REC-html40/struct/global.html#h-7.5.2
npup
@npup: interessante Auswahl an Zitaten. Wie ich vor über einem Jahr festgestellt habe, definieren die Stylesheets, wie diese Dinge aussehen sollen (wie auch das Style-Attribut, das ich hinzufügen werde), und das Klassenattribut wird verwendet, um den Zweck des Elements zu definieren. Das heißt, es wird speziell verwendet, um zu definieren, was es ist und nicht wie es aussieht. Ich denke, Sie haben vielleicht einfach falsch gelesen, was ich gesagt habe, da wir uns, soweit ich das beurteilen kann, einig sind.
Jonathan Fingland