没有data- *前缀的自定义html属性是有效属性吗? [英] are custom html attributes without data-* prefix a valid attribute?

问题描述

Okey，所以最近我发现了这个: https://angularjs.org/

我注意到他们使用自定义属性前缀"ng-"

来自文章，例如: http://html5doctor.com/html5-custom-data-attributes/

甚至stackoverflow: https://stackoverflow.com/a/17091848/2803917

还有更多，唯一要使用的VALID(不是在说这个事实，无论如何他们都可以工作)前缀是"data-".

那么，有人可以向我解释一下，这百万个项目和公司怎么会为自定义html元素属性使用无效的前缀，而且似乎没人在乎? 还是我想念什么?

我真的很感谢一些想法，甚至是信息来源，而不仅仅是诸如每个人都这样做"和不要打扰而离开"之类的文本.

解决方案

这是一个古老的问题，但以下内容可能会有所帮助.

原则上，您可以创建所需的任何属性，尽管不能期望浏览器知道如何处理它们.在HTML中都是如此:

<p thing="whatever" … </p>

和JavaScript

//  p = some element
p.setAttribute('thing','whatever');

只要您使用属性选择器，您就可以 期望CSS认真对待您的自定义属性:

…[thing] {
    …
}

当然，如果您开始建立自己的属性，则会遇到两个问题:

• HTML验证程序将不知道您的新属性是故意的还是错误的，并且会假定它是不正确的
• 您正在与其他也构成自己属性的代码竞争

data-属性前缀具有两个优点:

• 出于验证目的，HTML验证程序将忽略该属性
• JavaScript会将这些属性收集到一个特殊的data对象中，以便于访问

有效地，前缀data-允许您通过告诉验证程序忽略该属性来使用其他无效的属性.

这不会解决属性名称竞争的问题，因此您几乎可以完全依靠自己.但是，通常的做法是至少包含特定于库的前缀.

最后是有效的问题.

如果通过有效表示您将通过标准(现代)HTML验证器(答案)，则只有data-属性将以这种方式工作.另一方面，如果您希望它能工作，那么只要您不希望浏览器猜测您的意思，CSS和JavaScript都可以很高兴地与其他组成的属性一起工作.

Okey, so, recently, i found this: https://angularjs.org/

I noticed that they use custom attribute prefix "ng-"

From articles, like: http://html5doctor.com/html5-custom-data-attributes/

or even stackoverflow: https://stackoverflow.com/a/17091848/2803917

And there are many more, the only VALID (im not talking about the fact, that they work anyways) prefix to use is "data-".

So, could someone explain to me, how can it be, that these, million projects and companies, uses an invalid prefix for custom html element attributes and no one seems to care? Or am i missing something?

I would really appreciate some thoughts, or even sources of info, not just texts like "everyone does it" and "don't bother and leave it".

解决方案

This is an old question, but the following may be helpful.

In principle, you can create any attributes you want, though you can’t expect the browser to know what to do with them. This is true both in HTML:

<p thing="whatever" … </p>

and in JavaScript

//  p = some element
p.setAttribute('thing','whatever');

You can expect CSS to take your custom attribute seriously, as long as you use the attribute selector:

…[thing] {
    …
}

Of course, if you start making up your own attributes, you run into two problems:

• An HTML validator won’t know whether your new attribute is deliberate or an error, and will assume that it’s incorrect
• You are competing with other code which is also making up its own attributes

The data- attribute prefix has two benefits:

• HTML validators will ignore the attribute for validation purposes
• JavaScript will gather these attributes into a special data object for easy access

Effectively the data- prefix allows you to work with an otherwise invalid attribute by telling the validator to overlook it.

This will not solve the problem of competing attribute names, so you’re pretty much on your own. However it is common practice to at least include a prefix specific to a library.

Finally to the question of being valid.

If, by valid, you mean will it pass a standard (modern) HTML validator, the answer, is only the data- attributes will work this way. If, on the other hand, you mean will it work, then both CSS and JavaScript will happily work with other made up attributes, as long as you don’t expect the browser to guess what you mean.

这篇关于没有data- *前缀的自定义html属性是有效属性吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！