我注意到在很多模板引擎中,在HTML5中,在各种框架和普通的php站点中,在<HTML>
标签上添加了data-device-type="dedicated"。
为什么要这样做?是否有某种默认浏览器行为对此数据设备类型做出反应?为什么总是包括它?这不会使数据设备类型本身过时
吗?下面是HTML5索引中的一个例子.html:
<!DOCTYPE html>
<html lang="en-IN" class="no-js" data-device-type="dedicated">
<head>
<title>doordie.co.in - all info 2 all </title>
如您所见,<html>
元素将具有此数据设备类型。有人可以解释为什么经常这样做吗?
data-device-type
不是HTML5属性。前缀为 data-
的所有属性都是应用程序定义的。该属性的"真实"名称只是device-type
。
显然,data-device-type
、data-device-agent
和其他似乎是 Web 开发人员最近采用的约定 - 尽管我找不到任何规范或权威来源。搜索 GitHub 显示了许多使用它的项目,但它们似乎都没有共享任何可能使用该属性的通用 JavaScript 库。
但是每个人似乎都以相同的方式使用它:一些服务器端代码会将值设置为"board"(对于Raspberry Pi之类的东西(,"专用"(看起来像Amazon Kindle之类的东西(,"桌面"(对于台式机和笔记本电脑(,这允许JavaScript读取值并采取相应的行动 - 但是我找不到任何权威信息。
旁注:这些用例似乎闻起来有服务器端客户端检测的味道。这是一个坏主意,因为您永远不能信任客户端(这就是为什么浏览器User-Agent字符串不再有意义:它们都试图伪装成其他浏览器来击败糟糕的服务器端用户代理嗅探技术(。
同样,请注意,特定的data-
属性不在HTML5规范中,因此就Web浏览器而言,没有赋予特殊含义。如果你想看看任何特定的应用程序如何使用属性值,我建议你grep源代码device-type
,看看是什么代码正在设置和读取属性 - 它可能是客户端或服务器端。
data-*属性用于存储数据(准备稍后由CSS或JavaScript调用(。
例:
var zzz = document.getElementsByTagName("div")[0].getAttribute("data-color");
var yyy = document.getElementsByTagName("div")[1].getAttribute("data-color");
document.getElementsByTagName("div")[0].style.background = zzz;
document.getElementsByTagName("div")[1].style.background = yyy;
div::after {
content: attr(data-append);
font-weight:bold;
}
<div data-append=" _SUCCESS" data-color="greenyellow">A simple div</div>
<div data-append=" _FAILURE" data-color="tomato">Another simple div</div>