Quelle est la longueur maximale pratique pour l'identifiant HTML?

88

La spécification HTML dit

Les jetons ID et NOM doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis de n'importe quel nombre de lettres, chiffres ([0-9]), tirets ("-"), traits de soulignement ("_") , deux points (":") et des points (".").

Et même si la déclaration SGML de HTML 4 utilise la valeur 65536 pour NAMELEN, elle indique «Évitez les limites fixes».

Mais les navigateurs, les implémentations CSS et les boîtes à outils JavaScript doivent sûrement avoir certainement des limites sur la longueur qu'ils prennent en charge. Quelle est la plus petite limite de ce type pouvant être utilisée en toute sécurité dans une application HTML / CSS / JS?

javascript html css PAUSE système
la source
3
Merci et +1 d'avoir souligné que les identifiants doivent commencer par une lettre. J'ai utilisé des identifiants tels que «1», «2», «3», «4», «5» dans le passé sans problème. Je fais beaucoup de widgets et d'éléments interactifs liés à l'enquête et j'utilise l'IDS comme celui-ci pour un attribut de `` score '' pratique ainsi qu'une référence d'identification. Aujourd'hui, j'essayais de faire fonctionner un CSS qui aurait vraiment dû fonctionner. Je l'ai même passé devant le validateur du W3C et cela ne m'a pas alerté sur ce problème ... Mais ce message l'a fait. Et maintenant, quand j'ai changé id = '5' en 'x5x', le css fonctionne ... Maintenant, je dois juste changer le sous-programme de notation pour supprimer les x! Merci encore.
Ben A. Hilleli

Réponses:

216

Juste testé: 1M de caractères fonctionne sur tous les navigateurs modernes: Chrome1, FF3, IE7, Konqueror3, Opera9, Safari3.

Je pense que des identifiants encore plus longs pourraient devenir difficiles à retenir.

Phihag
la source
15
Ce type a fait 10 "millions" de personnages! stackoverflow.com/a/1496150/74585
Matthew Lock
1
Je suis désolé. 1M? Comme dans 1 million?
beliha
8
@phihag Quand j'ai étudié le CS à Toronto et que l'instructeur a plaisanté en disant que "tout le monde sait bien sûr pourquoi il manque 10 jours dans le calendrier grégorien d'octobre 1582", j'ai dû demander à un collègue, qui m'a regardé avec condescendance et a dit " A cause de l'adoption du calendrier grégorien, quoi, tu n'es jamais allé à l'école primaire? " Je n'avais pas. Pas au Canada. Je suis allé à l'école primaire en Égypte et j'ai appris le calendrier islamique à la place. Même chose avec les préfixes SI: vous pouvez bénéficier de l'éducation occidentale, pas moi. Mais merci pour l'attitude condescendante quand même.
beliha
2
@beliha À peu près sûr qu'au moins ici au Portugal je n'ai jamais entendu dire que le calendrier grégorien a 10 jours manquants en octobre 1582, et je suppose que je ne suis pas le seul. Je ne pense pas que l'école ait jamais enseigné cela d'après mes souvenirs, il serait donc audacieux pour quiconque de s'attendre à ce que tout le monde le sache.
user7393973 le
1
@beliha Je suis allé à l'école occidentale et je n'ai même pas appris que nous utilisions le calendrier grégorien (pas du moins par ce nom), nous avons juste utilisé le terme du calendrier standard. et à propos de ces 10 jours manquants, je l'ai appris sur youtube.
Tinaira
15

Une limite pratique, pour moi, est la longueur d'un identifiant que je peux stocker dans ma tête pendant le temps que je travaille avec le HTML / CSS.

Cette limite est généralement comprise entre 8 et 13 caractères, selon la durée de mon travail et si les noms ont un sens dans le contexte de l'élément.

Nick Presta
la source
5
J'ajouterais qu'il peut être possible d'étendre son "tampon interne" en utilisant des préfixes, si nécessaire. :-)
Ben Blank
12
Cette question est toujours très importante, car avec les RIA, souvent les identifiants sont générés par code et, pour être uniques, peuvent être longs; à titre d'exemple: window_2_panel_12_group_6_label_2 _...
Josh
3

Parfois, je me retrouve avec de très longs identifiants, mais je les nomme de manière cohérente pour correspondre à leur objectif exact.

Par exemple...

<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 -->

Comme vous pouvez le voir, les sélecteurs sont parfois assez longs. Mais c'est tellement plus facile à mon humble avis que de travailler avec quelque chose comme le grids.css YUI où vous vous retrouvez avec des identifiants comme #doc, #bd, # yui-main, etc.

Mark Hurd
la source
3
Ce que je fais souvent, c'est les nommer de manière héritière, alors ayez un div id = 'user', puis à l'intérieur de cela, je peux avoir trois divs, id = 'user-stats', id = 'user-inventaire', id = 'user- spells ', puis dites dans les statistiques utilisateur que je pourrais avoir 5 divs, id =' user-stats-Strength ', id =' user-stats-agility ', id =' user-stats-defense ', id =' user- stats-intellect ', id =' user-stats-heath 'etc etc, ce que je trouve très utile pour se souvenir de leurs identifiants, tant que je maintiens des conventions de nommage, ie, -'s ou _'s pour les espaces ou camelCase.
Psytronic
2

S'il s'agit d'une question académique, c'est assez intéressant ... mais en ce qui concerne les meilleures pratiques, vous ne devriez pas avoir besoin - ou vouloir - les étendre. Si vous avez besoin de stocker des données sur un élément HTML, il est préférable de les placer dans un attribut sur l'objet DOM.

Matt Howell
la source