Was ist eine praktische maximale Länge für die HTML-ID?

88

Die HTML-Spezifikation sagt

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und können von einer beliebigen Anzahl von Buchstaben, Ziffern ([0-9]), Bindestrichen ("-") und Unterstrichen ("_") gefolgt werden. , Doppelpunkte (":") und Punkte (".").

Und obwohl die SGML-Deklaration von HTML 4 den Wert 65536 für NAMELEN verwendet, wird "Feste Grenzwerte vermeiden" angegeben.

Aber Browser, CSS-Implementierungen und JavaScript-Toolkits müssen sicherlich einige Einschränkungen hinsichtlich der Länge haben, die sie unterstützen. Was ist die kleinste solche Grenze, die in einer HTML / CSS / JS-Anwendung sicher verwendet werden kann?

javascript html css System PAUSE
quelle
3
Vielen Dank und +1 für den Hinweis, dass IDs mit einem Buchstaben beginnen müssen. Ich habe in der Vergangenheit ohne Probleme IDs wie '1', '2', '3', '4', '5' verwendet. Ich mache eine Menge umfragebezogener Widgets und interaktiver Elemente und verwende das IDS wie dieses, um ein bequemes 'Score'-Attribut sowie eine ID-Referenz zu erhalten. Heute habe ich versucht, ein CSS zum Laufen zu bringen, das eigentlich hätte funktionieren sollen. Ich habe es sogar am W3C-Validator vorbeigeführt und es hat mich nicht auf dieses Problem aufmerksam gemacht ... Aber dieser Beitrag hat es getan. Und jetzt, wenn ich id = '5' in 'x5x' geändert habe, funktioniert das CSS ... Jetzt muss ich nur noch die Bewertungsunterroutine ändern, um die x zu entfernen! Nochmals vielen Dank.
Ben A. Hilleli

Antworten:

216

Gerade getestet: 1 Million Zeichen funktionieren in jedem modernen Browser: Chrome1, FF3, IE7, Konqueror3, Opera9, Safari3.

Ich vermute, dass noch längere Ausweise schwer zu merken sein könnten.

Phihag
quelle
15
Dieser Typ hat 10 "Millionen" Charaktere gemacht! stackoverflow.com/a/1496150/74585
Matthew Lock
1
Es tut mir Leid. 1M? Wie in 1 Million?
Beliha
8
@phihag Als ich in Toronto CS studierte und der Ausbilder witzelte, dass "natürlich jeder weiß, warum im Oktober 1582 10 Tage im gregorianischen Kalender fehlen", musste ich einen Kollegen fragen, der mich herablassend ansah und sagte: " Was, Sie haben wegen der Annahme des Gregorianischen Kalenders nie die Grundschule besucht? " Ich hatte nicht. Nicht in Kanada. Ich besuchte die Grundschule in Ägypten und lernte stattdessen den islamischen Kalender kennen. Das Gleiche gilt für die SI-Präfixe: Sie haben möglicherweise den Vorteil westlicher Bildung, das habe ich nicht. Aber trotzdem danke für die herablassende Haltung.
Beliha
2
@beliha Ich bin mir ziemlich sicher, dass ich zumindest hier in Portugal noch nie gehört habe, dass im Oktober 1582 im gregorianischen Kalender 10 Tage fehlen, und ich vermute, dass ich nicht der einzige bin. Ich glaube nicht, dass die Schule das jemals gelehrt hat, soweit ich mich erinnern kann, daher wäre es für jeden mutig zu erwarten, dass jeder es weiß.
user7393973
1
@beliha Ich bin in die westliche Schule gegangen und habe nicht einmal gelernt, dass wir den gregorianischen Kalender verwenden (nicht zuletzt mit diesem Namen), wir haben nur den Standardkalenderbegriff verwendet. und über diese 10 fehlenden Tage habe ich es von Youtube gelernt.
Tinaira
15

Eine praktische Grenze ist für mich jedoch, wie lange eine ID in meinem Kopf gespeichert werden kann, während ich mit HTML / CSS arbeite.

Diese Grenze liegt normalerweise zwischen 8 und 13 Zeichen, je nachdem, wie lange ich gearbeitet habe und ob die Namen im Kontext des Elements sinnvoll sind.

Nick Presta
quelle
5
Ich würde hinzufügen, dass es möglich sein könnte, den "internen Puffer" bei Bedarf mit Präfixen zu erweitern. :-)
Ben Blank
12
Diese Frage ist immer noch sehr wichtig, da bei RIAs häufig IDs durch Code generiert werden und lang sein können, um eindeutig zu sein. als Beispiel: window_2_panel_12_group_6_label_2 _...
Josh
3

Manchmal habe ich sehr lange Ausweise, aber ich benenne sie konsistent, um ihrem genauen Zweck zu entsprechen.

Beispielsweise...

<div id="page">
    <div id="primary-content"></div>
    <div id="secondary-content"></div>
    <div id="search-form-and-primary-nav-wrapper">
        <form id="search-form"></form>
        <ul id="primary-nav">
            <li id="primary-nav-about-us"></li>
        </ul>
    </div>
    <a id="logo"><img /></a>
</div><!-- /#page -->

Wie Sie sehen können, sind die Selektoren gelegentlich ziemlich lang. Aber meiner Meinung nach ist es so viel einfacher, als mit etwas wie YUI grids.css zu arbeiten, bei dem Sie IDs wie #doc, #bd, # yui-main usw. erhalten.

Mark Hurd
quelle
3
Was ich oft mache, ist, sie heirachisch zu benennen, also habe eine div id = 'user', dann kann ich innerhalb dieser drei divs haben, id = 'user-stats', id = 'user-inventar', id = 'user- Zaubersprüche ', dann sagen wir in Benutzerstatistiken, ich könnte 5 Divs haben, id =' Benutzerstatistikstärke ', id =' Benutzerstatistik-Beweglichkeit ', id =' Benutzerstatistik-Verteidigung ', id =' Benutzer- stats-intellekt ', id =' user-stats-heath 'usw. usw., was ich sehr nützlich finde, um mich an ihre IDs zu erinnern, solange ich Namenskonventionen einhalte, dh -s oder _s für Leerzeichen oder camelCase.
Psytronic
2

Wenn dies eine akademische Frage ist, ist sie ziemlich interessant ... aber was Best Practices betrifft, sollten Sie diese nicht ausstrecken müssen oder wollen. Wenn Sie Daten zu einem HTML-Element speichern müssen, ist es besser, sie in ein Attribut im DOM-Objekt einzufügen.

Matt Howell
quelle