2016-02-15 68 views
1

我注意到在很多模板引擎中,在HTML5中,在各種框架和普通的php站點中,有<HTML>標記上添加了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>元素都會有這樣的數據,設備類型。有人可以解釋爲什麼經常這樣做嗎?

+1

這是爲什麼被downvoted? –

回答

5

data-device-type不是HTML5屬性。所有以data-爲前綴的屬性都是應用程序定義的。該屬性的「真實」名稱就是device-type

顯然data-device-type,,和其他似乎是最近已被網絡開發者採用的慣例 - 雖然我找不到任何規範或權威的來源。 Searching GitHub shows numerous projects using it,但他們似乎沒有共享任何可能使用該屬性的通用JavaScript庫。一些服務器端代碼將價值設置爲「板」(像Raspberry Pi之類的東西),「專用」(看似像亞馬遜Kindle之類的東西),「桌面「(桌面和筆記本電腦),它允許JavaScript讀取值並採取相應的行動 - 但是我找不到任何權威信息。

附註:這些使用案例似乎是服務器端客戶端檢測的氣味。這是一個壞主意,因爲你永遠不能相信客戶端(這就是爲什麼瀏覽器用戶代理字符串沒有意義了:他們都試圖假裝成其他瀏覽器來擊敗可憐的服務器端用戶代理嗅探技術)。

再說一次,請注意,具體的data-屬性不在HTML5規範中,因此就Web瀏覽器而言,沒有特別的含義。如果你想看看任何特定的應用程序如何使用屬性值,我建議你grep device-type的源代碼,並查看設置和讀取屬性的代碼 - 它可以是客戶端或服務器端。

+0

雖然特定的data- *屬性不在規範中,但[以數據爲前綴的屬性的一般用途已被涵蓋](https://www.w3.org/TR/2010/WD-html5-20101019/elements.html #嵌入定製,不可見的數據與 - 的數據的屬性)。只是注意到,由於在最後一段的措辭看起來好像他們根本沒有在規範 –

+0

感謝您的快速響應.... @戴 – OpenWebWar

+0

任何參考網站鏈接.. @戴 – OpenWebWar

1

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

+0

SuperG ...代碼片段解釋非常好的+++ – OpenWebWar