HTML“专用”数据设备类型的用途是什么？

Question

我注意到在很多模板引擎中，在 HTML5 中，在各种框架和普通 php 站点中，添加了 data-device-type="dedicated"到 <HTML> 标签上。

为什么要这样做？是否有某种默认浏览器行为会对此数据设备类型做出反应？为什么总是包括它？这不会使数据设备类型本身过时

这是来自 HTML5 index.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> 元素将具有此数据设备类型。有人可以解释为什么经常这样做吗？

Answer 1

data-device-type 不是 HTML5 属性。所有以 data- 为前缀的属性都是应用程序定义的。属性的 "real" 名称就是 device-type.

显然 data-device-type、data-device-agent 和其他似乎是 Web 开发人员最近采用的约定 - 虽然我找不到任何规范或权威来源。 Searching GitHub shows numerous projects using it，但其中 none 似乎共享任何可能正在使用该属性的公共 JavaScript 库。

但每个人似乎都以相同的方式使用它：一些服务器端代码会将值设置为 "board"（对于 Raspberry Pi）、"dedicated"（看起来像 Amazon Kindle），"desktop"（适用于台式机和笔记本电脑）允许 JavaScript 然后读取值并采取相应行动 - 但是我找不到任何权威信息。

旁注：这些用例似乎有服务器端客户端检测的味道。这是一个坏主意，因为您永远无法信任客户端（这就是为什么浏览器用户代理字符串不再有意义：它们都试图假装成其他浏览器来击败糟糕的服务器端用户代理嗅探技术）。

再次请注意，特定的 data- 属性不在 HTML5 规范中，因此就网络浏览器而言没有特殊含义。如果您想查看任何特定应用程序如何使用属性值，我建议您 grep device-type 的源代码并查看设置和读取属性的代码 - 它可以是客户端或服务器端。

Answer 2

全局html 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>

HTML“专用”数据设备类型的用途是什么？

What is the purpose of the HTML “dedicated” data-device-type?

html

javascript

php

tags

doctype