所有关于HTML5 data-*属性你需要知道的事

Posted on

翻译自： All You Need to Know About the HTML5 Data Attribute

HTML5 data-*属性可以让你自定义数据给一个元素。这篇文章就来说说如何使用和什么时候应该用。

简介

在HTML5之前，我们的网页上有时候不得不依赖’class’和’rel’等属性来保存一些小的数据。这会导致有时候这些数据会与网站样式性或功能性的数据冲突。
在新的HTML5提出了一个新的属性“data”。在这篇文章里，我会用一些例子来介绍我们要如何使用这个属性才是正确的。

随着越来越多的网站受到数据驱动和类APP化的影响，他们开始需要对特定的元素上保存更多的数据。例如，我们要做一个音频的应用。我们可能需要用到这些标准的标记：

1
2
3
<audio controls="controls">
    <source src="track1.mp3" type="audio/mpeg" />
</audio>

上面的标记是容易接受的，但是我们可能想去保存更多关于音频的信息而不单单音频来源。例如，我们可能想要保存音频的长度，节奏和艺人的信息。我们可以通过一些自定义的data-* 属性来保存每个音频的对应信息：

1
2
3
<audio controls="controls">
  <source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />
</audio>

通过这些自定义属性提供的信息我们就可以更准确的去做例如搜索、过滤或者分类的操作。

如何只用 data-* 属性

data-* 属性的开头必须是’data-‘而且横杠后面必须包含最少一个字符。

W3C规定的data属性标准如下：

自定义数据属性旨在没有更合适的属性或元素的时候，使用自定义属性来存储页面或应用程序的私有数据。

就是说，我们应该内部使用这些属性来为我们的应用服务，而不应该用来存储和暴露我们用户的信息。另外要注意的是，你可以为任何元素添加任何数量的自定义属性。

什么时候应该用 data-* 属性

我们已经清楚知道怎么使用这个属性，现在再看一些其他的例子。

Luckily Webdesigntuts+ 已经提供了一些很好的例子。其中一个例子你可能会遇到，当我们需要对某个特性标签显示特定的气泡信息的时候，我们就可以把气泡的信息数据存到对应的标签上：

1
<a href="#" class="pink" data-bubble="2">Profile</a>

什么时候不应该使用 data-*

当标签有原有的属性或者更合适的属性的时候，我们就不应该使用 data-* 了，例如：

1
<span data-time="20:00">8pm<span>

我们知道其实 time 标签就可以做到上面的定义：

1
<time datetime="20:00">8pm</time>

data-* 属性不应该用作元数据或者micro formats的替代。Micro formats是为人类设计的，为了给出我们标签上下文。例如，你有一个Vcard提供个人或组织的联系方式，那么你可以基于它一个“vcard”的类，让机器知道这是一条联系信息。

【译者注】关于微格式(micro formats)的定义可以看一下这篇

我们应该使用下面的微格式标签结构：

1
2
3
<div class="vcard">
 <span class="fn " >Aaron Lumsden</span>
</div>

而不是：

1
2
3
<div class="vcard">
 <span data-name="Aaron Lumsden " >Aaron Lumsden</span>
</div>

【译者注】实际上现在很多的双数据绑定框架都是依赖 data-* 来保存实际数据，所以这里提到的规范被模糊很多了。

在CSS中使用 data-*

当我们在HTML标签使用了data-,我们同样可以在CSS上捕捉(target)到它们。但有一样很重要的事情是，千万不要直接通过data-属性来使用样式，即使在某些情况下是合适的。在CSS中捕捉data-*属性的方法跟其它的属性是类似的，你可以这样去做：

1
2
3
[data-role="page"] {
  /* Styles */
}

例如当我们在做手机端适配的时候，我们想让某些特定的内容只显示在手机端。就可以这样做：

1
2
3
<div data-role="mobile">
Mobile only ontent
</div>
1
2
3
div[data-role="mobile"]{
  display:none;
}

虽然不建议基于查看设备(【译者注】应该基于屏幕分辨率)去隐藏内容，但可能存在某些适当的情况。 妳应该根据每个具体情况能不能使用。

也可以使用属性中的数据并通过CSS显示它。 虽然规范说妳不应该把自定义属性中的数据向用户显示，但是在某些情况下可能是最好的方法。 这就是它的实现方式。

1
<div class="test" data-content="This is the div content">test</div>​

在CSS中，你可以使用’：after’ 这样的伪元素（或其他一些生成的内容），将该属性用作’after’内容的一部分，如下所示：

1
2
3
4
5
6
7
.test {
  display: inline-block;
}
 
.test:after {
  content: attr(data-content);
}

这样在’.text’ div中将会显示 ‘This is the div content’

在jQuery中使用data-*

jQuery已经整合了一个方法,十分方便。

1
2
<div data-info="a"></div>
$('div').data('info');

浏览器兼容行

其实目前基本上所有浏览器都是兼容了，所以这部分略过。

译者思考

之所以会找这篇文章来看，是在想一个问题：例如为什么不能直接使用 info=”” 来定义？而要使用 data-info=””，其实也是为了符合W3C的规范，实际上两者都是能拿到值的。规范是很重要的，无规则不成方圆。
完。